【转发】jquery实现自动打开新的页签

通常我们想要浏览器在回调方法中打开一个页签，用这个方法

//window.open("http://www.baidu.com") ;       //自动打开新窗口,会被浏览器拦截，无效

但是事实上，这个会被浏览器自动拦截掉，那该怎么办呢？

 

我们可以模拟一个链接被点击，这样就不会被拦截了，代码如下：

 //打开新窗口，一切事件都调用该方法
        function openNewWindow() {
            //var a = $('a')[0];
            let a = $("<a href='http://www.baidu.com' target='_blank'>baidu</a>").get(0);
            let e = document.createEvent('MouseEvents');
            e.initEvent( 'click', true, true );
            a.dispatchEvent(e);
        }      

 

完整的demo我也发一个给大家：

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
 
    <link rel="shortcut icon" href="/favicon.ico" />
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="test">
    <meta http-equiv="description" content="test">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
    <script>
        $(function () {
            //window.open("http://www.baidu.com") ;       //自动打开新窗口,会被浏览器拦截，无效
 
            //openNewWindow();//自动打开新窗口，模拟一个链接的点击事件，不会被拦截，推荐做法
 
            //单击某个元素打开
            $(".click").click(function(){
                openNewWindow();
            });
 
            //双击某个元素打开
            $(".dblclick").dblclick(function(){
                openNewWindow();
            });
 
            //鼠标进去某个元素打开
            $(".mouseenter").mouseenter(function(){
                openNewWindow();
            });
 
            /**
             * 如果想要其他事件，请参考
             * 慕课网事件讲解：http://www.imooc.com/learn/429
             * 菜鸟网事件分类：http://www.runoob.com/jquery/jquery-events.html
             * W3school事件列表：http://www.w3school.com.cn/jquery/jquery_ref_events.asp
             */
 
        });
 
        //打开新窗口，一切事件都调用该方法
        function openNewWindow() {
            //var a = $('a')[0];
            let a = $("<a href='http://www.baidu.com' target='_blank'>baidu</a>").get(0);
            let e = document.createEvent('MouseEvents');
            e.initEvent( 'click', true, true );
            a.dispatchEvent(e);
        }
    </script>
 
</head>
<body>
     测试默认页面
 
    <div class="click">click单击事件跳转</div>
    <div class="dblclick">dblclick双击事件跳转</div>
    <div class="mouseenter">mouseenter鼠标进去事件跳转</div>
 
</body>
</html>
复制代码

转自：https://blog.csdn.net/lengguoxing/article/details/78413595

posted @   James·wang  阅读(981)  评论(0)  编辑  收藏  举报
编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示