阅读数:219 评论数:0

一、window.open方法 

window.open(pageURL,name,parameters)

返回的是新打开的窗口的引用，即该窗口的window对象，不过引用的window对象并不具备完整的dom属性和方法，仅仅提供了访问该页面的一些基本属性和方法。

1、pageURL

要打开的页面的URL地址。

2、name

该参数只是一个窗口标识，并不是窗口的标题，用于以后通过它来找到对应的窗口的引用。

该参数除了支持普通的名字外，还支持和a标签一样的特殊关键字：_self、_blank、_parent和_top，分别用于在当前窗口、空白窗口、父窗口、项级窗口中打该窗口，具本的行为参考a标签的target属性。

当传入了已经使用过的窗口的名字时，不会打开一个窗口，而是在名字对应的窗口中打开，该窗口之前加载的内容会被替换。

如果总想打开新页面，可以传_blank。

3、parameters

二、通信问题

使用window.open打开窗口时，新窗口和原窗口之间是可以实现双向通信的。

1、在不跨域的情况下

（1）新窗口通过window.opener可以找到原窗口的window。

// 查找原窗口内的p元素
let p = document.querySelectorAll('p', 
  window.opener.document);

（2）原窗口可以直接通过window.open的返回值访问新窗口。

由于新窗口的加载是异步的，因此不能在调用window.open之后立即访问该窗口，可以在窗口的onload事件内访问新窗口。

let ref = window.open('/index.html');
ref.onload = function(){
  ... // 与新窗口通信
}

2、在跨域的情况下

由于受到浏览器的跨域安全策略的限制，此时就要通过window.postMessage实现页面之间的通信。

（1）在原窗口

let ref = window.open('https://www.baidu.com');
ref.postMessage(data, '*');

（2）在新窗口

window.opener.postMessage(data, '*');