OnClick和新标签打开,重定向(页面可见性API)

时间:2018-04-27 22:08:25

标签: javascript redirect visibility

当有人点击我们网站上广告(在IFrame中)的链接时,我正在尝试创建重定向(感谢页面)。我想我可以通过简单的onclick事件和检测是否打开新选项卡来执行此操作,因为我无法监听iframe中的链接上的onclick。我找到了页面可见性API,这似乎是正确的使用(因为.blur在点击iframe时被激活,即使他们点击iframe中的空格而不是URL)但是我所有的脚本发现有点太复杂了我无法解码并简化为我可以使用的东西。这是我想要做的事情的一个例子,以及我认为应该做的事情,但它似乎并没有起作用。

document.onclick = function() {
    if (document.hidden) {
        console.log("New window opened");
        window.location.replace("www.example.com/thanks");
    } else {
        console.log("Click");
        // Do nothing
        return;
    }
}

当我点击页面时,我会得到"点击"响应,但是当我点击链接并打开一个新窗口时,我没有被重定向,也没有得到重定向。

编辑:我现在看到我的问题是我在iframe中根本没有检测到任何点击,即使是整个文档监听器也是如此。有没有好办法解决这个问题?

1 个答案:

答案 0 :(得分:0)

好!我实际上能够通过更多的试验和错误来自己解决这个问题。这是我如何做到的一个例子:

$(window).blur(function() {
    setTimeout(function() {
        if (document.hidden) {
            window.location.replace("https://example.com/thanks");
        } else {
            window.self.focus();
        }
    }, 200);
});

使用window.blur而不是window.onclick,这样我就确定有人在iframe中点击了。如果他们在iframe中点击我,然后检查窗口是否可见。如果是,那么他们没有打开新选项卡,我将窗口设置回焦点,因为他们再次在iframe中单击。如果他们确实打开了一个新标签(窗口被隐藏),那么我将它们发送到我们的感谢页面!我还设置了一个breif超时,以允许浏览器时间识别该窗口是隐藏的(没有它它不起作用!)。