window.open

1. 介绍

使用 window.open() 方法可以在新的浏览器标签页或者新的浏览器窗口打开一个特定的网址。

注：不同浏览器使用该方法表现形式不尽相同。本文示例浏览器环境为：Google Chrome 版本 87.0.4280.88（64 位）
 

2. 使用方式

2.1 语法

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#569cd6"><span style="color:#569cd6">var</span></span> windowObjectReference = <span style="color:#4ec9b0"><span style="color:#4ec9b0">window</span></span>.open(strUrl, strWindowName, [strWindowFeatures]);</code></span>

2.2 参数

• strUrl：要加载的URL

• strWindowName：窗口目标名

• strWindowFeatures：一个描述新窗口特征的字符串

2.2.1 传入一个参数：

<span style="color:#dcdcdc"><code class="language-html"><span style="color:#9b9b9b"><span style="color:#9b9b9b"><</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span> <span style="color:#9cdcfe"><span style="color:#9b9b9b"><span style="color:#9cdcfe">onclick</span></span></span><span style="color:#9b9b9b">=</span><span style="color:#d69d85"><span style="color:#9b9b9b"><span style="color:#d69d85">"window.open('http://bufanui.com')"</span></span></span><span style="color:#9b9b9b">></span></span>点击打开新的标签页<span style="color:#9b9b9b"><span style="color:#9b9b9b"></</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span></code></span>

2.2.2 传入两个参数

第二个参数可以是任意名/a标签target属性值/iframe的name属性：

<span style="color:#dcdcdc"><code class="language-html"><span style="color:#9b9b9b"><span style="color:#9b9b9b"><</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">iframe</span></span></span> <span style="color:#9cdcfe"><span style="color:#9b9b9b"><span style="color:#9cdcfe">src</span></span></span><span style="color:#9b9b9b">=</span><span style="color:#d69d85"><span style="color:#9b9b9b"><span style="color:#d69d85">""</span></span></span> <span style="color:#9cdcfe"><span style="color:#9b9b9b"><span style="color:#9cdcfe">width</span></span></span><span style="color:#9b9b9b">=</span><span style="color:#d69d85"><span style="color:#9b9b9b"><span style="color:#d69d85">"400"</span></span></span> <span style="color:#9cdcfe"><span style="color:#9b9b9b"><span style="color:#9cdcfe">height</span></span></span><span style="color:#9b9b9b">=</span><span style="color:#d69d85"><span style="color:#9b9b9b"><span style="color:#d69d85">"400"</span></span></span> <span style="color:#9cdcfe"><span style="color:#9b9b9b"><span style="color:#9cdcfe">name</span></span></span><span style="color:#9b9b9b">=</span><span style="color:#d69d85"><span style="color:#9b9b9b"><span style="color:#d69d85">"ifr"</span></span></span><span style="color:#9b9b9b">></span></span><span style="color:#9b9b9b"><span style="color:#9b9b9b"></</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">iframe</span></span></span><span style="color:#9b9b9b">></span></span>
<span style="color:#9b9b9b"><span style="color:#9b9b9b"><</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span>点击打开新的标签页，带第2个参数<span style="color:#9b9b9b"><span style="color:#9b9b9b"></</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span>

