父页面和iframe嵌套页面之间的通讯

最新推荐文章于 2024-10-02 05:39:15 发布

Summer不秃

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量395

点赞数 7

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/z001126/article/details/135554256

版权

子页面代码

<button id="close-btn">发送</button>

// 向父页面发送消息
$('#close-btn').on('click', () => {
    top.postMessage({type: 'close'}, getTargetUrl());
})

// 监听父页面发过来的消息
window.addEventListener('message', function(event) {
    var data = event.data;
    console.log(data._VISITOR_ID)
}, false);


var getParentUrl = function() {
    var url = null;
    if (parent !== window) {
        try {
            url = parent.location.href;
        } catch (e) {
            url = document.referrer;
        }
    }
    return url;
}

父页面代码

<iframe ref="iframe" class="w-full" style="height: 360px;" :src="baseUrl + '/index.html'" @load="iframeLoaded" />


// 监听iframe页面穿过来的消息
iframeLoaded() {
      window.addEventListener('message', (event) => {
        if (event.data.type === 'success') {
          console.log("接受成功"+event.data)
        }
      }, false);
    },

// 向iframe嵌套的页面发送消息
getActivity(e) {
      this.$refs.iframe.contentWindow.postMessage({
        _VISITOR_ID: '123123'
      }, 'iframe地址');
    }