[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);
}
});
只需在成功回调中打开新窗口:
$.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调用之后的代码。
正如几个人指出的那样,已接受的答案不再有效。根据aidiakapi的评论,我通过首先打开窗口来使用变通方法。
window.open("about:blank", "myNewPage");
然后进行ajax业务,并在done()
函数中,打开具有该名称的页面。
window.open("/foo.html", "myNewPage");
无论您是否异步执行,这也不重要。
您的代码以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调用完成。
Firefox会基于导致javascript代码运行的事件来阻止弹出窗口;例如,它将允许打开由onclick
触发的弹出窗口,但不允许由setTimeout
触发的弹出窗口打开。多年来,由于广告商试图绕过firefox的弹出窗口阻止程序,它变得有些复杂。
您仍然可以在成功事件中包含代码,但是异步将必须为false。
按照本文中描述的方法:
window.open without popup blocker using AJAX and manipulating the window.location
简而言之,方法是:
onclick
事件启动。window.open
打开一个新窗口,可能最初没有任何内容---并存储对该窗口的引用,以便以后使用。window.location.replace
使用所需的URL来操纵已经打开的窗口的URL。 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);
}
});
如果您放置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);
}
});
这对我有用。
$(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";
});
});
});