浅谈延时跳转，以及为何会被拦截

导入

这里我懒得写了，所以引用一下开往 5 月博客 的相关内容。

关于部分主题的弹窗问题

近日，开往维护组在审查时发现，部分站点在一个潜在的用户体验问题：当访客点击位于该主题顶部的“开往”入口后，待倒计时结束，部分浏览器会错误地将此操作判定为弹窗行为，并因此自动进行拦截处理。

根据我们的调查，我们发现：这些站点中，有一部分使用了 hexo-theme-anzhiyu 和 halo-theme-hao 这两款主题。分析这两个主题的跳转代码，不难发现：它们的执行方式是在倒计时后、通过 window.open("link", "_blank") 新建一个空白页。但是，由于在此之前window.open() 被一些广告商滥用，严重影响了用户的使用，因此，大多数浏览器不允许在用户行为后的一段时间才执行 window.open()。

为了确保用户能够顺畅地访问目标页面，我们强烈建议相关站点的站长对主题配置进行必要的修改，以避免此类跳转被浏览器误判为弹窗，从而影响用户体验。

window.open() 与其历史

window.open() 是一个 JavaScript 方法，用于在浏览器中打开指定链接或路径的新窗口或新标签页。和 HTML 中的 <a> 标签不同的是，window.open() 只要能够被执行，就能创建一个新窗口或新标签页。

window.open() 在 20 世纪 90 年代和 21 世纪初期的互联网早期阶段非常流行，同时期流行的还有大家所熟知的 Meta Keywords。但是，Meta Keywords 既然能被滥用、争取更好的 SEO，那么 window.open() 也逃不过被滥用的命运。上面说到：window.open() 只要能够被执行，就能创建一个新窗口或新标签页，所以一些网站就会利用 window.open() 自动弹出广告窗口，甚至是钓鱼网站。前者可以严重影响用户体验，而后者就有机会窃取用户的敏感信息。

浏览器开发商自然意识到了滥用情况的严重性。所以，他们开始应用了一些措施：

• 浏览器会检测并阻止非用户主动操作的 window.open() 调用；
• 浏览器在这方面引入了更严格的控制机制，首先是弹出相关提示，其次是让用户选择是否允许其弹出窗口。

与 setTimeout() 一起使用...?

虽然浏览器允许用户主动操作的 window.open() 调用，但请不要忘了本篇文章的一个关键词：延时跳转。

一般来讲，实现延时跳转的方法就是将 window.open() 与 setTimeout() 一起使用。但是，根据我的调查，一些站点的延时时间已经来到了 5 秒，已经不在用户交互的范畴之内，所以就会被浏览器直接拦下来。

解决方案

说了这么多，延时跳转该做还是要做的。以下倒是一些可用的解决方法：

粗暴点，直接内页跳转

window.location.href 是一个 JavaScript 的页面导航操作，即使延时也不会被浏览器拦截。

document.getElementById('myButton').addEventListener('click', function() {
    setTimeout(function() {
        window.location.href = 'https://www.example.com';
    }, 1000);
});

先新建窗口，再延时内页跳转

这个方案是先创建一个新窗口或新标签页，并在这个新窗口或新标签页下延时跳转。注意是在这个新建的窗口下直接访问目标链接。

document.getElementById('myButton').addEventListener('click', function() {
    var newWindow = window.open('', '_blank');
    setTimeout(function() {
        newWindow.location.href = 'https://www.example.com';
    }, 1000);
});

弹出提示，倒计时结束后呈现超链接

这是参考 DevUploads 的一个方案：当用户触发了延时跳转的事件后，站点会出现相关提示，倒计时结束后会显示出对应的超链接。