iframe传值之Postmessage

本文介绍了如何使用window.postMessage在iframe中进行跨域通信,包括父页面向子页面、子页面向父页面传值的方法,并提供了相关的DEMO示例,适用于解决多层嵌套iframe通信问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

缘由:

最近遇到一个神奇的问题,淘宝WindVane不支持多层嵌套,只支持一层嵌套的形式,所以就像使用一层传值的方式来交互iframe,调研了几种方案以后,发现还是window.postMessage传值在iframe最靠谱,但是相对的要改动原来的页面,所以自己衡量啦~

 

API:

MDN API

 

传值方式:

父页面给子页面传值方式,写法基本是一致的,收到值监听message事件

 

 

父页面传值

示例:


    let url = $("#postMessageText").val();
    iFrame = document.getElementById('iframe-info');
    // 后台页面发送数据
    iFrame.contentWindow.postMessage({
      'resourceURL': "传值"
    }, '*');
  
<iframe id="iframe-info" src="https://www.taobao.com/"></iframe>

子页面给父页面传值</

### iframe间的数据递方式 在不同场景下,iframe之间的数据递可以通过多种方式进行。当涉及操作时,推荐使用 `postMessage` 方法来安全有效地实现通信[^3]。 对于同源策略下的iframes(即来自同一协议、端口和主机),有更多灵活的选择: - **URL 参数**:通过设置 `<iframe>` 的 src 属性为带有查询字符串的目标 URL 来初始化加载时的参数递。例如:<br> ```html <iframe src="http://127.0.0.1/demo?${params}" ref="iframe"></iframe> ``` - **JavaScript API (`contentWindow`) 和 DOM 操作**:可以直接访问嵌套框架的内容窗口对象并调用其上的方法或修改文档结构。不过这种方法受限于浏览器的安全机制——特别是情况下不允许这样做[^4]。 - **Storage Events (localStorage/sessionStorage)**:利用 Web Storage 接口存储键对,并监听 storage change 事件来进行简单的消息通知。这种方式适用于所有同源环境中的页面共享少量状态信息。 - **WebSockets 或 Shared Workers**:这些技术允许创建持久连接或者工作线程池用于更复杂的实时通讯需求;然而它们通常不是首选方案除非确实存在这样的特殊应用场景。 为了确保特定 tab 页面能够接收到预期的消息,在 HTML 中定义唯一的标识符以便 JavaScript 正确识别目标 iframe 是一种常见做法[^2]。 ```javascript // 获取指定ID的iframe元素 const iframeElement = document.querySelector('#specificIframeId'); // 发送消息给该iframe内的内容窗体 iframeElement.contentWindow.postMessage('message', '*'); // '*'表示不限制目标源 ``` 另外需要注意的是,如果希望子 iframe 能够读取父页面 URL 后面附带的 GET 请求参数,则可以在 PHP 文件中解析 HTTP Referer 头部字段作为临时解决方案之一。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值