JS開啟新視窗防止被瀏覽器阻止的方法,js新視窗

來源:互聯網
上載者:User

JS開啟新視窗防止被瀏覽器阻止的方法,js新視窗

本文執行個體講述了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的原始點擊事件,就完成了。

希望本文所述對大家的javascript程式設計有所協助。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.