Detailed explanation of the solution for window.open being intercepted by the browser

Recently, when I was working on a project, I encountered a situation where the use of window.open was intercepted by the browser, which made people extremely depressed. Although the page can be released in one's own environment, for users, users cannot be required to pass the interception. . What's more, when an interception occurs, many novices have no idea what's going on and don't know where to look at the intercepted page. It's really sad~~.

In addition, it can be found that when window.open triggers an event for the user or is loaded, it will not be intercepted. Once the pop-up code is moved to ajax or a piece of asynchronous code, it will be intercepted immediately.

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

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

js code:

 //Open a page directly window.open('//www.baidu.com', '_blank');

Browser ie8 chrome 40 firefox 34 opera 27 safari 5.1.7

Whether to prevent NNYYY from popping up and for the following code:

js code:

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

All browsers will not block it.

To sum up, each browser has different judgments on interception timing, and the response to the code placed in the ajax callback is different, so I won’t go into details here. However, it is not what programmers want to have the pop-up window in our code intercepted by the browser.

1. Use a tag instead

Given the following function, binding this function to the click event callback can avoid the interception of window pop-ups by most browsers:

js code:

 function newWin(url, id) { var a = document.createElement('a'); a.setAttribute('href', url); a.setAttribute('target', '_blank'); a.setAttribute('id ', id); // Prevent repeated addition if(!document.getElementById(id)) document.body.appendChild(a); a.click();}

2. Use the submit method of the form to open a page

This method requires constructing a from, and then triggering the submit of the form by the js code, and submitting the form to a new page. The code is long, so I won’t write it here. Everyone knows that there is such a solution.

Please note that the above two methods are not suitable to be placed in the ajax callback function. If they are placed in the callback function, they will still be intercepted by the browser.

3. The ultimate solution - pop up the window first, then redirect

The third solution is actually a workaround. The core idea is: first open the page through user clicks, and then redirect the page. Sample code is as follows.

js code:

 xx.addEventListener('click', function () { // Open the page, it is best to use the prompt page here var newWin = window.open('loading page'); ajax().done(function() { // Repeat Direct to the target page newWin.location.href = 'target url'; }); });

The above method actually opens two addresses, so it is recommended that you give a message similar to 'The current page is loading, please wait' when opening the first address. . 's simple prompt page, which can avoid opening the real target page twice and let users notice the redirection of the page.

Solution two:

 <a href=javascript:; onclick=dialog();>Click pop-up window</a><script>function dialog(){ $.ajax({ url: 'url', type: 'POST', dataType: 'json ', async: false, // This must be defined as synchronous data: {param1: 'value1'}, success: function(data){ window.open(data.url, '_blank'); //Initiate a pop-up window} })} </script>

Disadvantages of this method:

The actual test can solve the interception problem of most browsers, but it cannot solve the interception of security software (360 will not intercept, but QQ Butler will)

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.