一、弹窗（popup）是向用户显示其他文档的最古老的方法之一
二、实现
1、基本只要运行

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

它将打开一个具有给定URL的新窗口。大多数现代浏览器都配置为在新选项卡中打开URL，而不是单独的窗口。
2、可以使用fetch动态加载内容，并将其显示在动态生成的

中。
三、弹窗的缺点
1、在移动设备上非常棘手，因为移动设备无法同时显示多个窗口。
四、弹窗的优点
1、进行OAuth授权（使用Google / Facebbok / …），因为
（1）弹窗是一个独立的窗口，具有自己的独立JavaScript环境。因此，使用弹窗打开一个不信任的第三方网站是安全的。
（2）打开弹窗非常容易
（3）弹窗可以导航（修改URL），并将消息发送到opener窗口（打开弹窗的窗口）。
五、弹窗很少使用，因为有其他选择：在页面内或在 iframe 中加载和显示信息

阻止弹窗

一、在过去，很多恶意网站经常滥用弹窗。因此，现在大多数浏览器都会阻止弹窗来保护用户。
二、如果弹窗是在用户触发的事件处理程序（如onclick）之外调用的，大多数浏览器都会阻止此类弹窗。
【示例1】

  1. // 弹窗被阻止
  2. window.open('https://javascript.info');
  4. // 弹窗被允许
  5. button.onclick = () => {
  6.   window.open('https://javascript.info');
  7. };

【示例2】弹窗是从onclick打开的，但是在setTimeout之后

  1. // 在Chrome中会被打开，在Firefox、Safari中会被阻止
  2. // 3 秒后打开弹窗
  3. setTimeout(() => window.open('http://google.com'), 3000);
  5. // 在Chrome， Firefox, Safari中都会被打开
  6. // 1 秒后打开弹窗
  7. setTimeout(() => window.open('http://google.com'), 1000); //  Firefox, Safari 可以接受 2000ms 或更短的延迟，但是超过这个时间 —— 则移除“信任”

打开弹窗 window.open

一、打开一个弹窗的语法是window.open(url, name, params)
1、url：要在新窗口加载的URL
2、name：新窗口的名称。
（1）每个窗口都有一个window.name，在这里我们可以指定哪个窗口用于弹窗。如果已经有一个这样名字的窗口——将在该窗口打开给定的URL，否则会打开一个新窗口。
3、params：新窗口的配置字符串
（1）它包括设置，用逗号分割。
（2）参数之间不能有空格，例如width=200,height=100
（3）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）—— 允许禁用新窗口的滚动条。不建议使用。

二、通过 open(url, name, params) 调用打开一个弹窗。它会返回对新打开的窗口的引用。
三、默认情况下，浏览器会打开一个新标签页，但如果提供了窗口大小，那么浏览器将打开一个弹窗。

一个最简窗口

