在項目開發過程中,我們經常會碰到通過接口返回一個地址,同時在新的tab頁面打開一個網址的情況,最直觀的想法就是通過window.open(url)的方式,打開一個新的頁面,但是大部分瀏覽器會遭遇攔截。因為大部分現代的瀏覽器(泛指 Chrome / Firefox / IE 10+ / Safari)都默認開啟了阻止彈出窗口的策略,原因是 window.open 被廣告商濫用,嚴重影響用戶的使用。這個阻止彈出窗口的操作,並不是直接封殺 windw.open(),而是會根據用戶的行為來判斷這次 window.open() 是否屬於流氓操作。
但是對用戶來說,不能要求用戶都來通過攔截。何況當出現攔截時,很多小白根本不知道發生了啥,不知道在哪里看被攔截的頁面,百思不得其解,因此我們還是要通過代碼來解決這個問題。
方式一:jQuery來幫忙
大部分前端開發都對jQuery比較熟悉,所以我們先以jQuery解決這個問題。jquery是提供了模擬click事件的方法的,$(selector).click()。只不過這里我們要注意的是當要觸發a標簽點擊的時候,<a>標簽內一定要有內容,並且要模擬里面的內容被點擊而不是<a></a>被點擊。
方式二:HTMLElement.click()
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click
按照文檔里面的介紹,HTMLElement.click()是用來模擬click的方法。這種方法的兼容性如下。
PC
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 20[3] | (Yes) | 5[1] | (Yes) | (Yes)[2] | 6[3] |
input@file (limited) |
(Yes) | (Yes) | 4 | (Yes) | 12.10 | (Yes) |
input@file (full) |
(Yes) | (Yes) | 4 | (Yes) | No support | (Yes) |
Mobile
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | No support | ? | (Yes) | ? | ? | ? | ? |
方式三:createEvent + initEvent + dispatchEvent
document.createEvent用於創建事件,在DOM Level 2 的事件中就有HTMLEvents,MouseEvents,UIEvents事件類型。
initEvent()方法用於初始化通過DocumentEvent接口創建的Event的值。
dispatchEvent則是觸發對應元素上面的某個事件。
方式四:后端重定向
這種方式需要后端協作,先提供一個接口地址,前端通過a標簽跳轉到該地址,后端通過運算之后,直接重定向到目標地址,這也是方便快捷的方法。
