postmessage用法_postmessage_postmessage是什么(2)

父页面使用postMessage的targetOrigin参数来限制哪个页面可以接收该消息；即使注入的脚本尝试改变这个父页面的<iframe>的位置，IE仍然只会将消息发送到位于的目标。

代码清单3-25中的代码给出了在这个父页面的<iframe>中托管的""文档。这个脚本将自己连接到onmessage事件处理程序，从而选择由父页面发出的消息；它在IE中使用attachEvent()，在其他浏览器中使用addEventListener()。当父页面上的脚本调用postMessage()时，这个页面上的onmessage事件被触发，执行receiveData()回调。每当接收到消息时，脚本就将来自该事件的数据写到屏幕上。

代码清单3-25 使用onmessage事件的子框架的代码示例

<html> 
<head> 
<title>Cross Frame Messaging with postMessage (Receiver)</title> 
</head> 
<body> 
<h3>Remote Page (.ie-examples.com)</h3> 
Message Origin (e.origin): <span id="receivedDataOrigin"></span><br> 
Message Contents (e.data): <span id="receivedDataContents"></span><br> 
Message Type (e.type): <span id="receivedDataType"></span><br> 
<script type="text/javascript"> 
// Point the onmessage event callback to receiveData, either by  
// using addEventListener or attachEvent  
if(window.addEventListener)  
window.addEventListener("message", receiveData, false);  
else window.attachEvent("onmessage", receiveData);  
// Grab messages from the parent through this callback/event e  
function receiveData(e) {  
// Make sure that the origin server is examples.proiedev.com  
if (e.data != "" && e.origin == "http://examples.proiedev.com") {  
// Write message data to the webpage  
setText(document.getElementById("receivedDataOrigin"), e.origin);  
setText(document.getElementById("receivedDataContents"), e.data);  
setText(document.getElementById("receivedDataType"), e.type);  
}  
}  
// Set element text (cross-browser innerText/textContent)  
function setText(element, text) { /*...*/ }  
</script> 
</body> 
</html> 

图3-18显示了在前面两个代码示例中描述的页面。位于examples.proiedev.com的父文档托管着<iframe>，它加载来自的页面。

当单击"Post Message" <input>时，父页面调用postMessage()方法向子框架调用发送一条消息(<input>框中的内容)。子框架从onmessage事件中接收消息通知，并立即向用户显示该消息。

注意：

IE不允许网页通过postMessage()与弹出窗口或选项卡通信，即使它们是由网页本身生成的也不可以；Firefox和其他浏览器要宽松一些。postmessage

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-35014-2.html