window.open開啟網址被攔截

標籤： js

坑位

通過window.open開啟一個網址，在火狐和IE系列瀏覽器下會攔截掉，除非使用者主動點選允許才會成功，這樣使用者體驗基本是噁心到產品的，而產品又不希望通過location.href來解決。

Why

應該是瀏覽器的安全案例策略有關，當瀏覽器檢測到非使用者操作產生的新彈出視窗，則會對其進行阻止。因為瀏覽器認為這可能是一個廣告，不是一個使用者希望看到的頁面

解決方案

1 使用a標籤替代，動態生成一個a標籤，再把要跳轉的地址賦與href,再主動觸發它的click事件,或者在頁面底部寫一個樣式為display:none的a標籤，再手動觸發點選事件。

/**
 * 
 * @param {string} url 要跳轉的url
 */
function newWin(url) {  
  var aElement = document.createElement("a");  
  aElement.setAttribute("href",url);  
  aElement.setAttribute("target","_blank");  
  aElement.click();  
}

2 通過表單提交來跳轉,通過設定表單action為跳轉地址，新視窗提交target="_blank"來實現。

<form id="testform" target="_blank" action="https://www.baidu.com" method="get"></form>
  <button id="testbtn">點選跳轉</button>
  <script type="test/css">
    document.querySelector("#testbtn").onclick = function() {
      document.querySelector("#testform").submit()
    }
  </script>