瀏覽器攔截js開啟新視窗

標籤：div   com   span   標題   資料   非同步請求   解決方案   結果   javascrip   

通過javascript在瀏覽器新標籤頁或新視窗開啟一個新的頁面，結果被瀏覽器大大無情給攔截了

前端提交資料到後端，後端返回url，然後在新視窗開啟該url（前後端資料請求使用非同步請求的方式）

自己常用的兩種開啟新視窗的方式

1. window.open()
2. 用a標籤的target="_blank"
   在模板中插入一個a標籤，然後javascript去觸發a連結的click，實現跳轉。（該方法在jQuery跟js中有坑...）$(‘a‘).get(0)  注意這塊！！！！

//***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沒有Binder 方法也可以觸發。

彈出新視窗失敗的原因：

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

　　2.解決方案：window.open()不定義視窗名

　　3.使用了非同步請求，通過ajax向伺服器請求資料，在請求完成後再開啟新視窗。因為非同步請求存在延時，瀏覽器會認為不是使用者觸發的操作。

　　4.解決方案：

　　　　2.1 ajax請求設定成同步的方式

　　　　2.2如果使用了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‘)

 

瀏覽器攔截js開啟新視窗