瀏覽器攔截js打開新窗口

最近做項目時，遇到的問題
“想通過javascript在瀏覽器新標簽頁或新窗口打開一個新的頁面，結果被瀏覽器大大無情給攔截了”
業務需求：前端提交數據到后端，后端返回url，然后在新窗口打開該url。
（前后端數據請求使用異步請求的方式）

---

自己常用的兩種打開新窗口的方式

1. window.open()
2. 用a標簽的target="_blank"
   在模板中插入一個a標簽，然后javascript去觸發a鏈接的click，實現跳轉。（該方法在jQuery跟js中有坑...）

//***jQuery***
<a href="http://wuliv.com" id="openNew"></a>
$(function(){
  $('#openNew').click()
})
//失敗無效

//***jQuery***
<a href="http://wuliv.com" id="openNew">
  <span><span>
</a>
$(function(){
  $('#openNew span').click()
})
//成功打開新頁面

//***javascript***
<a href="http://wuliv.com" id="openNew"></a>
document.getElementById('openNew').click()
//成功打開新頁面

　　

使用jquery來觸發a標簽點擊跳轉時，需在a標簽插入一個子標簽，然后觸發子標簽的點擊實現a標簽的跳轉(有點繞)

$("#openNew")得到的是一個jquery的對象，jquery本身對該對象的一些屬性進行了封裝，所以會導致click失效；而使用js對象 document.getElementById("a") 則不會存在該問題

onclick()也可以觸發事件，但是onclick跟click不同；
onclick觸發的是方法，而click先觸發按鈕的點擊事件，再觸發方法。
如果該對象沒有綁定onclick方法則無法被觸發，而click沒有綁定方法也可以觸發。

---

彈出新窗口失敗的原因：

1. 使用window.open()，但是定義了窗口名，也就是在打開窗口傳入name參數，因為window.open只能打開唯一的窗口名為name的窗口頁面，如果同名，則無法打開。
   解決方案：window.open()不定義窗口名

2. 使用了異步請求，通過ajax向服務器請求數據，在請求完成后再打開新窗口。因為異步請求存在延時，瀏覽器會認為不是用戶觸發的操作。
   解決方案：
   2.1 ajax請求設置成同步的方式
   如果使用了jQuery中的ajax方法做異步請求，則可以配置 async: false, 使請求方式變為同步。
   2.2 vue2.0采用的axios進行數據請求，axios沒有同步請求的設置，都是異步的。
   在axios請求之前先打開一個空白的新窗口
    var newPage = window.open() 打開的空白頁上有標題，顯示的是“無標題”
    window.open('about:blank')  標題上顯示的是'about:blank'
   接着在axios的then回調里寫入要打開的url
    window.open('about:blank') 

至此解決了瀏覽器阻止新窗口彈窗問題。
一個小問題，有這么多道道，外面世界太浮躁，還是安心寫代碼來的舒暢些。

作者：以樂之名
本文原創，有不當的地方歡迎指出。轉載請指明出處。