【JavaScript】JS開啟新視窗防止被瀏覽器阻止的方法
阿新 • • 發佈:2018-12-09
本文例項講述了JS開啟新視窗防止被瀏覽器阻止的方法。分享給大家供大家參考。具體分析如下:
用傳統的window.open()方式開啟新視窗,會被瀏覽器阻止,那麼,我們如何才能讓JS開啟新視窗不被瀏覽器阻止呢?其實辦法還是有的,這裡我們就來分析一下如何解決這個問題
我最近也遇到了這樣的問題,所以就把彈出新視窗的方法分享給大家。歡迎大家補充哦...
第一種、使用原生javascript的window.open()方法(大部分情況下會被瀏覽自阻止)
第二種、模擬表單(form)提交,原理是指定表單的action為想要開啟的URL地址,target設定為"_blank"
document.getElementById("msgTxt").innerHTML="<form id='hiddenlink' action='"+sHref+"' target='_blank'><input type='hidden' name='object' value='"+objValue+"'></form>"; var s=document.getElementById("hiddenlink"); s.submit();
不過模擬表單提交的方法經有可能也會被阻止...
第三種、模擬超連結(<a>)被點選
當按下一個按鈕時,想開啟一個新的標籤頁,可以模擬連結被按下,然後開啟連結。 但是在jQuery中,使用a.click(), a.trigger('click')等都不會引起連結預設事件被執行。 下面的程式碼模擬生成了連結點選事件,然後執行預設開啟連結的事件。
不過值得注意的一點是:對應IE瀏覽器,只有IE9以上才支援document.createEvent函式,所以以下程式碼在IE執行的話要IE9以上才行
var a = $("<a href='http://www.test.com' target='_blank' >test</a>").get(0); var e = document.createEvent('MouseEvents'); e.initEvent('click', true, true); a.dispatchEvent(e);
第四種、利用瀏覽器的冒泡事件
clickOpenWin: function(f){ var dataKey = "clickOpenWin.dataKey" var me = $(this); var A = me.data(dataKey); var returnData = null; if(!A){ A = $(""); me.data(dataKey, A); A.click(function(e){ if(returnData){ A.attr("href", returnData); }else { A.before(me); e.stop(); } }); } me.mouseover(function(){$(this).before(A).appendTo(A);}); me.mouseout(function(){A.before($(this));}); me.click(function(){ A.attr("href", "#|"); returnData = f.apply(this, arguments); }); }
1). 首先,說一下最終的效果,是實現用 “A” 包含你要觸發彈窗的元素,原來的click事件要返回彈窗的URL 對應這一句:
returnData = f.apply(this, arguments);
2). 然後就要說到彈窗攔截的策略了,具體我就不說了,反正 策略裡是不會攔截 “A” 本身吧 3). 最後就是合成了,用A包含後,因為事件會冒泡,所以利用正常的點選,生成動態的 連結地址 給A,觸發A的原始點選事件,就完成了。