美文网首页
iframe 父子页面通讯

iframe 父子页面通讯

作者: 醉青风 | 来源:发表于2021-08-14 23:06 被阅读0次

父页面向子页面传递参数:

<iframe loading="lazy" id="iframe" src="http://192.168.0.103:8081/" :width="windowWidth" :height="windowHeight">
<p>你的浏览器不支持 iframe。</p>
</iframe>

// 父发
var iframeWindow = document.getElementById('iframe').contentWindow;
iframeWindow.postMessage('发给子页面的数据', "http://192.168.0.103:8081/");

// 子收
window.addEventListener("message", function(event) {
console.log('接收到了', event)
}, false);

子页面向父页面传递参数

// 子发
window.parent.postMessage('传递给父页面的数据','*');

// 父收
window.addEventListener('message',function(event){
console.log('接收到了',event)
})

相关文章

网友评论

      本文标题:iframe 父子页面通讯

      本文链接:https://www.haomeiwen.com/subject/mgppbltx.html