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

问题描述 投票:12回答:9

[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);
        }
    });
jquery ajax popup
9个回答
8
投票

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

 $.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的async选项设置为false,否则可以在收到响应之前评估$ .ajax调用之后的代码。


17
投票

正如几个人指出的那样,已接受的答案不再有效。根据aidiakapi的评论,我通过首先打开窗口来使用变通方法。

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

然后进行ajax业务,并在done()函数中,打开具有该名称的页面。

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

无论您是否异步执行,这也不重要。


7
投票

您的代码以Firefox和chrome返回这些:

Firefox:“ Firefox阻止了该站点打开弹出窗口。”Chrome:“弹出式窗口已阻止”

要解决此问题,只需在ajax调用中添加async:false。

$.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调用完成。


2
投票

Firefox会基于导致javascript代码运行的事件来阻止弹出窗口;例如,它将允许打开由onclick触发的弹出窗口,但不允许由setTimeout触发的弹出窗口打开。多年来,由于广告商试图绕过firefox的弹出窗口阻止程序,它变得有些复杂。


1
投票

您仍然可以在成功事件中包含代码,但是异步将必须为false。


1
投票

按照本文中描述的方法:

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

简而言之,方法是:

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

1
投票
 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);
    }
});

0
投票

如果您放置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);
    }
});

0
投票

这对我有用。

$(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";
            });
        });
    });
© www.soinside.com 2019 - 2024. All rights reserved.