在处理项目时,遭遇了浏览器拦截`window.open`弹出窗口的情况。在本地的测试环境中一切正常,但当部署到服务器上时,火狐浏览器会显示拦截提示,而360浏览器则没有明显提示。这让我们意识到,浏览器的安全机制在起作用,尤其是当检测到非用户主动触发的新窗口打开时。
深入研究发现,当`window.open`被用于用户事件内部或页面加载时,它通常不会被拦截。一旦我们将弹出代码移至ajax或异步代码内,就会出现被浏览器拦截的情况。
为了解决这一问题,我们采用了自定义的`window.open`方法来设定新窗口的外观、尺寸及弹出位置。参数详解如下:
`window.open`:用于弹出新窗口的命令;
`newwindow`(可选):弹出窗口的名称,若不提供则可用空字符串''代替;
`height`与`width`:定义新窗口的高度和宽度;
`top`与`left`:决定新窗口在屏幕上的位置;
`toolbar=no/yes`、`menubar`、`scrollbars`、`resizable=no/yes`及`location=no/yes`等属性:用于定制新窗口的界面元素,如是否显示工具栏、菜单栏、滚动栏,是否允许改变窗口大小及显示地址栏等。
原因分析表明,当浏览器检测到非用户操作产生的新窗口时,为防止可能是广告等不受欢迎的内容,会进行拦截。
为此,我们提供了几种解决方案:
1. 使用a标签替代:可以将需要触发的点击事件绑定到一个a标签上,然后通过js捕获该点击事件并避免浏览器拦截。
2. 使用form的submit方法:通过构造一个表单并由js触发其提交,以此打开一个新页面。但需注意,此方法若放在ajax回调函数中仍会被浏览器拦截。
3. 终极解决方案–先弹出后重定向:此方案的核心思想是先通过用户点击打开一个临时页面,然后再进行页面重定向。为避免用户察觉到重定向,建议在打开第一个页面时显示一个简单的提示信息。
还补充了JS打开新窗口的两种方式:一种是通过超链接等效于特定js代码的方式实现,另一种则是直接使用js代码进行操作。对于关闭新窗口的方法也进行了简要说明。