Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to solve the problem of window.open being intercepted by browsers". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to solve the problem of window.open being intercepted by browsers" can help you solve your doubts.

Phenomenon

Recently, when I was working on a project, I encountered the situation of using window.open to be blocked by the browser, which made people extremely depressed. Although the page can be released in their own environment, users cannot be required to intercept. What's more, when there is an intercept, many rookies don't know what happened and don't know where to look at the intercepted page.

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

Cause Analysis & in-depth study

When the browser detects a new pop-up window resulting from a non-user action, it blocks it. Because the browser thinks that this is not a page that users want to see.

For example, the code that is executed directly in js is as follows:

Js code:

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

Browser ie8 chrome 40 firefox 34 opera 27 safari 5.1.7

Whether to block the pop-up N N Y Y Y and for the following code:

Js code:

Document.body.addEventListener ('click', function () {window.open (' / / www.baidu.com','_ blank');})

None of the browsers will block it.

To sum up, different browsers have different judgments about the timing of interception, and the response to the code placed in the ajax callback is different, so I won't repeat it here. However, being intercepted by the browser to pop up the window in our code is not what the programmer wants.

Solution:

1. Replace with a tag

Give the following function, which can be bound to the event callback of click to avoid the interception of window pop-up 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 of if (! document.getElementById (id)) document.body.appendChild (a); a.click ();}

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

This method needs to construct a from, and then the js code triggers the submit of the form to submit the form to a new page. The code is long, so I won't write it here. We just know that there is such a solution.

Note that the above two methods are not suitable to be placed in the callback function of ajax. If you put them in the callback function, they will still be blocked by the browser.

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

The third scheme is actually a workaround, the core idea is: first click to open the page by the user, and then redirect the page. The sample code is as follows.

Js code:

Xx.addEventListener ('click', function () {/ / Open the page, where 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 when you open the first address, give a similar to 'the current page is loading, please wait a minute.' This avoids opening the real target page twice and makes the user aware of the redirection of the page

Solution 2:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.