window.open 兼容 PC 和手机端

window.open 由于浏览器安全策略的原因,在 PC 和手机端的表现可能会出现不同

导致不同的根本原因

  1. 由于 window.open 被不少广告商滥用于弹出垃圾广告
  2. 所以目前主流浏览器都对 window.open 的执行做了限制

限制后的表现

  1. 浏览器只允许在用户明确操作后触发的事件里执行 window.open
  2. 不允许在用户无意识的前提下直接打开某个页面

一劳永逸的解决办法

  1. 当用户点击后,首先打开一个空的新页面,并且将该页面对象保存
  2. 之后执行一个延迟,这里也可以是一个异步操作的回调
  3. 延迟/回调 中在对之前保存的页面对象地址进行修改即可
  4. 为了避免某些浏览器将 open 完全禁用,此处需要判断是否为空,为空则只能在当前页面打开期望链接
1
2
3
4
5
6
7
8
9
10
let open = window.open('about:blank')

if (open === null || typeof(open) === 'undefined') {
  window.location.href = url
  return
}

setTimeout(() => {
  open.location = url
}, 300)