js-子页面和父页面互相调取

最新推荐文章于 2024-06-13 11:10:08 发布

CodeMen_

最新推荐文章于 2024-06-13 11:10:08 发布

阅读量384

点赞数

分类专栏：前端文章标签： javascript html5 html

本文链接：https://blog.youkuaiyun.com/qq_40841733/article/details/120439217

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了如何通过window.postMessage实现父子页面间的双向通信。包括父页面如何监听子页面发送的消息及子页面如何监听父页面发送的消息。

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

子页面调取父页面：

父页面监听

window.addEventListener('message', function (e) {
    if (e.data.evt == 'test') {
        console.log('success');
    }

}, false);

子页面调取

if (window.parent) {
            try {
                var msg = { evt: "test" };
                window.parent.postMessage(msg, 'https://父页面域名/');
            } catch (e) {
                console.log(e);
            }
        }

父页面调取子页面：

子页面监听

window.addEventListener('message',function(e){
        if (e.data.evt == 'test')
        {
            //操作
        }
    },false);

父页面调取

var childWin = $('#ifreamId')[0].contentWindow;
if (childWin) {
            try {
                var msg = { evt: "test" };
                childWin.postMessage(msg, 'https://子页面域名/');
            } catch (e) {
                console.log(e);
            }
        }