浏览器兼容之window.open

时间:2022-01-10 来源:未知网络 作者:996建站网

作者:TYANer前言

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查询方法的兼容性

验证方式:打开caniuse.com/ ,查询window.open。

验证结果:caniuse.com/#

浏览器兼容之window.open插图

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

2)调用window.open方法

验证方式:在下载页面写一个测试按钮,点击后执行以下方法。

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

浏览器兼容之window.open插图1

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序