美文网首页
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