父子页面通信

发布时间:2020-10-29 09:26:18 作者:Mos 阅读量:381

父页面:

<iframe id="iframe" src="a.html" style="margin: 0;border: 0;padding: 0;width: 100%;height: 900px;"></iframe>
<script>
window.onload = function(){
    document.getElementById('iframe').contentWindow.postMessage('初始化', '*')
    window.addEventListener('message', function (event) {
        var origin = event.origin;
      // 自己的业务逻辑
      $.get(origin + "/api/pano/views/structure/detail?id=" + event.data,function (res) {
            // 替换链接地址
            var content = res.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function (match, capture) {
                return match.replace(capture,(origin + capture));
            });
            layer.open({
                type: 1,
                skin: 'layui-layer-rim',
                area: ['600px', '500px'],
                content: content
            });
        });
    }, false);
}
</script>

子页面a.html:

var parentEvent = null;
window.onload = window.addEventListener('message', receiveMsg, false);
function receiveMsg(e) {
  parentEvent = e;
}
function postMsg(data) {
  if(parentEvent){
    parentEvent.source.postMessage(data, parentEvent.origin)
  }
}


转载请注明出处:文思齐远博客,如果对您有帮助,请帮忙点一下右侧的广告,谢谢您了!
支付宝打赏 微信打赏

我要评论

猜你想搜

实时天气

©2020 i847.cn
部分内容转自网络,如有损害您的权益,致邮联系:jiang2008wen#126.com,一经证实,立即删除!    我要留言
备案号:蜀ICP备18020563号-1