摘要:父子間窗口通信分兩種情況父子窗口同源瀏覽器的同源策略還沒了解到就請自行了。父窗口向子窗口通信子窗口是由父窗口創建的。父子窗口不同源這種情況下父子窗口要通信就需要借助的功能了。
父子窗口通信需求背景
最近在實現一個關聯谷歌賬戶的需求。看到網上的大部分涉及前端方面的實現都有這么個OAuth標準下的流程:
打開一個子窗口
在子窗口重定向到授權頁
用戶點擊授權按鈕
用戶授權后授權頁會重定向到一個默認的或者用戶自定義的uri。
授權完成
一般在授權頁被授權后子窗口(授權窗口)都會被關閉。瀏覽器的每個窗口是禁止關閉當前窗口的,只能關閉由當前窗口打開的其他窗口。有圖有真相:
所以想要關閉子窗口就需要父窗口來操作。而何時讓父窗口關閉子窗口就需要子窗口在完成用戶授權后通知父窗口來關閉自己。這就涉及到父子間窗口的通信。
父子間窗口通信分兩種情況
父子窗口同源瀏覽器的同源策略還沒了解到就請自行Google了。
按照OAuth流程是不會出現父子窗口同源的現象。但是這里也做一下總結。
子窗口是由父窗口創建的。父窗口可以在打開子窗口后獲取到子窗口的引用,通過這個引用可以觸發子窗口的方法以此向子窗口傳遞消息
// parent code let child_window_handle = null; $("#open-child-win-btn").on("click", () => { child_window_handle = window.open("target_url.html", "_blank", "width=700, height=500, left=200"); })
這個時候有一個子窗口的句柄了(handler)。
而子窗口的頁面下有如下方法
// child code function ProcessParentMsg(msg) { // do something with the msg }
父窗口只需要在調用子窗口的對應方法就可以和子窗口完成通信
// parent code child_window_handle.ProcessParentMsg("msg_form_parent_window");子窗口向父窗口通信
子窗口可以通過window對象的opener屬性訪問到父窗口。并且調用父窗口的方法來完成向上通信。
// child code window.opener.ProcessChildMsg();
// parent code function ProcessChildMsg(msg) { // do something with msg }
父子窗口同源的情況下,父窗口是可以很大程度的控制子窗口的。除了可以觸發子窗口的方法,也可以監聽子窗口的事件,onbeforeunload、onresize, focus等等, 但是父子窗口不同源的情況下。父窗口無法執行子窗口下的方法,也無法監聽窗口下的事件。之前設想的關閉子窗口的實現方式是在父窗口獲得子窗口的句柄然后監聽子窗口的onload,onload之后就調用父窗口的用于關閉子窗口的方法。顯然這只能在同源的情況下發生了。
父子窗口不同源這種情況下父子窗口要通信就需要借助HTML5的message passing功能了。
父窗口向子窗口通信直接看示例
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/107870.html
摘要:渲染引擎渲染引擎也稱為瀏覽器內核,主要時在瀏覽器窗口中顯示所請求的內容,這是每個瀏覽器的核心部分。 瀏覽器的結構 瀏覽器的主要組件包括: 用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外,其他顯示的各個部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件,比如組合框和窗口。其公開了與web應用無關的通用接口,而在底層使用操作系統的用戶...
摘要:渲染引擎渲染引擎也稱為瀏覽器內核,主要時在瀏覽器窗口中顯示所請求的內容,這是每個瀏覽器的核心部分。 瀏覽器的結構 瀏覽器的主要組件包括: 用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外,其他顯示的各個部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件,比如組合框和窗口。其公開了與web應用無關的通用接口,而在底層使用操作系統的用戶...
摘要:渲染引擎渲染引擎也稱為瀏覽器內核,主要時在瀏覽器窗口中顯示所請求的內容,這是每個瀏覽器的核心部分。 瀏覽器的結構 瀏覽器的主要組件包括: 用戶界面——包括地址欄、前進/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外,其他顯示的各個部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件,比如組合框和窗口。其公開了與web應用無關的通用接口,而在底層使用操作系統的用戶...
摘要:本身提供哪幾種通信方式首先靈感源于,支持雙向綁定,本質還是單向數據流。跟一樣,組件間最基本的數據流是通過向子組件傳遞數據。但是在卻很少使用,因為組件可以自定義事件,即后面的組件間通信方式其實就是訂閱發布模式。 例子是在 jsrun.net 平臺編寫,不支持移動端平臺,所以本文建議在 PC 端進行閱讀。 Vue 是數據驅動的視圖框架,那么組件間的數據通信是必然的事情,那么組件間如何進行數...
閱讀 2066·2019-08-30 15:53
閱讀 3064·2019-08-30 15:44
閱讀 2913·2019-08-30 14:11
閱讀 2909·2019-08-30 14:01
閱讀 2694·2019-08-29 15:16
閱讀 3718·2019-08-29 13:10
閱讀 1238·2019-08-29 10:56
閱讀 2525·2019-08-26 13:58