window.open打開網址被攔截

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>