Html5 postMessage
解釋：?跨文檔消息傳輸Cross Document Messaging。
編寫代碼前注意判斷瀏覽器是否支持Html5
實例： b頁面向a頁面發送消息。
<!DOCTYPE> <html> <head><title></title> </head> <body>我是b頁面 </body> <script type="text/javascript">setTimeout(function () {var oParent = window.parent;//第一個參數 發送消息(如果是json格式序列化字符串發送)//第2個參數 發送消息目的地 注意頁面之間要有window關系 oParent.postMessage("hello world!", "http://localhost:4686/a.htm");}, 1000); </script> </html><!DOCTYPE> <html> <head><title></title><script type="text/javascript">var messageChange = function (e) {var data = e.data;var origin = e.origin;document.getElementById('display').innerHTML = data;}//google 或者ie方式注冊事件if (typeof window.addEventListener != 'undefined') {window.addEventListener('message', messageChange, false);} else if (typeof window.attachEvent != 'undefined') {window.attachEvent('onmessage', messageChange);} </script> </head> <body><div id="display"></div><iframe src="b.htm"></iframe> </body> </html>
運行結果：
其中hello world是b頁面發送過來的。
注意事項 ：
Syntax
otherWindow.postMessage(message, targetOrigin, [transfer]);otherWindow
reference to another window; such a reference may be obtained, for example, using the?contentWindow?property of an?iframe?element, the object returned by window.open, or by named or numeric index on?window.frames.messageData to be sent to the other window
.targetOrigin Specifies what the origin of?otherWindow?must be for the event to be dispatched, either as the literal string?"*"?(indicating no preference) or as a URI. If at the time the event is scheduled to be dispatched the scheme, hostname, or port of?otherWindow's document does not match that provided in?targetOrigin, the event will not be dispatched; only if all three match will the event be dispatched. This mechanism provides control over where messages are sent; for example, if?postMessage?were used to transmit a password, it would be absolutely critical that this argument be a URI whose origin is the same as the intended receiver of the message containing the password, to prevent interception of the password by a malicious third party.?Always provide a specific?targetOrigin, not?*, if you know where the other window's document should be located. Failing to provide a specific target discloses the data you send to any interested malicious site
.transfer?
OptionalIs a sequence of?Transferable?objects that are transferred with the message. The ownership of these objects is given to the destination side and they are no more usable on the sending side.
關于window.addEventListener?window.attachEvent的解釋
火狐或者google
addEventListener的使用方式：?
target.addEventListener(type, listener, useCapture);?
target： 文檔節點、document、window 或 XMLHttpRequest。?
type： 字符串，事件名稱，不含“on”，比如“click”、“mouseover”、“keydown”等。?
listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。?
useCapture ：是否使用捕捉，一般用 false 。
iE
target.attachEvent(type, listener);?
target： 文檔節點、document、window 或 XMLHttpRequest。?
type： 字符串，事件名稱，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。?
listener ：實現了 EventListener 接口或者是 JavaScript 中的函數。
移除： 用什么樣的方式綁定就用對應的方式解除
removeEventListener(event,function,capture/bubble);
event：比如單擊，或雙擊．或移動鼠標事件等．
function:要被注銷的事件名稱，函數名．
capture/bubble:布爾值．true或false.true代表支持事件冒泡．false則不支持事件冒泡捕獲
Windows IE的格式如下:
detachEvent(event,function);
參數參考上面。
注意：在使用removeEventListener()函數時，參數 function函數，必須和使用addEventListener()里面的 function函數必須相同。
同理IE的也一樣。
轉載于:https://www.cnblogs.com/y112102/p/3380948.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的Html5 postMessage的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 腾达 W316R 无线路由器LAN口地址
- 下一篇： iOS 文件和数据管理 （可能会删除本地