目標功能：
頁面壹跨域open頁面二，頁面二通過addEventListener監聽到消息後，返回確認信息。頁面壹通過addEventListener監聽頁面二發送的確認信息後，將數據包發送給頁面二。頁面二獲取數據包後進行處理。
postMessage簡介（摘抄自他人博客，如涉抄襲，請聯系我）：
HTML5提出了壹個新的用來跨域傳值的方法，即postMessage。我們假設有兩個網站，1.com與2.com，我在1.com的頁面上通過iframe或window.open或超鏈接打開了壹個2.com的網頁，此時我要在2.com上做操作的時候，給1.com傳值，讓1.com有所變化。這個過程就是個跨域的過程。
如果妳對window.open熟，妳就會知道通過window.open打開的網頁（我們稱之為子網頁），可以通過window.opener對象，訪問到把它打開的頁面（父網頁），這樣壹來，調用父頁面的函數就是非常簡單的事了。但是，在跨域的條件下，window.opener就成了壹個空對象，“沒有權限”，瀏覽器會這麽告訴妳。
比如，妳的父頁面有個函數叫callback，然後妳子頁面本可以這樣調用：window.opener.callback()，同域時能成功，跨域時就沒有權限了。但是，此時妳調用window.opener.postMessage()，卻可以成功！
postMessage參數：postMessage(message, targetOrigin, [transfer])
message:
將要發送到其他 window的數據。它將會被結構化克隆算法序列化。這意味著妳可以不受什麽限制的將數據對象安全的傳送給目標窗口而無需自己序列化。
message的三個屬性：
data : 從其他 window 中傳遞過來的對象。
origin : 調用 postMessage 時消息發送方窗口的 origin . 這個字符串由 協議、“://“、域名、“ : 端口號”拼接而成。例如 “ :8080 ”。請註意，這個origin不能保證是該窗口的當前或未來origin，因為postMessage被調用後可能被導航到不同的位置。
source ：對發送消息的窗口對象的引用; 您可以使用此來在具有不同origin的兩個窗口之間建立雙向通信。
targetOrigin：
通過窗口的origin屬性來指定哪些窗口能接收到消息事件，其值可以是字符串”“（表示無限制）或者壹個URI。在發送消息的時候，如果目標窗口的協議、主機地址或端口這三者的任意壹項不匹配targetOrigin提供的值，那麽消息就不會被發送；只有三者完全匹配，消息才會被發送。這個機制用來控制消息可以發送到哪些窗口；例如，當用postMessage傳送密碼時，這個參數就顯得尤為重要，必須保證它的值與這條包含密碼的信息的預期接受者的orign屬性完全壹致，來防止密碼被惡意的第三方截獲。如果妳明確的知道消息應該發送到哪個窗口，那麽請始終提供壹個有確切值的targetOrigin，而不是。不提供確切的目標將導致數據泄露到任何對數據感興趣的惡意站點。
transfer (可選參數)
是壹串和message 同時傳遞的 Transferable 對象. 這些對象的所有權將被轉移給消息的接收方，而發送壹方將不再保有所有權。
例程：google和百度進行通信
頁面壹
頁面二
頁面壹
由此頁面壹二可進行數據的通信
addEventListener簡介：addEventListener() 方法用於向指定元素添加事件句柄。
addEventListener三個參數：
element .addEventListener( event , function , useCapture )
參數描述
{
event（ 必須）：字符串，指定事件名。
註意: 不要使用 "on" 前綴。 例如，使用 "click" ,而不是使用 "onclick"。
提示： 所有 HTML DOM 事件，可以查看我們完整的 /jsref/dom-obj-event.html 。
function（ 必須）：指定要事件觸發時執行的函數。
當事件對象會作為第壹個參數傳入函數。 事件對象的類型取決於特定的事件。例如， "click" 事件屬於 MouseEvent(鼠標事件) 對象。
useCapture（ 可選）：布爾值，指定事件是否在捕獲或冒泡階段執行。
可能值:
true - 事件句柄在捕獲階段執行
false- false- 默認。事件句柄在冒泡階段執行
}
例程：
addEventListener後需要remove以防止占用過多內存
removeEventListener時必須和addEvent的時指向同壹個對象！
以下情況會生成不同的對象，導致remove失效
「
1、window.addEventListener('message', (e) => {})多次調用會多次生成不同的匿名函數e，應指向同壹個命名函數
2、window.addEventListener('message', this.handler.bind(this))，命名函數綁定this後，調用會生成不同的對象
」