浏览器父子窗口间通信

Miracle_lihb 发布于2019-08-26 11:56 / 2984人阅读

摘要：父子间窗口通信分两种情况父子窗口同源浏览器的同源策略还没了解到就请自行了。父窗口向子窗口通信子窗口是由父窗口创建的。父子窗口不同源这种情况下父子窗口要通信就需要借助的功能了。

父子窗口通信需求背景

最近在实现一个关联谷歌账户的需求。看到网上的大部分涉及前端方面的实现都有这么个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功能了。

父窗口向子窗口通信

直接看示例

服务器托管云服务器父子窗口父子组件通信 javascript父子通信 webrtc浏览器间回音消除

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107870.html

浏览器的工作原理整理

摘要：渲染引擎渲染引擎也称为浏览器内核，主要时在浏览器窗口中显示所请求的内容，这是每个浏览器的核心部分。浏览器的结构浏览器的主要组件包括：用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。用户界面后端——用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与web应用无关的通用接口，而在底层使用操作系统的用户...

jzman 2019-08-02 12:00 评论0 收藏0
浏览器的工作原理整理

摘要：渲染引擎渲染引擎也称为浏览器内核，主要时在浏览器窗口中显示所请求的内容，这是每个浏览器的核心部分。浏览器的结构浏览器的主要组件包括：用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。用户界面后端——用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与web应用无关的通用接口，而在底层使用操作系统的用户...

DrizzleX 2019-08-29 17:15 评论0 收藏0
浏览器的工作原理整理

摘要：渲染引擎渲染引擎也称为浏览器内核，主要时在浏览器窗口中显示所请求的内容，这是每个浏览器的核心部分。浏览器的结构浏览器的主要组件包括：用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。用户界面后端——用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与web应用无关的通用接口，而在底层使用操作系统的用户...

lijinke666 2019-08-26 12:22 评论0 收藏0
浏览器的工作原理整理

摘要：渲染引擎渲染引擎也称为浏览器内核，主要时在浏览器窗口中显示所请求的内容，这是每个浏览器的核心部分。浏览器的结构浏览器的主要组件包括：用户界面——包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。用户界面后端——用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与web应用无关的通用接口，而在底层使用操作系统的用户...

张率功 2019-08-05 18:08 评论0 收藏0
Vue 组件间通信方式

摘要：本身提供哪几种通信方式首先灵感源于，支持双向绑定，本质还是单向数据流。跟一样，组件间最基本的数据流是通过向子组件传递数据。但是在却很少使用，因为组件可以自定义事件，即后面的组件间通信方式其实就是订阅发布模式。例子是在 jsrun.net 平台编写，不支持移动端平台，所以本文建议在 PC 端进行阅读。 Vue 是数据驱动的视图框架，那么组件间的数据通信是必然的事情，那么组件间如何进行数...

hss01248 2019-08-26 13:54 评论0 收藏0