window.open()遇到的坑

window.open()遇到的坑

在做一个弹出新窗口打开的需求，发现window.open()被拦截了.不能直接跳出到新的界面，需要用户手动放行。 chrom浏览器出现的就是下面这种效果：

解决方案:需要在chrom高级设置-内容设置-允许弹出式窗口和重定向

下面2种是用户手动触发的：

First:

 <button id="btn" onClick="openWindow()"> onClick me</button>
    <script>
        function openWindow() {
            document.getElementById('btn').onclick = function () {
                window.open('http://www.baidu.com',"_blank")
            }
        }
    </script>
复制代码

结果：当用户手动点击按钮的时候，直接打开个新窗口

Sencond:

 <button id="btn" onClick="openWindow()"> onClick me</button>
    <script>
        function openWindow() {
            document.getElementById('btn').onclick = function () {
                setTimeout(function () {
                    window.open('http://www.baidu.com');
                }, 1000)
            }
        }
    </script>
复制代码

结果：浏览器如果判断到这个跳出是异步的，从而会拦截掉页面的跳出的操作

解决方案： 同步操作换下：采用创建a标签，触发点击操作

 <button id="btn" onClick="openWindow('http://www.baidu.com','jjj')"> onClick me</button>
   <script>    
       function openWindow(url, id) {
           var a = document.createElement('a')
           a.setAttribute('href', url)
           a.setAttribute('target', '_blank')
           a.setAttribute('id', id)
           if (!document.getElementById(id)) document.body.appendChild(a)
           a.click()
       }
   </script>
复制代码

异步操作下:先通过用户点击打开新窗口，然后再对页面进行重定向

   <button id="btn" onClick="openWindow()"> onClick me</button>
   <script>    
       function openWindow() {
           document.getElementById('btn').addEventListener('click', function () {
               var newWindow = window.open('new page')
               setTimeout(function () {
                   if (newWindow) {
                       newWindow.location.href = 'http://www.baidu.com'
                   }
               }, 1000)
           })
       }
   </script>
复制代码

需要注意的是：window.open()的返回值，如果被浏览器拦截的情况下， window.open() 的返回值就是null,这时候需要加个校验，不然会语法错误。

文章是引用了AlenQi的,自己亲测了下，非常感谢。下面是链接地址 https://juejin.im/post/5a813bc1f265da4e9a4959ff