关于window.open在不同浏览器的不同点

关于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

 

几种打开新窗口的方式

1. window.open()
2. 创造 a 链接，手动触发 a.click()
3. 创造 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

 

 

 

 

 

 

用户点击行为

1. 按钮点击后直接打开

   即在按钮被点击的回调中，直接调用打开新窗口的代码

   方式	Chrome	Firefox	Edge	IE
   window.open()	√	√	√	√
   a.click()	√	√	√	√
   form.submit()	√	√	√	√

2. 按钮点击后延时打开

   即在按钮被点击的回调中，通过 setTimeout 执行打开新窗口代码

   方式	Chrome	Firefox	Edge	IE
   window.open()	√	√	×	×
   a.click()	√	√	×	×
   form.submit()	√	√	×	×

3. 按钮点击后在异步请求回调中打开

   即在按钮被点击的回调中，发送请求，并在请求的回调中执行打开新窗口代码

   方式	Chrome	Firefox	Edge	IE
   window.open()	x	x	x	x
   a.click()	x	x	x	x
   form.submit()	x	x	x	x

用户键盘行为

我们以 input 元素进行测试（其他元素其他键盘事件也有相同效果），因为最可能使用的情况为 input 中使用回车打开新窗口。

1. input keydown后直接打开

   方式	Chrome	Firefox	Edge	IE
   window.open()	√	x	√	x
   a.click()	√	x	√	x
   form.submit()	√	x	√	x

   其中 ie9、ie10虽然会弹出拦截弹窗提示，但是能打开新窗口

2. 按钮点击后延时打开

   方式	Chrome	Firefox	Edge	IE
   window.open()	√	x	x	x
   a.click()	√	x	x	x
   form.submit()	√	x	x	x

3. 按钮点击后在异步请求回调中打开

   方式	Chrome	Firefox	Edge	IE
   window.open()	x	x	x	x
   a.click()	x	x	x	x
   form.submit()	x	x	x	x

规则总结

1. 就参与测试的浏览器，三种打开新窗口的方式对拦截结果没有影响。
2. 所有浏览器都不允许非用户操作引起的打开新窗口。
3. 所有浏览器都不允许在异步 ajax 请求中打开新窗口。
4. Edge 和 IE 不允许在 setTimeout 中打开新窗口，Chrome、Firefox 允许在用户操作事件中的 setTimeout 中打开新窗口。
5. Firefox 和 IE 不允许在用户键盘操作事件中打开新窗口

解决方案

1. 需要在异步 ajax 请求中打开新窗口的可以使用请求前打开新窗口，请求拿到结果后再修改窗口地址的方式。
2. 需要在键盘回车事件中打开新窗口的推荐使用 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 
版权声明：本文为博主原创文章，转载请附上博文链接！

 

posted @ 2018-11-06 10:53 黑客PK 阅读( ...) 评论( ...) 编辑 收藏