相容浏覽器_浏覽器相容之window.open

前言

window.open是一種常見的用于打開新頁面的方法，通常用于彈窗下載下傳功能的實作。但是并非所有的浏覽器都對window.open有良好的支援，在某些情況會出現window.open方法不可用的現象。 下面将通過一個例子，介紹如何排查和修複window.open的浏覽器相容問題。

問題描述

作業系統：Android 10; Pixel 4 Build/QQ2A.200405.005

Chrome版本：81.0.4044.111

現象描述：在下載下傳頁面點選“下載下傳安裝”按鈕後，頁面閃爍一下，未彈出下載下傳确認提示或執行下載下傳操作，右上角的頁數短暫的+1後又恢複原值。

原因排查

這裡需要使用Chrome浏覽器的遠端調試功能，進而通過計算機調試 Android 裝置上的實時内容。具體的使用方法參見官方文檔，這裡就不贅述了。

通過以下測試，排除了幾種可能的原因：

1、使用者禁用了“彈出式視窗和重定向”

驗證方式：在設定-網站設定，允許“彈出式視窗和重定向”後，在下載下傳頁面點選“下載下傳安裝”

驗證結果：未彈出下載下傳确認提示或執行下載下傳操作。

2、浏覽器不支援window.open方法

1)通過caniuse查詢方法的相容性

驗證方式：打開https://caniuse.com/ ，查詢window.open。

驗證結果：https://caniuse.com/#search=window.open

可以看到，除了Firefox和Firefox for Android外，大部分的浏覽器都是未明确是否支援windoe.open方法的。

2)調用window.open方法

驗證方式：在下載下傳頁面寫一個測試按鈕，點選後執行以下方法。

test() { window.open('https://www.baidu.com/') console.log('test') }