前端學習（八十一） DOM-Web通訊（Dom）
在跨域技術中，有一個使用iframe解決跨域問題，其中有一個關鍵的技術點，叫做web Message，也就是將獲取到的資料傳遞給原站，這邊的web message也就是web通訊
Web Message
在跨域中，Web Message的角色就是將目標站點的資源傳遞給原站的，這是一種文件中獨立的瀏覽上下文間的資料分享方式，且不會有DOM被暴露給惡意的跨站指令碼的危險
瀏覽上下文，解釋：就是將document物件呈現給使用者的環境（所謂的環境就是例如標籤頁，視窗，iframe等）
實際上所謂的Web通訊是有兩種方式的：跨文件通訊和通道通訊，但是這兩種通訊都是基於messageEvent事件的
message事件物件
| 屬性（只讀） | 定義 |
| data | message的資料 |
| origin | message的源，包含協議，域名和埠 |
| lastEventld | 當前訊息事件的唯一識別符號 |
| source | 原始文件視窗的引用，windowProxy物件 |
| prots | MessageProt物件的資料 |
跨文件通訊
文件智件的相互通訊
示例
A頁面
<iframe src="webAb.html"></iframe> <body> <input class="j-ipt" /> <button class="j-btn">傳送</button> <script> var a= window.frames[0], btn = document.querySelector('.j-btn'), ipt = document.querySelector('.j-ipt'); btn.addEventListener('click',function (params) { window.frames[0].postMessage(ipt.value,'*') }) </script> </body>
B頁面
<div class="j-message"></div>
<script>
window.addEventListener('message',function (params) {
document.querySelector('.j-message').innerHTML=params.data;
})
</script>這個示例就是將A頁面中在input的輸入，顯示在B頁面的DIV上，這就是文件之間的相互通訊
跨文件通訊使用的API就是postMessage方法
otherwindow.postMessage(message,targetOrigin[,transfer])
- otherwindow：視窗的引用
- message：將要被髮送到其他window的資料
- targetOrigin：定義哪些視窗可以接收訊息
- transfer：與message同時傳送，這些物件的所有權移交給target，這個不常用
執行後會丟擲message事件，因此在目標頁面中，只需要監聽message事件就可以獲取到傳送資訊
安全性
跨文件通訊是存在安全性問題的，因為傳送來的訊息可能是惡意的，因此注意點
- 沒有必要性的話，不要去監聽message
- 使用origin和source屬性校驗傳送方的身份
- 在傳送方使用postMessage時，始終要指定精確的target
通道通訊
這種方式不常用，大概就是：利用訊息通道，直接進行雙向瀏覽上下文之間的通訊手段
這種技術，使用的是MessageChannel物件
建構函式MessageChannel()
- 返回一個帶有兩個MessagePort屬性的MessageChannel新物件
- 這種實際上是建立了兩個相互關聯的埠，一個是傳送端，一個是接收端
屬性
- MessageChannel.port1
- MessageChannel.port2
MessagePort方法
MessagePort.postMessage：傳送訊息
MessagePort.start：開始在埠上分派訊息
MessagePort.close：關閉埠
MessagePort.onmessage（這個是接收端的）：event handle，監聽訊息事件