乐趣区

关于前端:html-父子页面iframe双向发消息

jiezi

某天，领导提了一个需要，主页面外面嵌套 iframe，父子页面双向发送音讯。而后我就提了一个计划：postMessage

常识实践筹备：

postMessage 办法容许来自不同源的脚本采纳异步形式进行无限的通信，能够实现跨文本档、多窗口、跨域消息传递。

语法：

otherWindow.postMessage(message, targetOrigin, [transfer]);
  • otherWindow：其余窗口的援用，如 iframe 的 contentWindow、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。
  • message：将要发送到其余 window 的数据。
  • targetOrigin：指定那些窗口能接管到音讯事件，其值能够是字符串“*”示意无限度，或者是一个 URI。
  • transfer：是一串和 message 同时传递的 Transferable 对象，这些对象的所有权将被转移给音讯的接管方，而发送方将不再保留所有权。

postMessage 办法被调用时，会在所有页面脚本执行结束之后像指标窗口派发一个 MessageEvent 音讯，该 MessageEvent 音讯有四个属性须要留神：

  • type：示意该 message 的类型
  • data：为 postMessage 的第一个参数
  • origin：示意调用 postMessage 办法窗口的源
  • source：记录调用 postMessage 办法的窗口对象

1、操作流程如下：

1. 筹备两个页面

  • http://a.com/main.html 主页面
  • http://b.com/iframepage.html 嵌套页面

main.html

`<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage 跨域通信 主页面 </title>
</head>
<body>
    <h1> 主页面 </h1>
    <iframe id="child" src="http://b.com/iframepage.html"></iframe>
    <div>
        <h2> 主页面接管音讯区域 </h2>
        <span id="message"></span>
    </div>
</body> 
</html>`

iframepage.html

`<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage 跨域通信 子页面 </title>
</head>
<body>
    <h2> 子页面 </h2>
    <div>
        <h3> 接管音讯区域 </h3>
        <span id="message"></span>
    </div>
</body>
</html>`

2、父向子发送音讯

main.html

`<script>
    window.onload = function(){document.getElementById('child')
         .contentWindow.postMessage("主页面音讯", 
                "http://b.com/iframepage.html")
    }
</script>`

留神：
肯定是页面加载实现后在发送音讯，否则会因为 iframe 未加载实现报错。

`Failed to execute‘postMessage’on‘DOMWindow’`

子页面接管音讯：
iframepage.html

`<script>
    window.addEventListener('message',function(event){console.log(event);
        document.getElementById('message').innerHTML = "收到" 
            + event.origin + "音讯：" + event.data;
    }, false);
</script>`

此时可看到页面中，iframe 的子页面中打印了 

 收到 http://a.com 音讯：主页面音讯 `

以及控制台打印了 MessageEvent 对象。

3、子向父发送音讯

子页收到音讯后回复父页面
iframepage.html

<script>
    window.addEventListener('message',function(event){console.log(event);
        document.getElementById('message').innerHTML = "收到" 
            + event.origin + "音讯：" + event.data;
        top.postMessage("子页面音讯收到", 'http://a.com/main.html')
    }, false);
</script>

父页面收到音讯并显示：

window.addEventListener('message', function(event){document.getElementById('message').innerHTML = "收到" 
        + event.origin + "音讯：" + event.data;
}, false);

4、残缺代码

main.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage 跨域通信 主页面 </title>
</head>
<body>
    <h1> 主页面 </h1>
    <iframe id="child" src="http://b.com/iframepage.html"></iframe>
    <div>
        <h2> 主页面接管音讯区域 </h2>
        <span id="message"></span>
    </div>
</body> 
<script>
    window.onload = function(){document.getElementById('child')
         .contentWindow.postMessage("主页面音讯", 
            "http://b.com/iframepage.html")
    }
    window.addEventListener('message', function(event){document.getElementById('message').innerHTML = "收到"
         + event.origin + "音讯：" + event.data;
    }, false);
</script>
</html>

iframepage.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>iframe+postMessage 跨域通信 子页面 </title>
</head>
<body>
    <h2> 子页面 </h2>
    <div>
        <h3> 接管音讯区域 </h3>
        <span id="message"></span>
    </div>
</body>
<script>
    window.addEventListener('message',function(event){if(window.parent !== event.source){return}
        console.log(event);
        document.getElementById('message').innerHTML = "收到" 
            + event.origin + "音讯：" + event.data;
        top.postMessage("子页面音讯收到", 'http://a.com/main.html')
    }, false);
</script>
</html>
退出移动版