使用window.open開啟新視窗被瀏覽器攔截的解決方案

Francis發表於2019-02-16
瀏覽器

問題描述：

程式碼中直接使用window.open(`//www.baidu.com`, `_blank`);會被瀏覽器視窗攔截

原因
瀏覽器為了維護使用者安全和體驗，在JS中直接使用window.open(url，”_blank”)來開啟新的連結是會被攔截的。
通常專案需要在ajax非同步請求完成後來開啟新連結，下面提供幾種解決方案

解決方案

1.最常用的（在ajax非同步請求成功後開啟新視窗）

 //先在ajax函式之前開啟新視窗後再載入url
    $(`#btn`).click(function () {
        // 開啟頁面，此處最好使用提示頁面
        var newWin = window.open();
        newWin.document.body.innerHTML="正在載入中......";
        $.ajax({
            url: `www.###.com`,
            success: function (url) {
                // 重定向到目標頁面
                newWin.location.href = url;
            }
        })
    });

2.利用a標籤跳轉，能解決大多數瀏覽器相容問題，但是這種方不適用於ajax非同步請求回撥中開啟新視窗,在ajax非同步請求完成後呼叫無效(使用者點選事件觸發)

  function newWin(url){ //新視窗開啟
        var a = document.createElement(`a`);
        a.setAttribute(`href`, url);
        a.setAttribute(`style`, `display:none`);
        a.setAttribute(`target`, `_blank`);
        document.body.appendChild(a);
        a.click();
        a.parentNode.removeChild(a);
    };
     document.body.addEventListener(`click`, function() {
           newWin(`http://www.baidu.com`);
        });

相關文章