关于window.open在不同浏览器的不同点
菜鸟教程: http://www.runoob.com/jsref/met-win-open.html
一、基本语法:
window.open(URL,name,specs,replace)
其中:
URL 为子窗口路径
name 为子窗口名字
specs 为窗口参数(各参数用逗号分隔)
二、返回值:
返回新创建的window对象。所以可以用返回的window调用方法。
第二个对象参数支持不同浏览器支持程度:
https://segmentfault.com/a/1190000016900915
几种打开新窗口的方式
window.open()
- 创造 a 链接,手动触发
a.click()
- 创造 form 表单,手动触发
form.submit()
(创造 form 表单,添加 button 子元素,手动触发button.click()
情况相同,不做区分)
调用情形分组结果
使用 Chrome(70)、Firefox(63)、Edge、IE(9-11) 作为测试浏览器,对以下列举的打开新窗口的情形做测试。
x 表示被拦截,√ 表示新窗口正确打开
直接打开
即页面加载后直接调用打开新窗口代码
方式 | Chrome | Firefox | Edge | IE |
---|---|---|---|---|
window.open() | x | x | x | x |
a.click() | x | x | x | x |
form.submit() | x | x | x | x |
用户点击行为
-
按钮点击后直接打开
即在按钮被点击的回调中,直接调用打开新窗口的代码
方式 Chrome Firefox Edge IE window.open() √ √ √ √ a.click() √ √ √ √ form.submit() √ √ √ √ -
按钮点击后延时打开
即在按钮被点击的回调中,通过 setTimeout 执行打开新窗口代码
方式 Chrome Firefox Edge IE window.open() √ √ × × a.click() √ √ × × form.submit() √ √ × × -
按钮点击后在异步请求回调中打开
即在按钮被点击的回调中,发送请求,并在请求的回调中执行打开新窗口代码
方式 Chrome Firefox Edge IE window.open() x x x x a.click() x x x x form.submit() x x x x
用户键盘行为
我们以 input 元素进行测试(其他元素其他键盘事件也有相同效果),因为最可能使用的情况为 input 中使用回车打开新窗口。
-
input keydown后直接打开
方式 Chrome Firefox Edge IE window.open() √ x √ x a.click() √ x √ x form.submit() √ x √ x 其中 ie9、ie10虽然会弹出拦截弹窗提示,但是能打开新窗口
-
按钮点击后延时打开
方式 Chrome Firefox Edge IE window.open() √ x x x a.click() √ x x x form.submit() √ x x x -
按钮点击后在异步请求回调中打开
方式 Chrome Firefox Edge IE window.open() x x x x a.click() x x x x form.submit() x x x x
规则总结
- 就参与测试的浏览器,三种打开新窗口的方式对拦截结果没有影响。
- 所有浏览器都不允许非用户操作引起的打开新窗口。
- 所有浏览器都不允许在异步 ajax 请求中打开新窗口。
- Edge 和 IE 不允许在 setTimeout 中打开新窗口,Chrome、Firefox 允许在用户操作事件中的 setTimeout 中打开新窗口。
- Firefox 和 IE 不允许在用户键盘操作事件中打开新窗口
解决方案
- 需要在异步 ajax 请求中打开新窗口的可以使用请求前打开新窗口,请求拿到结果后再修改窗口地址的方式。
- 需要在键盘回车事件中打开新窗口的推荐使用 form 表单包装并添加 button 的方式,回车触发默认的 submit 事件进行新窗口的打开。
function click_fun_new(){ var tempwindow=window.open();//先打开临时窗体,由于是点击事件内触发,不会被拦截 $.ajax({ 'url': '${pageContext.request.contextPath}/activity/savePrizes.htm', 'type': 'post', 'dataType': 'json', 'data': data, success: function (data) { tempwindow.location = "www.baidu.com";//当回调的时候更改临时窗体的路径 }, error:function(){ tempwindow.close();//回调发现无需打开窗体时可以关闭之前的临时窗体 } }); --------------------- 作者:Elong_Deo 来源:CSDN 原文:https://blog.csdn.net/qq525099302/article/details/51338879 版权声明:本文为博主原创文章,转载请附上博文链接!