兼容浏览器点击链接问题

0.背景

大部分现代的浏览器（Chrome/Firefox/IE 10+/Safari）都默认开启了阻止弹出窗口的策略，原因是window.open被广告商滥用，严重影响用户的使用。这个阻止弹出窗口的操作，并不是直接封杀window.open()，而是会根据用户的行为来判断这次window.open()是否属于流氓操作。但是开发中我们有时候需要去打开一个新的窗口链接，这个时候我们需要绕过去,主要有以下几种方案：

1.解决方案

1.1 创建 超链接DOM

超链接可以绕过这个window.open，但是我们又不能让用户感知到有超链接a标签的存在，因为假设window.open是一个自动的行为，那么显然不能让用户自己再点击a标签实现跳转，因此可以使用创建dom来实现：

export function createALinkOpen(href: string, target?: string, setAttrsForALink?: (a: HTMLAnchorElement) => void) {
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = href
  if (target) {
    a.target = target
  }
  if (setAttrsForALink) {
    setAttrsForALink(a)
  }
  document.body.appendChild(a)
  a.click()
  document.body.removeChild(a)
}

1.2 方案二：提前声明window对象

非要用window.open()！—提前声明新创建的window对象！就可以跳转了！

let newWindow = window.open('', '_blank');
axios.get('xxxxxx').then((url) => {newWindow.location = url;
});

1.3 方案三：window.href替代open

如果不是一定要打开新窗口，可以使用window.href = url来代替window.open