弹窗和 window 的方法

更新日期: 2020-11-25阅读: 1.1k标签: 弹窗

弹窗(popup)是向用户显示其他文档的最古老的方法之一。基本上,你只需要运行:

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

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

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

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

但仍然有一些任务在使用弹窗,例如进行 OAuth 授权(使用 Google/Facebook/… 登陆),因为:

弹窗是一个独立的窗口,具有自己的独立 JavaScript 环境。因此,使用弹窗打开一个不信任的第三方网站是安全的。
打开弹窗非常容易。
弹窗可以导航(修改 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。


示例:一个最简窗口

让我们打开一个包含最小功能集的新窗口,来看看哪些功能是浏览器允许禁用的:

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 为零以及脱离屏幕(offscreen)的 left/top 设置。例如,Chrome 打开了一个全 width/height 的窗口,使其占满整个屏幕。

让我们添加正常的定位选项和合理的 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,加载尚未开始

newWindow.onload = function() {
  let html = `<div>Welcome!</div>`;
  newWindow.document.body.insertAdjacentHTML('afterbegin', html);
};

请注意:在刚刚进行了 window.open 的时候,新窗口还没有加载完成。我们可以通过 (*) 行中的 alert 证实这一点。因此,我们需要等待 onload 以对新窗口进行更改。我们也可以对 newWin.document 使用 domContentLoaded 处理程序。

同源策略:
只有在窗口是同源的时,窗口才能自由访问彼此的内容(相同的协议://domain:port)。
否则,例如,如果主窗口来自于 site.com,弹窗来自于 gmail.com,则处于安全性考虑,这两个窗口不能访问彼此的内容。


从弹窗访问窗口

弹窗也可以使用 window.opener 来访问 opener 窗口。除了弹窗之外,对其他所有窗口来说,window.opener 均为 null。

如果你运行下面这段代码,它将用 “Test” 替换 opener(也就是当前的)窗口的内容:

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()。因此,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 事件。

仅对于弹窗
为了防止滥用,浏览器通常会阻止这些方法。它们仅在我们打开的,没有其他选项卡的弹窗中能够可靠地工作。
没有最小化/最大化
JavaScript 无法最小化或者最大化一个窗口。这些操作系统级别的功能对于前端开发者而言是隐藏的。
移动或者调整大小的方法不适用于最小化/最大化的窗口。


滚动窗口

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

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() 是个好主意。以防万一,对于某些操作系统/浏览器组合(combination),它可以确保用户现在位于新窗口中。

如果我们想要跟踪访问者何时在实际使用我们的 Web 应用程序,我们可以跟踪 window.onfocus/onblur。这使我们可以暂停/恢复页面活动和动画等。但是请注意,blur 事件意味着访问者从窗口切换了出来,但他们仍然可以观察到它。窗口处在背景中,但可能仍然是可见的。


总结

弹窗很少使用,因为有其他选择:在页面内或在 iframe 中加载和显示信息。

如果我们要打开一个弹窗,将其告知用户是一个好的实践。在链接或按钮附近的“打开窗口”图标可以让用户免受焦点转移的困扰,并使用户知道点击它会弹出一个新窗口。

可以通过 open(url, name, params) 调用打开一个弹窗。它会返回对新打开的窗口的引用。

浏览器会阻止来自用户行为之外的代码中的 open 调用。通常会显示一条通知,以便用户可以允许它们。

默认情况下,浏览器会打开一个新标签页,但如果提供了窗口大小,那么浏览器将打开一个弹窗。

弹窗可以使用 window.opener 属性访问 opener 窗口(译注:即打开弹窗的窗口)。

如果主窗口和弹窗同源,那么它们可以彼此自由地读取和修改。否则,它们可以更改彼此的地址(location),交换消息。

要关闭弹窗:使用 close() 调用。用户也可以关闭弹窗(就像任何其他窗口一样)。关闭之后,window.closed 为 true。

focus() 和 blur() 方法允许聚焦/失焦于窗口。但它们并不是一直都有效。

focus和 blur 事件允许跟踪窗口的切换。但是请注意,在 blur 之后,即使窗口在背景状态下,窗口仍有可能是可见的。

原文来自:https://zh.javascript.info/popup-windows


链接: https://www.fly63.com/article/detial/10357

页面弹窗toast和加载loading

都采用单例模式,原生js实现,兼容老版本浏览器内核,请将用es6语法的地方作修改.loading 加载代码: 样式全部通过js创建style标签注入head中,若需修改,请修改loadignStyle和loadignChildStyle 的值即刻。

浏览器的三种Js弹窗方式

在做网页时,常常使用弹窗,以上就是浏览器的三种弹窗方式, alert 在测试时常用; confirm 可以套用if...else 来用 ,比如 :confirm点击了确定做什么事情,点击了取消又做什么事情;prompt 弹窗输入 ; 可以给网页设置密码。

搞懂extend和$mount原理并实现一个命令式Confirm弹窗组件

如每个使用的地方需要引入该组件,需要注册,需要给组件加ref引用,需要调用事件来控制状态。其实这个组件相对来说是比较独立的,我们在使用组件库的时候

优秀好看的弹窗界面设计

不管是用户还是设计师角色,弹窗界面应该都是经常能碰到的。弹窗(pop-up)能够让用户更聚焦,不用离开当前页面便能轻松快速地完成任务。 但是千篇一律的界面设计很容易让人忽略了它本身的美感。

javaScript实现弹窗拖动

通过原生javaScript进行窗口拖动的实现,通过javaScript实现自定义容器的拖动操作,通过拖动标题部分进行窗口的移动

html5 dialog弹窗的使用介绍

说起 dialog 标签,可能很多人都比较陌生,毕竟这个标签直到 HTML5.2 标准固定,也只是 chrome 的浏览器才支持的,那至于该标签的用处,根据语义也可以很明显的理解到,会话

别再用alert()做弹窗了,浏览器自带的系统级模态框太好用了!

在很多场景下,都需要弹窗用于交互,一般UI框架都有模态框,如果你做一个小单页,不引入UI库,你将无法使用模态框,或者使用JavaScript自带的alert弹出提醒,或者是自己写,这都不是很便利。

vue3优雅的使用useDialog

在日常开发时,弹窗是一个经常使用的功能,而且重复性极高,你可能会遇到下面这些问题:1、一个页面内多个弹窗, 要维护多套弹窗状态,看的眼花缭乱2、弹窗内容比较简单,声明变量 + 模板语法的方式写起来比较麻烦

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!