window.open Browser Popup New window blocked-cause analysis and solutions

Source: Internet
Author: User

Recently in the project encountered the use of window.open by the browser to intercept the situation, in the local experiment is not a problem, to the server was intercepted, Firefox has interception prompts, 360 browser blocking hints are not, although in their own environment can be released to the page, but for users, not to require users to intercept. Not to mention when the interception, a lot of small white at all do not know what happened, do not know where to see the blocked page, baffled its solution, later checked, the browser support is not the same.

In addition, it can be found that when the window.open for the user to trigger the event inside or load, will not be intercepted, once the pop-up code moved to Ajax or a piece of asynchronous code inside, immediately appear to be intercepted performance .

Use a customizable pop-up window's look, size, pop-up position to fit the page's window.open () method, as shown in the code below:

[HTML]View PlainCopy print?
  1. <script language= "java script:>
  2. <!--
  3. window.open (' page.html ', ' newwindow ', 'height= ',width=, top=0,left=0, Toolbar=No,menubar=No,scrollbars=No,resizable=No,
  4. location=No,status=no ')
  5. Write a line
  6. -->
  7. </SCRIPT>

[HTML]View PlainCopyprint?
  1. Parameter explanation:
  2. window.open the command that pops up the new window;
  3. page.html the file name of the new window pops up;
  4. NewWindow the name of the popup window (not the file name), can be replaced by empty ″;
  5. height=100 window height;
  6. top=The pixel value of the 0 window from the top of the screen;
  7. left=0 The pixel value of the window from the left side of the screen;
  8. Toolbar=No whether the toolbar is displayed, yes is displayed;
  9. Menubar,scrollbars represents the menu bar and scroll bar;
  10. resizable=No whether the window size is allowed to change, yes is allowed;
  11. location=No whether the address bar is displayed, yes is allowed;
  12. status=No whether the information in the status bar is displayed (usually the file is already open), yes is allowed;

Cause analysis

When the browser detects a new pop-up window created by a non-user operation, it is blocked. Because the browser thinks it might be an ad, it's not a page that a user wants to see.

Solution: 1, use a tag instead

The following function, which binds the function to the click event callback, avoids most browsers blocking the popup:

[HTML]View PlainCopyprint?
  1. function Newwin (URL, id) {
  2. var a = document.createelement (' a ');
  3. A.setattribute (' href ', url);
  4. A.setattribute (' target ', ' _blank ');
  5. A.setattribute (' ID ', id);
  6. Prevent repeated additions
  7. if (!document.getelementbyid (ID)) {
  8. Document.body.appendChild (a);
  9. }
  10. A.click ();
  11. }

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

This method needs to construct a from and then trigger the form's submit by the JS code, submitting the form to a new page, such as:

[HTML]View PlainCopyprint?
    1. $ ("#tijiaos"). attr (' target ', ' _blank ');
    2. $ ("#tijiaos"). Submit ();

Note that the above two methods do not fit in the Ajax callback function, if placed in the callback function, will still be blocked by the browser.

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

The third scenario, in fact, is a workaround, the core idea is: first click on the user to open the page, and then redirect the page . The sample code is as follows:

[HTML]View PlainCopyprint?
  1. Xx.addeventlistener (' click ', function () {
  2. Open the page, it is best to use the prompt page
  3. var newwin = window.open (' loading page ');
  4. Ajax (). Done (function () {
  5. Redirect to target page
  6. newWin.location.href = ' target URL ';
  7. });
  8. });

The above method is actually open two address, so we recommend that you open the first address when giving a similar ' current page is loading, please later. ' Simple Tip page, so you can avoid opening two real target pages, allowing users to perceive the redirection of the page .

Add:

JS 2 ways to open a new window

1. Hyperlink <ahref= "Http://www.jb51.NET" title= "Scripting House" >Welcome</a>

Equivalent to JS code

Window.location.href= "Http://www.jb51.Net"; Open a window in the same current window

2. Hyperlink <ahref= "Http://www.jb51.net" title= "Script House" target= "_blank" >Welcome</a>

Equivalent to JS code

window.open ("Http://www.jb51.net"); Open a window in another new window

3. Close the new window:

This.window.opener =null;

Window.close ();

window.open Browser Popup New window blocked-cause analysis and solutions

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.