一、打开一个包含最小功能集的新窗口，来看看哪些功能是浏览器允许禁用的

  1. let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
  2. width=0,height=0,left=-1000,top=-1000`; // 大多数“窗口功能”都被禁用了，并且窗口位于屏幕外。
  4. open('/', 'test', params);

1、运行后结果：大多数浏览器都会“修复”奇怪的东西，例如 width/height 为零以及脱离屏幕（offscreen）的 left/top 设置。例如，Chrome 打开了一个全 width/height 的窗口，使其占满整个屏幕。
二、添加正常的定位选项和合理的 width、height、left 和 top 坐标

  1. let params = `scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no,
  2. width=600,height=300,left=100,top=100`;
  4. open('/', 'test', params);

1、运行后结果：大多数浏览器会根据要求显示上面的示例
三、设置中的省略规则：
1、如果 open 调用中没有第三个参数，或者它是空的，则使用默认的窗口参数。
2、如果这里有一个参数字符串，但是某些 yes/no 功能被省略了，那么被省略的功能则被默认值为 no。因此，如果你指定参数，请确保将所有必需的功能明确设置为 yes。
3、如果参数中没有 left/top，那么浏览器会尝试在最后打开的窗口附近打开一个新窗口。
4、如果没有 width/height，那么新窗口的大小将与上次打开的窗口大小相同。

关闭弹窗

一、关闭一个窗口：win.close()。
1、从技术上讲，close() 方法可用于任何 window，但是如果 window 不是通过 window.open() 创建的，那么大多数浏览器都会忽略 window.close()。因此，close() 只对弹窗起作用。
二、检查一个窗口是否被关闭：win.closed。
1、如果窗口被关闭了，那么 closed 属性则为 true。
2、这对于检查弹窗（或主窗口）是否仍处于打开状态很有用。
3、用户可以随时关闭它，我们的代码应该考虑到这种可能性。
【示例1】这段代码加载并关闭了窗口：

  1. let newWindow = open('/', 'example', 'width=300,height=300');
  3. newWindow.onload = function() {
  4.   newWindow.close();
  5.   alert(newWindow.closed); // true
  6. };

窗口间的访问

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

从窗口访问弹窗

一、open调用会返回对新窗口的引用。它可以用来操纵弹窗的属性，更改位置，甚至更多操作。
二、从 JavaScript 中生成弹窗

  1. let newWin = window.open("about:blank", "hello", "width=200,height=200");
  3. newWin.document.write("Hello, world!");

1、在其加载完成后，修改其中的内容

  1. let newWindow = open('/', 'example', 'width=300,height=300')
  2. newWindow.focus();
  4. alert(newWindow.location.href); // about:blank，加载尚未开始
  6. newWindow.onload = function() { // 需要等待onload以对新窗口进行更改。也可以对 newWin.document 使用 DOMContentLoaded 处理程序。
  7.   let html = `<div style="font-size:30px">Welcome!</div>`;
  8.   newWindow.document.body.insertAdjacentHTML('afterbegin', html);
  9. };

三、同源策略：只有在窗口是同源的时，窗口才能自由访问彼此的内容（相同的协议://domain:port）。
【示例1】如果主窗口来自于 site.com，弹窗来自于 gmail.com，则处于安全性考虑，这两个窗口不能访问彼此的内容。

从弹窗访问窗口

一、弹窗也可以使用 window.opener 来访问 opener 窗口。
1、除了弹窗之外，对其他所有窗口来说，window.opener 均为 null。
【示例1】运行下面这段代码，它将用 “Test” 替换 opener（也就是当前的）窗口的内容：

  1. let newWin = window.open("about:blank", "hello", "width=200,height=200");
  3. newWin.document.write(
  4.   "<script>window.opener.document.body.innerHTML = 'Test'<\/script>"
  5. );

移动窗口、调整窗口大小

一、有一些方法可以移动一个窗口，或者调整一个窗口的大小：
1、win.moveBy(x,y)：将窗口相对于当前位置向右移动 x 像素，并向下移动 y 像素。允许负值（向上/向左移动）。
2、win.moveTo(x,y)：将窗口移动到屏幕上的坐标 (x,y) 处。
3、win.resizeBy(width,height)：根据给定的相对于当前大小的 width/height 调整窗口大小。允许负值。
4、win.resizeTo(width,height)：将窗口调整为给定的大小。
5、 window.onresize 事件。
二、为了防止滥用，浏览器通常会阻止这些方法。它们仅在我们打开的，没有其他选项卡的弹窗中能够可靠地工作。
三、JavaScript 无法最小化或者最大化一个窗口。这些操作系统级别的功能对于前端开发者而言是隐藏的。
移动或者调整大小的方法不适用于最小化/最大化的窗口。

滚动窗口

一、滚动：scrollTo, scrollBy, scrollIntoView，见DOM-大小和滚动-window大小和滚动-滚动-更改当前滚动：https://www.yuque.com/tqpuuk/yrrefz/zzwumg
二、window.onscroll事件

弹窗的聚焦 / 失焦

一、从理论上讲，使用window.focus()和window.blur()方法可以使窗口获得或失去焦点。还有focus/blur事件，可以捕获到访问者聚焦到一个窗口和切换到其他地方的适合。
1、实际中被进行了严格地限制，因为在过去，恶意网站滥用这些方法。
2、具体的限制规则取决于浏览器。
（1）移动端浏览器通常会完全忽略 window.focus()。
（2）当弹窗是在单独的选项卡而不是新窗口中打开时，也无法进行聚焦。
【示例1】当用户尝试从窗口切换出去（window.onblur）时，这段代码又让窗口重新获得了焦点。目的是将用户“锁定”在 window 中。

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

二、在某些情况下，此类调用确实有效且很有用。
1、当我们打开一个弹窗时，在它上面执行 newWindow.focus() 是个好主意。以防万一，对于某些操作系统/浏览器组合（combination），它可以确保用户现在位于新窗口中。
2、如果我们想要跟踪访问者何时在实际使用我们的 Web 应用程序，我们可以跟踪 window.onfocus/onblur。这使我们可以暂停/恢复页面活动和动画等。但是请注意，blur 事件意味着访问者从窗口切换了出来，但他们仍然可以观察到它。窗口处在背景中，但可能仍然是可见的。