Iframe父窗体与子窗体的交互传值方法

### 知识点：Iframe父子传值 在Web开发中，Iframe是HTML元素，用来嵌入另一个HTML页面。Iframe中的内容表现为一个独立的文档，可以有自己的URL和网页标题。这种元素在实现类似网页中嵌入网页的场景非常有用。然而，当涉及到父子窗体之间的交互时，需要实现一种机制来交换信息。下面详细探讨Iframe父子窗体之间如何进行数据传递。 #### 1. 同源策略限制 在深入了解如何传值之前，有必要了解一下浏览器的同源策略。同源策略是浏览器的一个安全机制，它限制了来自不同源的文档或脚本间的交互。如果两个页面具有相同的协议、主机名和端口号，则它们被认为是同源的。Iframe与父页面之间传值通常需要遵守这个策略。 #### 2. 父窗体向子Iframe传值 父窗体向子Iframe传递数据通常较为简单，可以通过JavaScript来实现。 - **通过URL参数** 父窗体可以通过在URL中附加参数的方式来传递数据，子Iframe通过监听`load`事件来获取URL参数。 - **通过Iframe的name属性** 可以设置`<iframe>`的`name`属性，并在父页面通过JavaScript访问`window.frames`或者`window.parent`对象来引用子iframe，并通过其属性和方法进行交互。 #### 3. 子Iframe向父窗体传值 由于安全原因，子Iframe向父窗体传值较为复杂，主要分为以下几种方式： - **通过postMessage API** `postMessage`是HTML5引入的一个新API，它提供了一种安全的方法来实现跨源通信。子iframe和父窗体都可以使用`window.postMessage`方法发送消息，并通过`window.addEventListener`监听消息。 示例代码如下： 父窗体向子iframe传值： ```javascript var iframe = document.getElementById('childIframe'); iframe.contentWindow.postMessage('父窗体向子iframe传值的信息', '子iframe的源'); ``` 子iframe向父窗体传值： ```javascript window.addEventListener('message', function(e) { // 检查消息来源是否是预期的父窗体 if(e.origin === '父窗体的源') { // 处理消息内容 console.log('子iframe收到父窗体的信息:', e.data); } }); ``` - **通过改变父窗体的URL哈希值** 子iframe可以修改自己URL的哈希部分（即`#`后面的部分），父窗体通过轮询（polling）检测URL的变化来接收数据。 #### 4. 使用全局JavaScript变量 尽管不推荐，但在同源的子iframe和父窗体之间，可以使用全局JavaScript变量进行传值，因为它们共享同一个窗口对象。但这种做法存在安全风险，不建议在复杂或安全性要求较高的应用中使用。 #### 5. 使用jQuery 如果你的项目中使用了jQuery库，可以利用它提供的方法来简化Iframe传值的过程。 #### 6. 注意事项 - 在使用`postMessage`时，始终检查消息来源（即`e.origin`）的合法性。 - 尽量避免使用`window.name`进行传值，因为其值在同一个窗口内会保持不变，可能会导致数据被覆盖。 - 跨域情况下，必须确保通讯双方在双方的域中都有相应的`window.addEventListener('message', callback)`监听器。 #### 7. 结论 Iframe父子传值是Web开发中的一种常见需求，正确实现这一功能需要对同源策略有所了解，并妥善使用`postMessage`等方法。在进行实际应用时，开发者应当根据实际的跨域需求以及安全要求，选择最合适的传值策略。