在 jQuery ajax 成功回调中创建弹出窗口时被阻止

Question

Google Chrome 似乎阻止了我通过 jQuery 创建的弹出窗口。经过一番调查，在 ajax 调用的成功事件中调用 window.open 似乎是一个问题。有没有解决的办法？我的 jQuery ajax 调用返回要打开的 URL。所以我有点卡住了。

如果我将 window.open 放在 ajax 调用之外，它会起作用；但是，在内部（即在成功事件中）它被阻止了。我认为这与 CONTEXT 有关，但我不确定。

这是我所拥有的：

     window.open("https://www.myurl.com");  // OUTSIDE OF AJAX - no problems 
                                            // with popup

     $.ajax({
        type: "POST",
        url: "MyService.aspx/ConstructUrl",
        data: jsonData,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            // Normally loads msg.d which is the url returned from service
            // static url below is for testing
            window.open("https://www.myurl.com");  // THIS IS BLOCKED
        },
        error: function(msg) {
            // alert(error);
        }
    });

Answer 1

正如一些人指出的那样，接受的答案不再有效。根据 aidiakapi 的评论，我使用了一种解决方法，首先打开窗口。

window.open("about:blank", "myNewPage");

然后做ajax业务，在done()函数中，打开那个名字的页面。

window.open("/foo.html", "myNewPage");

这也无关紧要，如果你做异步或不。

Answer 2

只需在成功回调中打开新窗口：

 $.ajax({
    type: "POST",
    url: "MyService.aspx/ConstructUrl",
    data: jsonData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        window.open("https://www.myurl.com"); 
    },
    error: function(msg) {
        //alert(error);
    }
});

请注意，您可能必须为此将 $.ajax 的异步选项设置为 false，否则可能会在收到响应之前评估 $.ajax 调用之后的代码。

Answer 3

您的代码在 Firefox 和 chrome 中返回这些：

Firefox：“Firefox 阻止此站点打开弹出窗口。” Chrome：“弹出窗口被阻止”

要解决这个问题，只需将 async:false 添加到您的 ajax 调用中即可。

$.ajax({
type: "POST",
async: false,
url: "MyService.aspx/ConstructUrl",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(url) {
    window.open(url); 
},
error: function(msg) {
    //alert(error);
}

});

请注意 async:false 会强制 javascript 等待 jQuery ajax 结果。这意味着它会冻结 javascript，直到 ajax 调用完成。

Answer 4

Firefox 会根据导致 javascript 代码运行的事件来阻止弹出窗口；例如，它将允许打开由onclick 触发的弹出窗口，但不允许打开由setTimeout 触发的弹出窗口。多年来，随着广告商试图绕过 Firefox 的弹出窗口拦截器，它变得有点复杂。

Answer 5

您仍然可以在成功事件中包含代码，但 async 需要为 false。

Answer 6

按照这篇文章中描述的方法：

window.open without popup blocker using AJAX and manipulating the window.location

简而言之，方法是：

1. 您的代码必须由 onclick 事件启动。
2. 使用window.open 打开一个新窗口，最初可能没有内容，并存储对该窗口的引用，以便以后使用。
3. 在 AJAX 操作的成功回调中，使用 window.location.replace 使用所需 URL 操作已打开窗口的 URL。

Answer 7

 if you put async:true then you must do the following:

 var safariOP = window.open("https://www.myurl.com");  // DEFINE BEFORE AJAX CALLBACK 

 $.ajax({
    type: "POST",
    url: "MyService.aspx/ConstructUrl",
    data: jsonData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
      if(safariOP){
         safariOP.focus(); // IT'S OK ON SAFARI
      }
    },
    error: function(msg) {
        //alert(error);
    }
});

Answer 8

如果您输入 async:true 那么您必须执行以下操作：

var safariOp = window.open("https://www.myurl.com"); //define before callback ajax contains url .
 $.ajax({
    type: "POST",
    url: "MyService.aspx/ConstructUrl",
    data: jsonData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        //it's ok on safari
        safariOp.focus();
    },
    error: function(msg) {
        //alert(error);
    }
});

Answer 9

这对我有用。

$(document).ready(function() {
        $('#myLink').on( "click", function() {
            var myNewTab = window.open('about:blank', '_blank');
            $.ajax({
                method: "POST",
                url: "ajax.php",
                data: { name: "John", location: "Boston" },
            })
            .done(function( msg ) {
                myNewTab.location.href = "google.com";
            });
        });
    });