iframe传参接受参数

### 使用 `postMessage` API 实现 iframe 中的参数传递 #### 发送消息给 iframe 为了从父窗口向嵌入的 iframe 发送消息，可以使用 `contentWindow.postMessage()` 方法。假设有一个名为 `child.html` 的 iframe 页面被加载到了当前页面中。 ```html  <iframe id="myIframe" src="child.html"></iframe> <script type="text/javascript"> var myIframe = document.getElementById('myIframe'); function sendMessageToIFrame(messageText) { const messageData = { text: messageText }; myIframe.contentWindow.postMessage(JSON.stringify(messageData), '*'); // '*' 表示不限制目标源域名 } </script> <button onclick="sendMessageToIFrame('Hello from Parent')">Send Message to iFrame</button> ``` 这段代码展示了如何定义一个按钮点击事件处理器来触发消息发送至 iframe[^2]。 #### 接收来自父窗口的消息在 iframe 内部，则需监听 `message` 事件以便接收到由父窗口发出的信息： ```javascript // child.html window.addEventListener('message', function(event) { console.log('Received message:', event.data); }); ``` 这里实现了对传入信息的日志记录功能[^4]。 #### 将数据作为 URL 参数传递给 iframe 除了利用 `postMessage` 进行动态交互外，还可以直接通过 URL 查询字符串的方式静态地初始化某些配置项或状态值。例如，在创建 iframe 标签时为其设定特定路径加上查询参数： ```html <iframe src="./child.html?param=value"></iframe> ``` 随后可以在 iframe 加载完成后解析这些参数并应用相应的逻辑处理[^1]。 #### 安全注意事项值得注意的是，尽管上述例子中采用了宽松的目标地址匹配（即 `"*"`) 来简化演示过程，但在实际开发过程中应当尽可能严格限定允许接收消息的具体来源站点，以防止潜在的安全风险[^3]。

阅读全文