標籤:div com span 標題 資料 非同步請求 解決方案 結果 javascrip
通過javascript在瀏覽器新標籤頁或新視窗開啟一個新的頁面,結果被瀏覽器大大無情給攔截了
前端提交資料到後端,後端返回url,然後在新視窗開啟該url(前後端資料請求使用非同步請求的方式)
自己常用的兩種開啟新視窗的方式
- window.open()
- 用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開啟新視窗