JavaScript - Window.open 弹窗 详解

弹窗

window.open( ) , 它会打开一个指定URL 的新窗口。 浏览器会打开一个新的选项卡URL，而不是独立的窗口。

window.open (URL, name, features, replace)

• URL： 打开指定链接， 如果为空的话，则打开一个新窗口显示空白文档
• name: 新窗口的名称。
• params: 新窗口的配置字符串。它包括设置，用逗号分隔。参数之间不能有空格，例如：width=200,height=100。

params 的设置项：

• 位置:

<!---->

• • left/top（数字）—— 屏幕上窗口的左上角的坐标。这有一个限制：不能将新窗口置于屏幕外（offscreen）。
  • width/height（数字）—— 新窗口的宽度和高度。宽度/高度的最小值是有限制的，因此不可能创建一个不可见的窗口。

<!---->

• 窗口功能：

<!---->

• • menubar（yes/no）—— 显示或隐藏新窗口的浏览器菜单。
  • toolbar（yes/no）—— 显示或隐藏新窗口的浏览器导航栏（后退，前进，重新加载等）。
  • location（yes/no）—— 显示或隐藏新窗口的 URL 字段。Firefox 和 IE 浏览器不允许默认隐藏它。
  • status（yes/no）—— 显示或隐藏状态栏。同样，大多数浏览器都强制显示它。
  • resizable（yes/no）—— 允许禁用新窗口大小调整。不建议使用。
  • scrollbars（yes/no）—— 允许禁用新窗口的滚动条。不建议使用。

为什么要使用弹窗？

1. 弹窗是一个独立的窗口，具有自己的独立 JavaScript 环境。因此，使用弹窗打开一个不信任的第三方网站是安全的。
2. 打开弹窗非常容易
3. 弹窗可以导航（修改 URL），并将消息发送到 opener 窗口（译注：即打开弹窗的窗口）

打开一个小窗口

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=600,height=300,left=100,top=100`;

window.open('/', 'test', params);

弹窗访问窗口

window 对象拥有一个 opener 属性，引用打开它的原始对象。opener 只在弹出窗口的最外层 window 对象（top）中定义，而且指向调用 window.open() 方法的窗口或框架。

window.opener.document.write ("<h1>给原有窗口添加内容</h1>");  //在原窗口中输出提示信息

窗口之间的连接是双向的：主窗口和弹窗之间相互引用。

关闭窗口

关闭窗口： window.close()

检测窗口是否关闭状态： window.close true 关闭状态 false 开启状态

window.close()

弹窗聚焦/失焦

window.focus()
window.blur()

小结

弹窗在实际使用的场景比较少，通常在 进行 OAuth 授权 登录 使用。有比弹窗更好的选择，在页面中弹窗Dialog 或者 iframe 。