弹出窗口和窗口方法

弹出窗口是最早向用户显示附加文档的方法之一。

基本上，您只需运行

window.open('https://javascript.js.cn/')

…它将打开一个带有给定 URL 的新窗口。大多数现代浏览器配置为在新标签页中打开 URL，而不是单独的窗口。

弹出窗口从很早以前就存在。最初的想法是在不关闭主窗口的情况下显示其他内容。截至目前，还有其他方法可以做到这一点：我们可以使用 fetch 动态加载内容，并在动态生成的 <div> 中显示它。因此，弹出窗口并不是我们每天都会使用的东西。

此外，弹出窗口在移动设备上很棘手，因为移动设备不会同时显示多个窗口。

尽管如此，仍然有一些任务需要使用弹出窗口，例如 OAuth 授权（使用 Google/Facebook 等登录），因为

1. 弹出窗口是一个独立的窗口，拥有自己的独立 JavaScript 环境。因此，从第三方非信任站点打开弹出窗口是安全的。
2. 打开弹出窗口非常容易。
3. 弹出窗口可以导航（更改 URL）并向打开窗口发送消息。

弹出窗口拦截

过去，恶意网站滥用弹出窗口。一个不良页面可能会打开大量包含广告的弹出窗口。因此，现在大多数浏览器都会尝试拦截弹出窗口并保护用户。

大多数浏览器会拦截在用户触发的事件处理程序（如 onclick）之外调用的弹出窗口。

例如

// popup blocked
window.open('https://javascript.js.cn');

// popup allowed
button.onclick = () => {
  window.open('https://javascript.js.cn');
};

这样，用户在一定程度上免受不受欢迎的弹出窗口的困扰，但功能并没有完全禁用。

window.open

打开弹出窗口的语法为：window.open(url, name, params)

url

要加载到新窗口的 URL。

name

新窗口的名称。每个窗口都有一个 window.name，在这里我们可以指定要用于弹出窗口的窗口。如果已经存在具有此名称的窗口，则给定的 URL 将在其中打开，否则将打开一个新窗口。

params

新窗口的配置字符串。它包含用逗号分隔的设置。params 中不能有空格，例如：width=200,height=100。

params 的设置

• 位置
  • left/top（数字） - 窗口左上角在屏幕上的坐标。有一个限制：新窗口不能定位在屏幕外。
  • width/height（数字） - 新窗口的宽度和高度。对最小宽度/高度有限制，因此无法创建不可见的窗口。
• 窗口功能
  • menubar（yes/no） - 在新窗口上显示或隐藏浏览器菜单。
  • toolbar（yes/no） - 在新窗口上显示或隐藏浏览器导航栏（后退、前进、重新加载等）。
  • location（yes/no） - 在新窗口中显示或隐藏 URL 字段。FF 和 IE 默认情况下不允许隐藏它。
  • status（yes/no） - 显示或隐藏状态栏。同样，大多数浏览器强制显示它。
  • resizable（yes/no） - 允许禁用新窗口的调整大小。不推荐。
  • scrollbars (是/否) – 允许禁用新窗口的滚动条。不推荐。

还有一些不太受支持的浏览器特定功能，通常不使用。查看 MDN 中的 window.open 以获取示例。

示例：一个极简的窗口

让我们打开一个具有最少功能的窗口，只是为了看看浏览器允许禁用哪些功能。

let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
width=0,height=0,left=-1000,top=-1000`;

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

这里大多数“窗口功能”都被禁用了，窗口被定位到屏幕外。运行它，看看实际发生了什么。大多数浏览器会“修复”一些奇怪的事情，比如零 width/height 和屏幕外的 left/top。例如，Chrome 会以全宽/高打开这样的窗口，使其占据整个屏幕。

让我们添加正常的定位选项和合理的 width、height、left、top 坐标。

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

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

大多数浏览器按要求显示上面的示例。

省略设置的规则

• 如果 open 调用中没有第三个参数，或者它是空的，则使用默认窗口参数。
• 如果存在参数字符串，但省略了一些 yes/no 功能，则省略的功能被假定为具有 no 值。因此，如果您指定参数，请确保您明确将所有必需的功能设置为 yes。
• 如果参数中没有 left/top，则浏览器会尝试在最后一个打开的窗口附近打开一个新窗口。
• 如果参数中没有 width/height，则新窗口将与最后一个打开的窗口大小相同。

从窗口访问弹出窗口

open 调用返回对新窗口的引用。它可以用来操作它的属性，改变位置等等。

在这个例子中，我们从 JavaScript 生成弹出窗口内容。

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write("Hello, world!");

这里我们在加载后修改内容。

let newWindow = open('/', 'example', 'width=300,height=300')
newWindow.focus();

alert(newWindow.location.href); // (*) about:blank, loading hasn't started yet

newWindow.onload = function() {
  let html = `<div style="font-size:30px">Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

