技術標籤：javascriptjavascript

在上一篇文章中，我簡單的描述了，iframe的通訊過程。

接下來我們來講述一下，如果不使用iframe，父子頁面該怎麼通訊呢。

首先排除webSocket，這種介面處理的方式我們就跳過了，我們只研究純前端的處理方式。

接下來我們要使用的就是window.open()

過程

傳值：通過url的方式，不再追加解釋，把傳遞的引數拼接傳給子頁面

取值：可以通過子頁面window.dispatchEvent一個自定義事件，然後父頁面使用window.addEeventListener監聽這個自定義事件，在回撥裡完成業務處理。

程式碼

子頁面：

 // 自定義重新整理事件
let refresh = new Event('refreshs')
window.dispatchEvent(refresh)
 

父頁面：

let popupwin = window.open(href, '_blank');
popupwin.addEventListener('refreshs', () => {
     //todo
})

優缺點

優點：程式碼簡潔方便，不像iframe那樣存在安全隱患。

缺點：子頁面無法向父頁面傳值，只能觸發方法。