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

【问题标题】：Bypass popup blocker when clicking image to open a new window using jquery单击图像以使用jquery打开新窗口时绕过弹出窗口阻止程序
【发布时间】：2017-07-01 08:38:12
【问题描述】：

我需要以下代码的帮助，以便在打开新窗口时绕过弹出窗口阻止程序。基本上，此代码 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;
}

【问题讨论】：

您无法绕过弹出窗口拦截器。但是您可以通过将其设置为 position: fixed 在文档的其余部分顶部显示一些 <div> 或其他元素
由于安全问题无法使用。检查此线程：stackoverflow.com/questions/22007592/…

标签： javascript jquery html css

【解决方案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');
});

【讨论】：

执行上述操作时会打开页面，但是太快了。如果我将毫秒更改为 1000，则会有 1 秒的延迟，动画会关闭，并且不会打开任何页面。有没有办法调整它，让动画在你点击后立即消失，然后在动画完成后打开页面（大约 1700 年）？

【解决方案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
});

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

【讨论】：