點擊事件彈出新的頁面


  前兩天將文本與測聽功能的模塊抽取到獨立頁面,出現了bug,頁面本身沒問題,主要是雙擊通話列表加密數據后異步跳轉到2頁面出現的問題。新窗口會被攔截掉,吐槽一下,為什么js中使用 window.open() 打開新的頁面要被攔截,有什么關系!

  之前是用angular做的單頁面應用,通過路由跳轉,所以沒有此問題,抽出來后發現了這個問題,會自動攔截,除非手動進行設置不攔截新彈出窗口,否則逃不掉攔截TOT。

  查了好多方法,什么模擬表單提交跳轉,創建a標簽跳轉等,花樣是挺多,可是都沒什么用,該被攔截還被攔截,而且我還想說,百度出的頁面60%的內容都是一樣的。。。可不可以人性化一點,雷同的就判斷時間扔掉算了。抄襲可恥!

  這里整理一下打開新頁面知識點,雖然會被攔截,但單頁面應用依然可以用到。

 

js自帶window.open():

window.open(url, '_self');//本窗口打開
window.open(url, '_blank');//新窗口打開
//第二參數可省,默認新窗口打卡
//還有一種打開新頁面,重給地址的方法
 var openWin = window.open();
 openWin.location = url;
var w = window.open();
$.get(url, function (data) {
    w.location.href = url;
})

 

使用a標簽,調用其點擊方法:

var a = "<a href='" + url + "' target='_blank' >jump</a>";
$("body").append(a);
var btn = $(a).get(0);
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
btn.dispatchEvent(e);
var a = document.createElement("a");
a.setAttribute("href", url);
a.setAttribute("target", "_blank");
a.setAttribute("id", "openwin");
document.body.appendChild(a);
a.click();
var a = '<a id="openWin" href=' + url + '></a>';
$('body').append(a);
$('#openWin').click();

 

使用表單提交,跳轉到新頁面:

var tempForm = '<form method="get" ' +
                'target="_blank" ' +
                'action="' + url + '">' +
                '<input type="hidden" name="id" value="' +
                value + '">'  + '</form>';    
var $tempForm = $(tempForm);
$("body").append($tempForm);
$tempForm.submit();
$tempForm.remove();

 

后期遇到會繼續添加,方法很多,但是都沒有解決跳轉彈出新頁面問題,我只能感嘆,瀏覽器才是最強的。

 

加一句:異步請求后打開新頁面是不行的,所以可以使用同步請求方式直接打開頁面。

附上大神回復:

這樣就能直接進行各種新頁面打開啦!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM