通常我們想要瀏覽器在回調方法中打開一個頁簽,用這個方法
//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
