• window.open() 被拦截后的分析


    前言:
    此文章仅是个人工作中遇到问题后的一些记录和总结,可能毫无意义。。


    事件回顾:

    在开发中,PM要求在一个页面中输入多个链接然后可以一键在新窗口打开,所以就想到用window.open来实现,但是测试的时候发现会被拦截

    分析:

    关于window.open的用户很多前辈都有写过相关文章,就不在这里介绍了,查看window.open用法

    针对不同的浏览器做了以下测试


    1.用户点击事件内,触发打开一个新窗口

    用户点击事件触发新窗口是例如:

    obj.onclick=function(){

    window.open(url);

    }

    通过用户事件触发的新窗口打开,这种形式打开新窗口浏览器会认为是用户自己需要的,大多浏览器是不会拦截的

    目前测试的几个用户事件,只有click和dbclick是浏览器不会拦截的

    窗口拦截不只是跟浏览器内核有关,所以对原生IE和几个常见IE内核的浏览器都有做测试

    事件:click,dbclick

    不拦截的浏览器有:Chrome,FF,IE 6.0-10.0,Safari,Opera,360浏览器

    拦截:搜狗浏览器

    事件:mouseover,mousemove,mouseout,scroll等等

    不拦截:无

    拦截:Chrome,FF,IE 6.0-10.0,Safari,Opera,360浏览器

    2.用户点击事件内,触发打开多个新窗口

    点击一次成功打开多个窗口的浏览器:FF,360浏览器,Safari

    点击一次打开第一个窗口,后面的窗口拦截的浏览器:Chrome,IE 6.0-10.0,Opera

    3.Javascript自动触发打开窗口

    如:

    setTimeout(function(){ window.open('http://www.baidu.com')},1000)

    或者ajax请求成功后执行

    $obj.click(function(){

    $.ajax({

    sucss:function(data){

    if(data){

     window.open('http://www.baidu.com')

    }

    }

    })

    })

    拦截的浏览器:测试的几个浏览器都拦截

    解决方案:

    1.对于ajax返回后在打开新窗口,可以在用户点击后就打开一个空白窗口,然后再返回成功后给空白窗口一个url,这样就不会被拦截了

    $obj.click(function(){

    var newTab=window.open('about:blank');

    $.ajax({

    sucss:function(data){

    if(data){

     //window.open('http://www.baidu.com');

    newTab.location.href="http://www.baidu.com";

    }

    }

    })

    })

    2.脚本自行触发打开的新窗口

    看网上很多说新建a标签,模拟点击,经测试,无效,请大牛指导

    问题:

    前面开发项目时碰到一个问题,ajax 异步请求成功后需要新开窗口打开 url,使用的是 window.open() 方法,但是很可惜被浏览器给拦截了,怎么解决这个问题呢?
    分析:

    浏览器之所以拦截新开窗口是因为该操作并不是用户主动触发的,所以它认为这是不安全的就拦截了(不过如果是 _self 的话就不会有这个限制),即使 ajax 回调函数中模拟执行 click 或者 submit 等用户行为(trigger('click')),浏览器也会认为不是由用户主动触发的,因此不能被安全执行,所以被拦截。
    解决方法:

    1、异步改为同步,即:async:false

    2、将新开窗口指向为一个对象,然后修改对象的 url,比如:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    $('.task').bind('click',function(){
    var w = window.open();
    $.ajax({
    type: 'POST',
    url: '/surveyTask',
    dataType: 'json',
    error: function(){
    w.close();
    },
    success: function(res){
    w.location = res.url;
    }
    });
    });

    最后需要说明的是:网上的动态添加 form 新开窗口的方法,并不适合 ajax 请求,至少博主测试了下仍然被浏览器所拦截。

  • 相关阅读:
    LinQ Group By
    sql server 还原数据库后,删除用户,提示数据库主体在该数据库中拥有架构,无法删除解决方法
    各种网站资源
    Easyui TreeGrid数据源
    MVC中创建自定义视图的t4模板
    栈溢出练习
    Stack Canary
    攻防世界pwn之新手练习区
    开源 PetaPoco 扩展~一个小型轻巧的ORM~
    linux调度全景指南
  • 原文地址:https://www.cnblogs.com/chris-oil/p/4205517.html
Copyright © 2020-2023  润新知