当设置了 JQuery event.proventDefault()时，绕过 window.open 上的弹出窗口阻塞器

小开

最佳答案

Popup blockers will typically only allow window.open if used during the processing of a user event (like a click). In your case, you're calling window.open later, not during the event, because $.getJSON is asynchronous.

You have two options:

Do something else, rather than window.open.

Make the ajax call synchronous, which is something you should normally avoid like the plague as it locks up the UI of the browser. $.getJSON is equivalent to:

$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});

...and so you can make your $.getJSON call synchronous by mapping your params to the above and adding async: false:

$.ajax({
url:      "redirect/" + pageId,
async:    false,
dataType: "json",
data:     {},
success:  function(status) {
if (status == null) {
alert("Error in verifying the status.");
} else if(!status) {
$("#agreement").dialog("open");
} else {
window.open(redirectionURL);
}
}
});

Again, I don't advocate synchronous ajax calls if you can find any other way to achieve your goal. But if you can't, there you go.

Here's an example of code that fails the test because of the asynchronous call:

~~Live example | Live source~~ (The live links no longer work because of changes to JSBin)

jQuery(function($) {
// This version doesn't work, because the window.open is
// not during the event processing
$("#theButton").click(function(e) {
e.preventDefault();
$.getJSON("http://jsbin.com/uriyip", function() {
window.open("http://jsbin.com/ubiqev");
});
});
});

And here's an example that does work, using a synchronous call:

~~Live example | Live source~~ (The live links no longer work because of changes to JSBin)

jQuery(function($) {
// This version does work, because the window.open is
// during the event processing. But it uses a synchronous
// ajax call, locking up the browser UI while the call is
// in progress.
$("#theButton").click(function(e) {
e.preventDefault();
$.ajax({
url:      "http://jsbin.com/uriyip",
async:    false,
dataType: "json",
success:  function() {
window.open("http://jsbin.com/ubiqev");
}
});
});
});

小开

you can call window.open without browser blocking only if user does directly some action. Browser send some flag and determine that window opened by user action.

So, you can try this scenario:

var myWindow = window.open('')

draw any loading message in this window

when request done, just call myWindow.location = 'http://google.com'

小开

The observation that the event had to be initiated by the user helped me to figure out the first part of this, but even after that Chrome and Firefox still blocked the new window. The second part was adding target="_blank" to the link, which was mentioned in one comment.

In summary: you need to call window.open from an event initiated by the user, in this case clicking on a link, and that link needs to have target="_blank".

In the example below the link is using class="button-twitter".

$('.button-twitter').click(function(e) {
e.preventDefault();
var href = $(this).attr('href');
var tweet_popup = window.open(href, 'tweet_popup', 'width=500,height=300');
});

小开

try this, it works for me,

$('#myButton').click(function () {
var redirectWindow = window.open('http://google.com', '_blank');
$.ajax({
type: 'POST',
url: '/echo/json/',
success: function (data) {
redirectWindow.location;
}
});
});

Is fiddle for this http://jsfiddle.net/safeeronline/70kdacL4/1/

小开

I had this problem and I didn't have my url ready untill the callback would return some data. The solution was to open blank window before starting the callback and then just set the location when the callback returns.

$scope.testCode = function () {
var newWin = $window.open('', '_blank');
service.testCode().then(function (data) {
$scope.testing = true;
newWin.location = '/Tests/' + data.url.replace(/["]/g, "");
});
};

小开

Windows must be created on the same stack (aka microtask) as the user-initiated event, e.g. a click callback--so they can't be created later, asynchronously.

However, you can create a window without a URL and you can then change that window's URL once you do know it, even asynchronously!

window.onclick = () => {
// You MUST create the window on the same event
// tick/stack as the user-initiated event (e.g. click callback)
const googleWindow = window.open();


// Do your async work
fakeAjax(response => {
// Change the URL of the window you created once you
// know what the full URL is!
googleWindow.location.replace(`https://google.com?q=${response}`);
});
};


function fakeAjax(callback) {
setTimeout(() => {
callback('example');
}, 1000);
}

Modern browsers will open the window with a blank page (often called about:blank), and assuming your async task to get the URL is fairly quick, the resulting UX is mostly fine. If you instead want to render a loading message (or anything) into the window while the user waits, you can use Data URIs.

window.open('data:text/html,<h1>Loading...<%2Fh1>');

小开

This code help me. Hope this help some people

$('formSelector').submit( function( event ) {


event.preventDefault();


var newWindow = window.open('', '_blank', 'width=750,height=500');


$.ajax({


url: ajaxurl,
type: "POST",
data: { data },


}).done( function( response ) {


if ( ! response ) newWindow.close();
else newWindow.location = '/url';


});
});

小开

Try using an a link element and click it with javascriipt

<a id="SimulateOpenLink" href="#" target="_blank" rel="noopener noreferrer"></a>

and the script

function openURL(url) {
document.getElementById("SimulateOpenLink").href = url
document.getElementById("SimulateOpenLink").click()
}

Use it like this

//do stuff
var id = 123123141;
openURL("/api/user/" + id + "/print") //this open webpage bypassing pop-up blocker
openURL("https://www.google.com") //Another link

小开

var url = window.open("", "_blank");
url.location = "url";

this worked for me.

小开

I am using this method to avoid the popup blocker in my React code. it will work in all other javascript codes also.

When you are making an async call on click event, just open a blank window first and then write the URL in that later when an async call will complete.

const popupWindow = window.open("", "_blank");
popupWindow.document.write("<div>Loading, Plesae wait...</div>")

on async call's success, write the following

popupWindow.document.write(resonse.url)