弹窗和 window 的方法

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

弹窗（popup）是向用户显示其他文档的最古老的方法之一。

基本上，你只需要运行：

window.open('https://javascript.info/')

……它将打开一个具有给定 URL 的新窗口。大多数现代浏览器都配置为在新选项卡中打开 url，而不是单独的窗口。

弹窗自古以来就存在。最初的想法是，在不关闭主窗口的情况下显示其他内容。目前为止，还有其他方式可以实现这一点：我们可以使用 fetch 动态加载内容，并将其显示在动态生成的 <div> 中。弹窗并不是我们每天都会使用的东西。

并且，弹窗在移动设备上非常棘手，因为移动设备无法同时显示多个窗口。

但仍然有一些任务在使用弹窗，例如进行 OAuth 授权（使用 Google/Facebook/… 登陆），因为：

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

阻止弹窗

在过去，很多恶意网站经常滥用弹窗。一个不好的页面可能会打开大量带有广告的弹窗。因此，现在大多数浏览器都会通过阻止弹窗来保护用户。

如果弹窗是在用户触发的事件处理程序（如 onclick）之外调用的，大多数浏览器都会阻止此类弹窗。

例如：

// 弹窗被阻止
window.open('https://javascript.info');

// 弹窗被允许
button.onclick = () => {
  window.open('https://javascript.info');
};

这种方式可以在某种程度上保护用户免受非必要的弹窗的影响，但是并没有完全阻止该功能。

如果弹窗是从 onclick 打开的，但是在 setTimeout 之后，该怎么办？这有点棘手。

试试运行一下这段代码：

// 3 秒后打开弹窗
setTimeout(() => window.open('http://google.com'), 3000);

这个弹窗在 Chrome 中会被打开，但是在 Firefox 中会被阻止。

……如果我们减少延迟，则弹窗在 Firefox 中也会被打开：

// 1 秒后打开弹窗
setTimeout(() => window.open('http://google.com'), 1000);

区别在于 Firefox 可以接受 2000ms 或更短的延迟，但是超过这个时间 —— 则移除“信任”。所以，第一个弹窗被阻止，而第二个却没有。

window.open

打开一个弹窗的语法是 window.open(url, name, params)：

• url

  要在新窗口中加载的 URL。

• name

  新窗口的名称。每个窗口都有一个 window.name，在这里我们可以指定哪个窗口用于弹窗。如果已经有一个这样名字的窗口 —— 将在该窗口打开给定的 URL，否则会打开一个新窗口。

• 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）—— 允许禁用新窗口的滚动条。不建议使用。

还有一些不太受支持的特定于浏览器的功能，通常不使用。通常不使用这些功能。更多示例请见 MDN 中的 window.open。