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)—— 允许禁用新窗口的滚动条。不建议使用。
为什么要使用弹窗?
- 弹窗是一个独立的窗口,具有自己的独立 JavaScript 环境。因此,使用弹窗打开一个不信任的第三方网站是安全的。
- 打开弹窗非常容易
- 弹窗可以导航(修改 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 。
以上就是JavaScript Window.open 弹窗使用详解的详细内容,更多关于JavaScript Window.open 弹窗的资料请关注脚本之家其它相关文章!
相关文章
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
下面小编就为大家带来一篇js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-09-09基于js中style.width与offsetWidth的区别(详解)
下面小编就为就大家带来一篇基于js中style.width与offsetWidth的区别(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-11-11PHP+jQuery+Ajax+Mysql如何实现发表心情功能
这篇文章通过php+jquery+ajax+mysql相结合,实现当用户浏览网站文章或者是论坛帖子后,想表达自己浏览后的心情,发表自己的感受,很多网站都提供了用户发表心情的功能,通过此功能可以很直观的分析文章或者是论坛对浏览者的用户体验度2015-08-08
最新评论