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>

子页面给父页面传值</

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值