麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 編程 > HTML > 正文

詳解window.open被瀏覽器攔截的解決方案

2024-08-26 00:21:34
字體:
來源:轉載
供稿:網友

現象

最近在做項目的時候碰到了使用window.open被瀏覽器攔截的情況,搞得人無比郁悶啊,雖然在自己的環境可以對頁面進行放行,但是對用戶來說,不能要求用戶都來通過攔截。何況當出現攔截時,很多小白根本不知道發生了啥,不知道在哪里看被攔截的頁面,簡直悲催啊~~。

另外,可以發現,當window.open為用戶觸發事件內部或者加載時,不會被攔截,一旦將彈出代碼移動到ajax或者一段異步代碼內部,馬上就出現被攔截的表現了。

原因分析&深入研究

當瀏覽器檢測到非用戶操作產生的新彈出窗口,則會對其進行阻止。因為瀏覽器認為這不是一個用戶希望看到的頁面。

比如對js中直接執行的,如下代碼:

js code:

//  直接打開一個頁面window.open('//www.baidu.com', '_blank');

瀏覽器 ie8 chrome 40 firefox 34 opera 27 safari 5.1.7

是否阻止彈出 N N Y Y Y 而對于如下代碼:

js code:

    document.body.addEventListener('click', function() {        window.open('//www.baidu.com', '_blank');    });

所有瀏覽器都不會攔截。

綜上所述,各瀏覽器對攔截時機的判斷不一致,而對于放在ajax回調中的代碼,反應又不相同了,這里就不再贅述。但是,被瀏覽器攔截我們代碼中要彈出的窗口并不是程序員所希望的。

解決方案:

1、使用a標簽替代

給出如下函數,將此函數綁定到click的事件回調中,就可以避免大部分瀏覽器對窗口彈出的攔截:

js code:

function newWin(url, id) {          var a = document.createElement('a');          a.setAttribute('href', url);          a.setAttribute('target', '_blank');          a.setAttribute('id', id);          // 防止反復添加          if(!document.getElementById(id)) document.body.appendChild(a);          a.click();}

2、使用form的submit方法打開一個頁面

這種方法需要構造一個from,然后由js代碼觸發form的submit,將表單提交到一個新的頁面,代碼較長,在這里就不寫了,大家知道有這種方案就行了。

大家注意,以上兩種方法不適合放在ajax的回調函數中,如果放在回調函數中,依然會被瀏覽器攔截。
3、終極解決方案--先彈出窗口,然后重定向

第三種方案,其實是一種變通方案,核心思想是:先通過用戶點擊打開頁面,然后再對頁面進行重定向。示例代碼如下。

js code:

xx.addEventListener('click', function () {        // 打開頁面,此處最好使用提示頁面        var newWin = window.open('loading page');        ajax().done(function() {            // 重定向到目標頁面            newWin.location.href = 'target url';        });    });

以上方法其實是打開了兩個地址,所以建議大家打開第一個地址的時候給出一個類似‘當前頁面正在加載中,請稍后。。’的簡單提示頁,這樣可以避免打開兩次真正的目標頁面,讓用戶察覺到頁面的重定向。
解決方法二:

<a href="javascript:;" onclick="dialog();">點擊彈窗</a><script>function dialog(){    $.ajax({        url: 'url',        type: 'POST',        dataType: 'json',        async: false,  // 此處必須定義為同步        data: {param1: 'value1'},        success: function(data){            window.open(data.url, '_blank');  //發起彈窗        }    })}    </script>

該方法弊端:

實測能解決大部分瀏覽器的攔截問題,但是解決不了安全軟件的攔截(360不會攔截,但是QQ管家會攔截)

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持VeVb武林網。


注:相關教程知識閱讀請移步到HTML教程頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 末成年女av片一区二区 | www国产成人免费观看视频,深夜成人网 | 国产一区二区免费 | 成人做爰高潮片免费视频韩国 | 久久久一区二区三区四区 | 国产精品片一区二区三区 | 欧美国产综合视频 | 日本免费a∨ | 久久成人在线观看 | 免费在线观看亚洲 | 亚洲电影在线播放 | 日韩中文字幕三区 | 在线播放的av网站 | 久久国产秒 | 久久久精品福利 | 羞羞视频免费观看网站 | 久久99亚洲精品 | 成av人在线观看 | 55夜色66夜色国产精品视频 | 毛片网站网址 | 午夜色片 | 久久亚洲春色中文字幕久久 | 黄网站免费观看视频 | www久久艹 | 99视频网址 | 91精品免费在线 | 日本精品视频一区二区三区四区 | 爱高潮www亚洲精品 chengrenzaixian | 日韩视频在线视频 | av电影在线免费 | 亚洲成a人在线 | 久久久一区二区三区精品 | 国产一区二区不卡 | 亚洲一区二区三区视频免费 | 成人福利视频在线观看 | 亚洲一区二区三区视频免费 | 久久久成人一区二区免费影院 | 精品一区二区在线观看 | 欧美日韩在线免费观看 | 欧美一级三级在线观看 | 91麻豆精品国产91久久久点播时间 |