【轉發】jquery實現自動打開新的頁籤

時間 2019-11-06

原文原文鏈接

一般咱們想要瀏覽器在回調方法中打開一個頁籤，用這個方法html

//window.open("http://www.baidu.com") ; //自動打開新窗口,會被瀏覽器攔截，無效jquery

可是事實上，這個會被瀏覽器自動攔截掉，那該怎麼辦呢？瀏覽器

咱們能夠模擬一個連接被點擊，這樣就不會被攔截了，代碼以下：測試

//打開新窗口，一切事件都調用該方法
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);
} ui

完整的demo我也發一個給你們：spa

<!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.net

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。