iframe父子页面传递参数

在父子页面之间传递参数，可以使用 iframe 的 postMessage 方法。

在父页面中，使用 JavaScript 获取到 iframe 元素，并使用 postMessage 方法发送消息给子页面，如下所示：

var iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage('参数值', '子页面URL');

在子页面中，监听 message 事件，并处理接收到的参数，如下所示：

window.addEventListener('message', function(event) {
  if (event.origin === '父页面URL') {
    var 参数值 = event.data;
    // 处理接收到的参数
  }
});

请注意替换代码中的 `myIframe`、`子页面URL` 和 `父页面URL` 分别为你的 iframe 的 id、子页面 URL 和父页面 URL。

这样，父子页面之间就可以通过 postMessage 方法传递参数了。

相关问题

前端iframe父子页面传递参数

前端中，通过`<iframe>`实现父子页面之间的参数传递通常涉及到window.postMessage()方法。当在一个页面（父页面）中有一个嵌套的`iframe`（子页面），你可以这样做：

1. **父页面向子页面发送数据**:
父页面通过JavaScript的`postMessage()`方法，将需要传递的数据作为参数发送：

   window.parent.postMessage({ key: 'value'}, '*');

`*`是一个通配符，表示可以接收来自任何源的消息。

2. **子页面接收数据**:
子页面（即iframe内部的窗口）需要设置`window.addEventListener('message')`监听消息，并处理接收到的数据：

   window.addEventListener('message', function(event) {
       if (event.origin !== 'http://parent-domain.com') return; // 防止跨域攻击
       console.log(event.data); // 打印接收到的数据
       // 在这里处理接收到的数据
   });

3. **安全性注意**:
跨域限制（同源策略）意味着除非父页面和子页面在相同的域名下，否则`postMessage()`默认只允许它们之间通信。为了安全起见，你需要检查事件的`origin`属性来确认发送者的来源是否可信。

iframe父页面向子页面传值

在使用iframe时，父页面向子页面传值的方法如下所示：在父页面的JS代码中，可以通过postMessage函数向子页面发送消息。该函数需要两个参数，即key和value，分别表示字段名和值。首先，通过获取iframe元素，然后使用contentWindow属性获取iframe的contentWindow对象。接着，调用postMessage函数，将要传递的数据以对象的形式传入，对象的key对应字段名，value对应值。具体代码如下所示：postMessage: function (key, value) { let iframe = $('iframe')[0]; if (iframe) { iframe.contentWindow.postMessage({ 'key': key, 'value': value }, iframe.src); } }。这样，父页面就能够向子页面传递值了。 [2<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [iframe 父子页面之间传值](https://blog.csdn.net/Caocui_/article/details/122664544)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [JS父页面与子页面相互传值方法](https://download.csdn.net/download/weixin_38631738/13049741)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]