兼容浏览器_浏览器兼容之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') }