jquery实现自动打开新的页签

来源：互联网发布：什么软件看阿衰漫画编辑：程序博客网时间：2024/05/23 16:32

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

//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>

阅读全文

0 0