父子页面通信

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

父页面：

<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)
  }
}

赏