完美解决回车事件使用window.open()打开新窗口行为被浏览器拦截的问题【亲测有效】

目录 

项目场景

问题描述

原因分析

解决方案

---

项目场景

 在项目中需要做一个按下回车键后新窗口的跳转，我使用的是window.open这个方法来进行新窗口的跳转的，在谷歌浏览器中试了是没有问题的，但是当我在火狐浏览器中测试的时候发现被拦截了，也许是因为这个行为不属于用户主动的就被拦截了，那么在实际情况中这种情况对用户来说是不友好的，体验极差，接下来就看下如何解决该问题的吧！

---

问题描述

下面我用一个小案例演示一下项目中该问题出现的情况：

• 谷歌浏览器：

• 火狐浏览器：

 通过以上对比可以发现在火狐浏览器里打开新窗口的行为是被拦截的，下面看下如何解决的吧！

---

原因分析

我测试了之后发现只有在使用键盘回车键才会出现拦截的情况，如果是鼠标点击是不会导致这种情况发生的。出现这种情况的原因应该是浏览器认为这是一个广告或者别的东西，反正就是认为这个内容不应该展示给用户。

 在我测试了鼠标的点击事件触发不会被浏览器拦截之后我试了下模拟点击的方式，不管是input还是button又或者是a标签，都没有效果，只要是通过键盘回车键触发的都会被拦截，后面我尝试着使用form表单来模拟点击触发也没用。但是我发现在form表单里定义了一个button之后，只要光标焦点在form这块区域内，不需要定义触发键盘的事件，就可以直接触发键盘回车事件。

---

解决方案

在上面的原因分析中说过鼠标的焦点只要在forn表单这个范围内是可以直接触发键盘回车事件的，而不需要我们手动定义，代码格式参考以下：

    <!-- get请求方式  target="_blank"意思是新窗口打开 -->
    <form action="https://www.baidu.com/baidu" method="get" target="_blank">
        <!-- 这个input框可以不要，因为我做一个百度的搜索
            格式是：https://www.baidu.com/baidu?wd=
            因此我项目中需要这个框
        -->
        <input type="text" name="wd" value="" style="display: none;">
        <!-- 分割线 -->


        <!-- 这里放置你需要通过回车键触发的元素
            比如我是要在搜索框的位置触发
            那么我就需要把搜索框放到这个位置
        -->


        <!-- 分割线 -->
        <!-- 一定要有这个按钮否则无效 -->
        <button type="submit" style="display: none;"></button>
    </form>

 让我们看下效果：

• 谷歌浏览器：

•  火狐浏览器

 通过以上演示可以看到谷歌浏览器没有受影响，火狐浏览器也做到了键盘回车搜索了！

🥇原创不易，还希望各位大佬支持一下！
👍点赞，你的认可是我创作的动力 ！
🌟收藏，你的青睐是我努力的方向！
✏️评论，你的意见是我进步的财富！