前端解決跨域問題的N種方法之postMessage

平時會不會有一個需求是 我在打開不一樣域網站的時候 要把個人某個變量數據傳遞過去 方法有不少不少種 今天介紹下postMessage

H5 postMessage

語法

otherWindow.postMessage(message, targetOrigin);

otherWindow

• 其餘窗口的一個引用，好比iframe的contentWindow屬性、執行window.open返回的窗口對象、或者是命名過或數值索引的window.frames

參數(message, targetOrigin)

• message: 將要發送到其餘
  window的數據。將會被結構化克隆算法序列化。這意味着你可不受什麼限制的安全傳送數據對象給目標窗口而無需本身序列化

• targetOrigin：(MDN上的解釋比較長，簡而言之)字符串參數，指明目標窗口的源

看下例子

aaa.html

bbb.html

看一下打印出來的e的內容

相對重要屬性以下

• data：是傳遞來的message

• source：發送消息的窗口對象

• origin：發送消息窗口的源（協議+主機+端口號）

附上個人訂閱號二維碼，歡迎關注，一塊兒學前端