Window. open is blocked by the browser.

Window. open is blocked by the browser.
Symptom

Recently, windows was used in the project. the interception of open by the browser is very depressing. Although the page can be opened in your own environment, it is not required for users to intercept the page. What's more, when an interception occurs, a lot of white people don't know what happened, and they don't know where to view the blocked page. It's a sad reminder ~~.

In addition, we can find that,Window. open is not blocked when an event is triggered or loaded for the user. Once the pop-up code is moved to ajax or an asynchronous code, it immediately becomes blocked..

Cause Analysis & in-depth research

When the browser detects a new pop-up window generated by a non-user operation, it will block it. Because the browser does not think this is a page that the user wants to see.

For example, the following code is executed directly in js:

// Open a page window. open ('// www.baidu.com', '_ blank ');

Browser	Ie8	Chrome 40	Firefox 34	Opera 27	Safari 5.1.7
Disable pop-up	N	N	Y	Y	Y

For the following code:

        document.body.addEventListener('click', function() {            window.open('//www.baidu.com', '_blank');        });

All browsers will not intercept.

In summary, the browser's judgment on the interception timing is inconsistent, and the response to the Code placed in the ajax callback is different, so we will not repeat it here. However, the window to be popped up by the browser is not what programmers want.

Solution: 1. Use the tag instead.

The following function is provided to bind the function to the Event Callback of click to avoid blocking of window pop-up by most browsers:

Function newWin (url, id) {var a = document. createElement ('A');. setAttribute ('href ', url);. setAttribute ('target', '_ blank');. setAttribute ('id', id); // prevent repeated if (! Document. getElementById (id) {document. body. appendChild (a);} a. click ();}

2. Use form's submit method to open a page

In this method, you need to construct a from, and then trigger the form submit by the js Code, submit the form to a new page. The code is long and will not be written here, everyone knows that this solution is enough.

Note that the above two methods are not suitable for ajax callback functions. If they are placed in the callback function, they will still be intercepted by the browser. 3. Final Solution-first pop up the window and then redirect

The third solution is actually an alternative. The core idea is:First click to open the page, and then redirect the page. The sample code is as follows.

Xx. addEventListener ('click', function () {// open the page. It is best to use the prompt page var newWin = window. open ('loading page'); ajax (). done (function () {// redirect to the target page newWin. location. href = 'target url ';});});

The above method actually opens two addresses, so it is recommended that you give an address similar to 'the current page is loading, please wait .. 'To avoid opening two real target pages and allowing users to notice page redirection..

For more information, see the zakwu website.