• 【转发】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

  • 相关阅读:
    JSCover(查看代码覆盖率)
    vue的测试(Vue.js devtool)
    QUnit使用
    实现网站国际化
    hexo部署Github博客
    grunt实现修改代码实时刷新浏览器
    this指向问题
    gulp使用 实现文件修改实时刷新
    数据类型的判断
    template
  • 原文地址:https://www.cnblogs.com/firstcsharp/p/11532049.html
Copyright © 2020-2023  润新知