请注意：在 window.open 之后，新窗口还没有加载。这在 (*) 行的 alert 中得到证明。因此，我们等待 onload 来修改它。我们也可以使用 newWin.document 的 DOMContentLoaded 处理程序。

从弹出窗口访问窗口

弹出窗口也可以使用window.opener引用访问“打开者”窗口。对于除弹出窗口之外的所有窗口，它都是null。

如果运行以下代码，它将用“Test”替换打开者（当前）窗口内容

let newWin = window.open("about:blank", "hello", "width=200,height=200");

newWin.document.write(
  "<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
);

因此，窗口之间的连接是双向的：主窗口和弹出窗口彼此都有引用。

关闭弹出窗口

要关闭窗口：win.close()。

要检查窗口是否已关闭：win.closed。

从技术上讲，close()方法可用于任何window，但如果window不是使用window.open()创建的，则大多数浏览器会忽略window.close()。因此，它只会在弹出窗口上起作用。

如果窗口已关闭，则closed属性为true。这对于检查弹出窗口（或主窗口）是否仍然打开非常有用。用户可以随时关闭它，我们的代码应该考虑到这种可能性。

此代码加载然后关闭窗口

let newWindow = open('/', 'example', 'width=300,height=300');

newWindow.onload = function() {
  newWindow.close();
  alert(newWindow.closed); // true
};

移动和调整大小

有一些方法可以移动/调整窗口大小

win.moveBy(x,y)

将窗口相对于当前位置向右移动x像素，向下移动y像素。允许使用负值（向左/向上移动）。

win.moveTo(x,y)

将窗口移动到屏幕上的坐标(x,y)。

win.resizeBy(width,height)

根据给定的width/height相对于当前大小调整窗口大小。允许使用负值。

win.resizeTo(width,height)

将窗口调整为给定大小。

还有window.onresize事件。

滚动窗口

我们在 窗口大小和滚动 章节中已经讨论过滚动窗口。

win.scrollBy(x,y)

相对于当前滚动位置，将窗口向右滚动 x 像素，向下滚动 y 像素。允许负值。

win.scrollTo(x,y)

将窗口滚动到给定的坐标 (x,y)。

elem.scrollIntoView(top = true)

滚动窗口以使 elem 显示在顶部（默认值）或在底部（对于 elem.scrollIntoView(false)）。

还有 window.onscroll 事件。

窗口上的聚焦/失焦

理论上，有 window.focus() 和 window.blur() 方法来聚焦/取消聚焦窗口。还有 focus/blur 事件，允许捕获访问者聚焦窗口和切换到其他位置的时刻。

但是，在实践中，它们受到严重限制，因为过去恶意页面滥用它们。

例如，看看这段代码

window.onblur = () => window.focus();

当用户尝试从窗口切换出去（window.onblur）时，它会将窗口重新聚焦。目的是将用户“锁定”在 window 内。

因此，浏览器不得不引入许多限制来禁止类似的代码，并保护用户免受广告和恶意页面的侵害。它们依赖于浏览器。

例如，移动浏览器通常完全忽略 window.focus()。此外，当弹出窗口在单独的标签页而不是新窗口中打开时，聚焦不起作用。

尽管如此，在某些情况下，这些调用仍然有效，并且可能有用。

例如

• 当我们打开弹出窗口时，最好在它上面运行 newWindow.focus()。以防万一，对于某些操作系统/浏览器组合，它可以确保用户现在位于新窗口中。
• 如果我们想跟踪访问者何时实际使用我们的 Web 应用程序，我们可以跟踪 window.onfocus/onblur。这允许我们暂停/恢复页面内活动、动画等。但请注意，blur 事件意味着访问者从窗口中切换出去，但他们仍然可能观察到它。窗口在后台，但仍然可能可见。

总结

弹出窗口很少使用，因为有替代方案：在页面内加载和显示信息，或在 iframe 中。

如果我们要打开弹出窗口，最佳做法是通知用户。链接或按钮附近的“打开窗口”图标将允许访问者在焦点转移时保持冷静，并记住两个窗口。

• 可以通过 open(url, name, params) 调用打开弹出窗口。它返回对新打开窗口的引用。
• 浏览器会阻止来自用户操作之外的代码的open调用。通常会弹出一个通知，以便用户可以允许它们。
• 浏览器默认情况下会打开一个新标签页，但如果提供了尺寸，则它将是一个弹出窗口。
• 弹出窗口可以使用window.opener属性访问打开它的窗口。
• 如果主窗口和弹出窗口具有相同的来源，则它们可以自由地读取和修改彼此。否则，它们可以更改彼此的位置并交换消息。

要关闭弹出窗口：使用close()调用。用户也可以关闭它们（就像任何其他窗口一样）。之后，window.closed为true。

• 方法focus()和blur()允许聚焦/取消聚焦窗口。但它们并不总是有效。
• 事件focus和blur允许跟踪窗口的进出切换。但请注意，即使在blur之后，窗口也可能仍然可见，即使处于后台状态。