<span style="color:#9b9b9b"><span style="color:#9b9b9b"><</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">script</span></span></span><span style="color:#9b9b9b">></span></span>
    <span style="color:#569cd6"><span style="color:#569cd6">var</span></span> btn = <span style="color:#4ec9b0"><span style="color:#4ec9b0">document</span></span>.querySelector(<span style="color:#d69d85"><span style="color:#d69d85">"button"</span></span>);
    btns.onclick = <span style="color:#dcdcdc"><span style="color:#569cd6"><span style="color:#dcdcdc"><span style="color:#569cd6">function</span></span></span><span style="color:#dcdcdc"> (</span><span style="color:#dcdcdc">)</span></span>{
        <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 任意值</em></span></em></span>
        <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// window.open("http://bufanui.com", "newWindow");</em></span></em></span>
        <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// a标签的 target属性 _blank/_self/_top/_parent...</em></span></em></span>
        <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// window.open("http://bufanui.com", "_self");</em></span></em></span>
        <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// iframe 标签的 name 属性，作用是在iframe标签内打开页面</em></span></em></span>
        <span style="color:#4ec9b0"><span style="color:#4ec9b0">window</span></span>.open(<span style="color:#d69d85"><span style="color:#d69d85">"http://bufanui.com"</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">"ifr"</span></span>);
    }
<span style="color:#9b9b9b"><span style="color:#9b9b9b"></</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">script</span></span></span><span style="color:#9b9b9b">></span></span></code></span>

2.2.3 传入三个参数

第三个参数是一个逗号分隔的设置字符串，表示在新窗口中都显示哪些特性。下表列出了可以出现在这个字符串中的设置选项。

设置	值	说明
fullscreen	yes或no	表示浏览器窗口是否最大化。仅限IE
height	数值	表示新窗口的高度。不能小于100
left	数值	表示新窗口的左坐标。不能是负值
location	yes或no	表示是否在浏览器窗口中显示地址栏。不同浏览器的默认值不同。如果设置为no，地址栏可能会隐藏，也可能会被禁用（取决于浏览器）
menubar	yes或no	表示是否在浏览器窗口中显示菜单栏。默认值为no
resizable	yes或no	表示是否可以通过拖动浏览器窗口的边框改变其大小。默认值为no
scrollbars	yes或no	表示如果内容在视口中显示不下，是否允许滚动。默认值为no
status	yes或no	表示是否在浏览器窗口中显示状态栏。默认值为no
toolbar	yes或no	表示是否在浏览器窗口中显示工具栏。默认值为no
top	数值	表示新窗口的上坐标。不能是负值
width	数值	表示新窗口的宽度。不能小于100

注意事项

• 如果第二个参数设置后效果是打开新的标签页，再加上此参数，会打开新的浏览器窗口；
• 如果第二个参数设置后效果是不打开新标签页，方法会忽略第三个参数的作用：

<span style="color:#dcdcdc"><code class="language-html"><span style="color:#9b9b9b"><span style="color:#9b9b9b"><</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span>点击打开新的标签页，带第3个参数<span style="color:#9b9b9b"><span style="color:#9b9b9b"></</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span>
<span style="color:#9b9b9b"><span style="color:#9b9b9b"><</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">script</span></span></span><span style="color:#9b9b9b">></span></span>
    <span style="color:#569cd6"><span style="color:#569cd6">var</span></span> btn = <span style="color:#4ec9b0"><span style="color:#4ec9b0">document</span></span>.querySelector(<span style="color:#d69d85"><span style="color:#d69d85">"button"</span></span>);
    btns.onclick = <span style="color:#dcdcdc"><span style="color:#569cd6"><span style="color:#dcdcdc"><span style="color:#569cd6">function</span></span></span><span style="color:#dcdcdc"> (</span><span style="color:#dcdcdc">)</span></span>{
         <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 会打开新页面</em></span></em></span>
        <span style="color:#4ec9b0"><span style="color:#4ec9b0">window</span></span>.open(<span style="color:#d69d85"><span style="color:#d69d85">"http://bufanui.com/"</span></span>,<span style="color:#d69d85"><span style="color:#d69d85">"_blank"</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">"height=400,width=400"</span></span>);             
        <span style="color:#4ec9b0"><span style="color:#4ec9b0">window</span></span>.open(<span style="color:#d69d85"><span style="color:#d69d85">"http://bufanui.com/"</span></span>,<span style="color:#d69d85"><span style="color:#d69d85">"_self"</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">"height=400,width=400,"</span></span>);<span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 忽略第三个参数,不会打开新页面</em></span></em></span>
    }
<span style="color:#9b9b9b"><span style="color:#9b9b9b"></</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">script</span></span></span><span style="color:#9b9b9b">></span></span></code></span>

3. 返回值

WindowObjectReference：打开的新窗口对象的引用。如果调用失败，返回值会是 null。
如果父子窗口满足“同源策略”，可以通过这个引用访问新窗口的属性或方法。
如果不同源，那么只能使用 window.close() 方法关闭打开的标签页或者窗口。

同源策略：两个网址的协议、域名地址/ip地址、端口号三者完全一致，即为符合同源。

<span style="color:#dcdcdc"><code class="language-html"><span style="color:#9b9b9b"><span style="color:#9b9b9b"><</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span>点击打开新的标签页<span style="color:#9b9b9b"><span style="color:#9b9b9b"></</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span>
<span style="color:#9b9b9b"><span style="color:#9b9b9b"><</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span>点击打开新的标签页，带第3个参数<span style="color:#9b9b9b"><span style="color:#9b9b9b"></</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span>
<span style="color:#9b9b9b"><span style="color:#9b9b9b"><</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span>关闭打开的页面<span style="color:#9b9b9b"><span style="color:#9b9b9b"></</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">button</span></span></span><span style="color:#9b9b9b">></span></span>
<span style="color:#9b9b9b"><span style="color:#9b9b9b"><</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">script</span></span></span><span style="color:#9b9b9b">></span></span>
    <span style="color:#569cd6"><span style="color:#569cd6">var</span></span> btns = <span style="color:#4ec9b0"><span style="color:#4ec9b0">document</span></span>.querySelectorAll(<span style="color:#d69d85"><span style="color:#d69d85">"button"</span></span>);
    <span style="color:#569cd6"><span style="color:#569cd6">var</span></span> newWindow = <span style="color:#569cd6"><span style="color:#569cd6">null</span></span>; <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// 打开的窗口的 返回值</em></span></em></span>

    btns[<span style="color:#b8d7a3"><span style="color:#b8d7a3">0</span></span>].onclick = <span style="color:#dcdcdc"><span style="color:#569cd6"><span style="color:#dcdcdc"><span style="color:#569cd6">function</span></span></span><span style="color:#dcdcdc"> (</span><span style="color:#dcdcdc">)</span></span>{
      newWindow = <span style="color:#4ec9b0"><span style="color:#4ec9b0">window</span></span>.open(<span style="color:#d69d85"><span style="color:#d69d85">"http://bufanui.com"</span></span>);
    }

    btns[<span style="color:#b8d7a3"><span style="color:#b8d7a3">2</span></span>].onclick = <span style="color:#dcdcdc"><span style="color:#569cd6"><span style="color:#dcdcdc"><span style="color:#569cd6">function</span></span></span><span style="color:#dcdcdc"> (</span><span style="color:#dcdcdc">)</span></span>{
      newWindow = <span style="color:#4ec9b0"><span style="color:#4ec9b0">window</span></span>.open(<span style="color:#d69d85"><span style="color:#d69d85">"http://bufanui.com/"</span></span>,<span style="color:#d69d85"><span style="color:#d69d85">"_blank"</span></span>, <span style="color:#d69d85"><span style="color:#d69d85">"height=400,width=400"</span></span>); 
    }
    btns[<span style="color:#b8d7a3"><span style="color:#b8d7a3">3</span></span>].onclick = <span style="color:#dcdcdc"><span style="color:#569cd6"><span style="color:#dcdcdc"><span style="color:#569cd6">function</span></span></span><span style="color:#dcdcdc">(</span><span style="color:#dcdcdc">)</span></span>{
      newWindow.close();
    }
<span style="color:#9b9b9b"><span style="color:#9b9b9b"></</span><span style="color:#569cd6"><span style="color:#9b9b9b"><span style="color:#569cd6">script</span></span></span><span style="color:#9b9b9b">></span></span></code></span>

返回的对象还有一个 opener 属性，其中保存着打开它的原始窗口对象。这个属性只在弹出窗口中的最外层 window 对象（top）中有定义，而且指向调用 window.open() 的窗口或框架。例如：

<span style="color:#dcdcdc"><code class="language-js"><span style="color:#569cd6"><span style="color:#569cd6">var</span></span> win = <span style="color:#4ec9b0"><span style="color:#4ec9b0">window</span></span>.open(<span style="color:#d69d85"><span style="color:#d69d85">"http://www.bufanui.com/"</span></span>,<span style="color:#d69d85"><span style="color:#d69d85">"_blank"</span></span>,
    <span style="color:#d69d85"><span style="color:#d69d85">"height=400,width=400,top=10,left=10,resizable=yes"</span></span>);

<span style="color:#4ec9b0"><span style="color:#4ec9b0">console</span></span>.log(win.opener === <span style="color:#4ec9b0"><span style="color:#4ec9b0">window</span></span>);   <span style="color:#57a64a"><em><span style="color:#57a64a"><em>// true</em></span></em></span></code></span>