美文网首页
window.open被拦截问题和相关处理方式

window.open被拦截问题和相关处理方式

作者: Tauruse | 来源:发表于2019-07-11 16:30 被阅读0次

    前言

    最近的一些需求,折腾了一些时间,记录一下解决方案:

    a标签window.open

    现在浏览器一般会默认拦截除了用户点击之外的window.open操作,一般解决方法有:

    直接在a标签中

    <a href="javascript:void(0)" onclick="window.open(url)">点击</a>
    

    但是项目里面有很多a标签,并且想在a标签触发window.open之前执行一些操作,如果放在ajax里面会被浏览器拦截,在网上查了一下,最终的写法是:

    先在ajax操作前

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

    然后在ajax的success方法中:

    newWin.location.href = url;
    

    使用姿势

    <a href="javascript:void(0)" onclick="window.open(url)">点击</a>
    

    如果想在window.open之前处理业务逻辑的话,直接使用

    $(dom).click(function(){
      ...
    });
    

    是会直接打开新窗口的。因为a标签在html 的onclick事件已经写了,优先级高于jquery的click事件,所以换个思路:

    $(dom).mousedown(function(){
      this.onclick = function(){return false;}
    });
    

    如果需要阻止a标签的window.open事件,直接使用上面里面的

      ...
       this.onclick = function(){return false;}
      ...
    

    这段代码即可;

    同时,如果你想在mouseover函数里面获取a标签的onclick里面的window.open里面的网址的话,可以通过

    this.getAttributeNode("onclick").nodeValue
    

    获取到a标签的onclick函数的字符串,再通过正则或者字符串截取即可获取到网址的内容

    监听新窗口关闭

    未完待续。。。

    完整代码:

    $('a[onclick],li[onclick]').mousedown(function(){
                var code = this.getAttributeNode("onclick").nodeValue; // 这里需要获取onclick里面window.open的点击事件里面的网址
                
                if(code.indexOf(tag) != -1){
                    var that = this;
                    code = code.substr(code.indexOf("(")+2);
                    var url = code.substr(0,code.indexOf(",")-1);
                    //this.onclick = function(){return false;}
                    console.log(url);
                    
                    var index = layer.load(2, {
                        shade:[0.5,'#000']
                    });
    
                    //这里可以放一个loading页面或者空白页面
                    var newWin = window.open(url+"&loading=1",'','width=1024,height=768');
                    $.ajax({
                        type:'POST',
                        url:'***',
                        data:{
                            'operateId':'{{ str_random(20) }}',
                            'api_code':url.substr(url.indexOf('api_code')+9)
                        },
                        //async: false,
                        success:function(res){
                            console.log(res.status.msg);
                            newWin.location.href = url;
                            layer.close(index);            
                        }
                    });
                    //window.open(url,'',"width=1024,height=768");
                }
            });
    

    相关文章

      网友评论

          本文标题:window.open被拦截问题和相关处理方式

          本文链接:https://www.haomeiwen.com/subject/mmudkctx.html