成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

瀏覽器父子窗口間通信

Miracle_lihb / 3098人閱讀

摘要：父子間窗口通信分兩種情況父子窗口同源瀏覽器的同源策略還沒了解到就請自行了。父窗口向子窗口通信子窗口是由父窗口創(chuàng)建的。父子窗口不同源這種情況下父子窗口要通信就需要借助的功能了。

父子窗口通信需求背景

最近在實(shí)現(xiàn)一個(gè)關(guān)聯(lián)谷歌賬戶的需求。看到網(wǎng)上的大部分涉及前端方面的實(shí)現(xiàn)都有這么個(gè)OAuth標(biāo)準(zhǔn)下的流程:

打開一個(gè)子窗口

在子窗口重定向到授權(quán)頁

用戶點(diǎn)擊授權(quán)按鈕

用戶授權(quán)后授權(quán)頁會(huì)重定向到一個(gè)默認(rèn)的或者用戶自定義的uri。

授權(quán)完成

一般在授權(quán)頁被授權(quán)后子窗口(授權(quán)窗口)都會(huì)被關(guān)閉。瀏覽器的每個(gè)窗口是禁止關(guān)閉當(dāng)前窗口的，只能關(guān)閉由當(dāng)前窗口打開的其他窗口。有圖有真相：

所以想要關(guān)閉子窗口就需要父窗口來操作。而何時(shí)讓父窗口關(guān)閉子窗口就需要子窗口在完成用戶授權(quán)后通知父窗口來關(guān)閉自己。這就涉及到父子間窗口的通信。

父子間窗口通信分兩種情況

父子窗口同源

瀏覽器的同源策略還沒了解到就請自行Google了。
按照OAuth流程是不會(huì)出現(xiàn)父子窗口同源的現(xiàn)象。但是這里也做一下總結(jié)。

父窗口向子窗口通信

子窗口是由父窗口創(chuàng)建的。父窗口可以在打開子窗口后獲取到子窗口的引用,通過這個(gè)引用可以觸發(fā)子窗口的方法以此向子窗口傳遞消息

// 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");
})

這個(gè)時(shí)候有一個(gè)子窗口的句柄了(handler)。
而子窗口的頁面下有如下方法

// child code
function ProcessParentMsg(msg) {
    // do something with the msg
}

父窗口只需要在調(diào)用子窗口的對應(yīng)方法就可以和子窗口完成通信

// parent code
child_window_handle.ProcessParentMsg("msg_form_parent_window");
子窗口向父窗口通信

子窗口可以通過window對象的opener屬性訪問到父窗口。并且調(diào)用父窗口的方法來完成向上通信。

// child code
window.opener.ProcessChildMsg();
// parent code
function ProcessChildMsg(msg) {
    // do something with msg
}

父子窗口同源的情況下，父窗口是可以很大程度的控制子窗口的。除了可以觸發(fā)子窗口的方法，也可以監(jiān)聽子窗口的事件,onbeforeunload、onresize, focus等等, 但是父子窗口不同源的情況下。父窗口無法執(zhí)行子窗口下的方法，也無法監(jiān)聽窗口下的事件。之前設(shè)想的關(guān)閉子窗口的實(shí)現(xiàn)方式是在父窗口獲得子窗口的句柄然后監(jiān)聽子窗口的onload，onload之后就調(diào)用父窗口的用于關(guān)閉子窗口的方法。顯然這只能在同源的情況下發(fā)生了。

父子窗口不同源

這種情況下父子窗口要通信就需要借助HTML5的message passing功能了。

父窗口向子窗口通信

直接看示例

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107870.html

相關(guān)文章

  • 瀏覽器的工作原理整理

    摘要：渲染引擎渲染引擎也稱為瀏覽器內(nèi)核，主要時(shí)在瀏覽器窗口中顯示所請求的內(nèi)容，這是每個(gè)瀏覽器的核心部分。 瀏覽器的結(jié)構(gòu) 瀏覽器的主要組件包括： 用戶界面——包括地址欄、前進(jìn)/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個(gè)部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應(yīng)用無關(guān)的通用接口，而在底層使用操作系統(tǒng)的用戶...

    jzman 評論0 收藏0

  • 瀏覽器的工作原理整理

    摘要：渲染引擎渲染引擎也稱為瀏覽器內(nèi)核，主要時(shí)在瀏覽器窗口中顯示所請求的內(nèi)容，這是每個(gè)瀏覽器的核心部分。 瀏覽器的結(jié)構(gòu) 瀏覽器的主要組件包括： 用戶界面——包括地址欄、前進(jìn)/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個(gè)部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應(yīng)用無關(guān)的通用接口，而在底層使用操作系統(tǒng)的用戶...

    DrizzleX 評論0 收藏0

  • 瀏覽器的工作原理整理

    摘要：渲染引擎渲染引擎也稱為瀏覽器內(nèi)核，主要時(shí)在瀏覽器窗口中顯示所請求的內(nèi)容，這是每個(gè)瀏覽器的核心部分。 瀏覽器的結(jié)構(gòu) 瀏覽器的主要組件包括： 用戶界面——包括地址欄、前進(jìn)/后退按鈕、書簽菜單等。除了瀏覽器主窗口顯示用戶請求的頁面外，其他顯示的各個(gè)部分都屬于用戶界面。 用戶界面后端——用于繪制基本的窗口小部件，比如組合框和窗口。其公開了與web應(yīng)用無關(guān)的通用接口，而在底層使用操作系統(tǒng)的用戶...

    lijinke666 評論0 收藏0

  • Vue 組件間通信方式

    摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質(zhì)還是單向數(shù)據(jù)流。跟一樣，組件間最基本的數(shù)據(jù)流是通過向子組件傳遞數(shù)據(jù)。但是在卻很少使用，因?yàn)榻M件可以自定義事件，即后面的組件間通信方式其實(shí)就是訂閱發(fā)布模式。 例子是在 jsrun.net 平臺(tái)編寫，不支持移動(dòng)端平臺(tái)，所以本文建議在 PC 端進(jìn)行閱讀。 Vue 是數(shù)據(jù)驅(qū)動(dòng)的視圖框架，那么組件間的數(shù)據(jù)通信是必然的事情，那么組件間如何進(jìn)行數(shù)...

    hss01248 評論0 收藏0

發(fā)表評論

0條評論

Miracle_lihb

男|高級講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<