Question

在打开新窗口时，我需要以下代码帮助绕过弹出窗口阻止程序。基本上这个代码transformY在点击时旋转图像，然后在延迟打开网页后。它工作正常，但弹出窗口拦截器阻止它。我知道有办法让它绕过它，但我还在学习，不知道自己在做什么。

当前的jQuery：

$(function rotate1(){
    $("#rotate1").click(function() {
    $("#rotate1").toggleClass("spinEffect");
    setTimeout(function() {
        window.open("http://google.com"); }, 1700); });
});

html是：

<div id="rotate1"><img src="Placeholder.jpg" alt="Project 1"></div>

css是：

.spinEffect{
    transform: rotateY(360deg);
    -webkit-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    transition: 1.5s;
}

Answer 1

如果打开选项卡/弹出窗口的命令来自可信任事件，浏览器将仅打开选项卡/弹出窗口而不显示弹出窗口阻止程序。这意味着用户必须主动单击某处以打开弹出窗口。在你的情况下，你有可信任的事件（点击），但你通过调用函数setTimeout（）丢失了事件上下文。有一种方法来欺骗浏览器。您可以创建一个简单的while循环来代替使用setTimeout，它将执行延迟，

$(function rotate1(){
$("#rotate1").click(function() {
$("#rotate1").toggleClass("spinEffect");
var date1 = new Date(),
            date2 = new Date(),
            timer = 500; //Milliseconds

        while (date2.valueOf() < date1.valueOf() + timer) {
            date2 = new Date();
        }

    window.open("http://google.com", '_blank');
});

Answer 2

然后试试这个，

$(function rotate1(){
    $("#rotate1").click(function() {
    $("#rotate1").toggleClass("spinEffect");
    $("#rotate1").addEventListener("animationend",function() {
        window.open("http://google.com");
    }); //standard syntax
    $("#rotate1").addEventListener("webkitAnimationEnd",function() {
        window.open("http://google.com");
    }); // for Chrome and Safari
});

当CSS动画完成时会发生animationend事件。

单击图像以使用jquery打开新窗口时绕过弹出窗口阻止程序

2 个答案: