Popups and window methods

A popup window is one of the oldest methods to show additional document to user.

Basically, you just run:

…And it will open a new window with given URL. Most modern browsers are configured to open url in new tabs instead of separate windows.

Popups exist from really ancient times. The initial idea was to show another content without closing the main window. As of now, there are other ways to do that: we can load content dynamically with fetch and show it in a dynamically generated

Also, popups are tricky on mobile devices, that don’t show multiple windows simultaneously.

Still, there are tasks where popups are still used, e.g. for OAuth authorization (login with Google/Facebook/…), because:

1. A popup is a separate window which has its own independent JavaScript environment. So opening a popup from a third-party, non-trusted site is safe.
2. It’s very easy to open a popup.
3. A popup can navigate (change URL) and send messages to the opener window.

Popup blocking

In the past, evil sites abused popups a lot. A bad page could open tons of popup windows with ads. So now most browsers try to block popups and protect the user.

Most browsers block popups if they are called outside of user-triggered event handlers like onclick .

This way users are somewhat protected from unwanted popups, but the functionality is not disabled totally.

What if the popup opens from onclick , but after setTimeout ? That’s a bit tricky.

The popup opens in Chrome, but gets blocked in Firefox.

…If we decrease the delay, the popup works in Firefox too:

The difference is that Firefox treats a timeout of 2000ms or less are acceptable, but after it – removes the “trust”, assuming that now it’s “outside of the user action”. So the first one is blocked, and the second one is not.

window.open

The syntax to open a popup is: window.open(url, name, params) :

url An URL to load into the new window. name A name of the new window. Each window has a window.name , and here we can specify which window to use for the popup. If there’s already a window with such name – the given URL opens in it, otherwise a new window is opened. params The configuration string for the new window. It contains settings, delimited by a comma. There must be no spaces in params, for instance: width=200,height=100 .

Settings for params :

• Position:
  • left/top (numeric) – coordinates of the window top-left corner on the screen. There is a limitation: a new window cannot be positioned offscreen.
  • width/height (numeric) – width and height of a new window. There is a limit on minimal width/height, so it’s impossible to create an invisible window.
• Window features:
  • menubar (yes/no) – shows or hides the browser menu on the new window.
  • toolbar (yes/no) – shows or hides the browser navigation bar (back, forward, reload etc) on the new window.
  • location (yes/no) – shows or hides the URL field in the new window. FF and IE don’t allow to hide it by default.
  • status (yes/no) – shows or hides the status bar. Again, most browsers force it to show.
  • resizable (yes/no) – allows to disable the resize for the new window. Not recommended.
  • scrollbars (yes/no) – allows to disable the scrollbars for the new window. Not recommended.

There is also a number of less supported browser-specific features, which are usually not used. Check window.open in MDN for examples.

Example: a minimalistic window

Let’s open a window with minimal set of features, just to see which of them browser allows to disable:

Here most “window features” are disabled and window is positioned offscreen. Run it and see what really happens. Most browsers “fix” odd things like zero width/height and offscreen left/top . For instance, Chrome open such a window with full width/height, so that it occupies the full screen.

Let’s add normal positioning options and reasonable width , height , left , top coordinates:

Most browsers show the example above as required.

Rules for omitted settings:

• If there is no 3rd argument in the open call, or it is empty, then the default window parameters are used.
• If there is a string of params, but some yes/no features are omitted, then the omitted features assumed to have no value. So if you specify params, make sure you explicitly set all required features to yes.
• If there is no left/top in params, then the browser tries to open a new window near the last opened window.
• If there is no width/height , then the new window will be the same size as the last opened.

Accessing popup from window

The open call returns a reference to the new window. It can be used to manipulate it’s properties, change location and even more.

In this example, we generate popup content from JavaScript:

And here we modify the contents after loading:

Please note: immediately after window.open , the new window isn’t loaded yet. That’s demonstrated by alert in line (*) . So we wait for onload to modify it. We could also use DOMContentLoaded handler for newWin.document .

Windows may freely access content of each other only if they come from the same origin (the same protocol://domain:port).

Otherwise, e.g. if the main window is from site.com , and the popup from gmail.com , that’s impossible for user safety reasons. For the details, see chapter Cross-window communication.

Accessing window from popup

A popup may access the “opener” window as well using window.opener reference. It is null for all windows except popups.

If you run the code below, it replaces the opener (current) window content with “Test”:

let newWin = window.open(«about:blank», «hello», «width=200,height=200»); newWin.document.write( «

Comments

• If you have suggestions what to improve — please submit a GitHub issue or a pull request instead of commenting.
• If you can’t understand something in the article – please elaborate.
• To insert few words of code, use the tag, for several lines – wrap them in

tag, for more than 10 lines – use a sandbox (plnkr, jsbin, codepen…)

How to Block Pop-Up Ads in Your Web Browser

Block pop-ups in Chrome, Explorer, Edge, Safari, and more

What to Know

• Chrome: Go to Settings >Site Settings >Pop-ups and redirects. Toggle Blocked (recommended) to the On position.
• Safari: Go to Preferences >Security. Select the Block pop-up windows check box.
• Firefox: Go to Options/Preferences and choose Content (Windows) or Privacy and Security (macOS) >Block pop-up windows.

Most major web browsers include features that block unwanted pop-up ads. Here’s how to block pop-up ads in Chrome, Microsoft Edge, Internet Explorer, Safari, Opera, and Firefox using any Windows, Mac, Linux, or mobile device.

Block Pop-Up Ads in Google Chrome

The process for blocking pop-up ads in the Google Chrome web browser is similar on Chrome on a Mac, PC, iOS device, or Android device.

Block Pop-Ups in Chrome on a Mac or PC

Open Chrome on a Mac or PC.

Select More (the three vertical dots located in the upper-right corner), then select Settings.

Under Privacy and security, select Site Settings.

Select Pop-ups and redirects.

Turn on the Blocked (recommended) toggle switch.

Since some pop-ups are legitimate, under Allow, add any sites for which you want to accept pop-ups. If you only want to block pop-ups from specific sites, add those sites under Block.

Block Pop-Ups in Chrome on iOS Devices

Open the Chrome app, tap More (the three dots), then tap Settings.

Tap Content Settings > Block Pop-ups.

Turn off the Block Pop-ups option.

Block Pop-Ups in Chrome on Android Devices

Open the Chrome app on the Android device.

On the right of the address bar, tap More (the three dots), then tap Settings.

Tap Site settings > Pop-ups and redirects.

Turn off Pop-ups and redirects.

Block Pop-Up Ads in Microsoft Edge

These instructions apply only to the new Microsoft Edge Chromium-based browser on Windows.

For Edge on a Mac, go to Settings, select Site Permissions > Pop-ups and redirects, then turn on the Block toggle.

Open Edge and go to Settings and more (the three dots).

Select Settings (the gear icon).

Go to Site Permissions.

Select Pop-ups and redirects.

Move the Block toggle to On.

Block Pop-Up Ads in Internet Explorer 11

These instructions apply only to Internet Explorer 11 in Windows.

Open Internet Explorer 11, select Tools (the gear icon), then select Internet Options.

On the Privacy tab, under Pop-up Blocker, select the Turn on Pop-up Blocker check box, then select OK.

Select Settings.

In the Pop-up Blocker settings dialog box, under Blocking level, set the blocking level to High: Block all pop-ups (Ctrl + Alt to override).

Select Close, then select OK.

Block Pop-Up Ads in Safari

For Macs with OS X El Capitan and higher OS X and macOS versions:

For Safari on iOS devices, tap Settings, then select Safari. Under General, turn on Block Pop-ups.

Go to the Safari menu, then select Preferences.

Select Security at the top of the window.

Select the Block pop—up windows check box to enable this feature.

Block Pop-Up Ads in Opera

These instructions apply to the Opera web browser.

In Opera, press Alt+P to open Settings.

Turn on Block Ads.

Alternatively, select the shield icon at the right side of the Opera address bar and turn on Block ads.

Block Pop-Up Ads in Mozilla Firefox

These instructions apply to Firefox on Macs or PCs.

For Firefox on an iOS device, tap the Firefox menu button and select the Settings icon. You may have to swipe left to locate this option. Turn on the Block Pop-up Windows option.

Open Firefox and select the Firefox button near the upper-left corner of the window.

Select Options (Windows) or Preferences (macOS).

In Windows, select Content in the left sidebar. In macOS, select Privacy and Security.

Scroll down and select the Block pop-up windows check box.

Pop-up blocker settings, exceptions and troubleshooting

This document explains all of the settings available in Mozilla Firefox for controlling pop-ups.

Table of Contents

What are pop-ups?

Pop-up windows, or pop-ups, are windows that appear automatically without your permission. They vary in size but usually don’t cover the whole screen. Some pop-ups open on top of the current Firefox window, while others appear underneath Firefox (pop-unders).

Firefox allows you to control both pop-ups and pop-unders in Firefox Options Preferences Settings Preferences . Pop-up blocking is turned on by default, so you don’t have to worry about enabling it to prevent pop-ups from appearing in Firefox.

When blocking a pop-up, Firefox displays an information bar (if it hasn’t been previously dismissed – see below), as well as an icon in the address bar.

When you click either the Options Preferences Settings Preferences button in the info bar or the icon in the address bar, a menu is displayed with the following choices:

• Allow/Block pop-ups for this site
• Edit Pop-up Blocker Options Preferences …
• Don’t show this message when pop-ups are blocked
• (show the blocked pop-up)

Pop-up blocker settings

To access the pop-up blocker settings:

1. In the Menu bar at the top of the screen, click Firefox and select Preferences . Click the menu button and select Options . Preferences . Settings .
2. Select the Privacy & Security panel.

• Under the Permissions section, uncheck the box next to Block pop-up windows to disable the pop-up blocker altogether.
• A click on Exceptions… opens a dialog box with a list of sites that you want to allow to display pop-ups.
• The dialog box offers you the following choices:
  

Allow: Click this to add a website to the exceptions list. Remove Website: Click this to remove a website from the exceptions list. Remove All Websites: Click this to remove all of the websites in the exceptions list.

Pop-ups not being blocked

Is the pop-up coming from Firefox?

The pop-up may not actually be coming from Firefox. You can determine where the pop-up is coming from by the appearance of the window.

• If you see the address bar with the Site Info button the Tracking Protection button and the Site Identity button (a shield and a padlock) in the pop-up window, the pop-up is coming from Firefox.
• If you don’t see the button these buttons , you may have malware on your computer that causes the pop-ups. For help, see Troubleshoot Firefox issues caused by malware.

Is the pop-up blocker on and enabled for this site?

1. In the Menu bar at the top of the screen, click Firefox and select Preferences . Click the menu button and select Options . Preferences . Settings .
2. Select the Privacy & Security panel and go to the Permissions section.
3. Make sure the Block pop-up windows checkbox is checked.
4. To the right of Block pop-up windows, click the Exceptions… button. A dialog box will open with a list of sites that are allowed to show pop-ups.
5. If the site that’s opening pop-ups is listed here, select it and press Remove Website .
6. Click on Save Changes to update your changes.
7. Close the about:preferences page. Any changes you’ve made will automatically be saved.

Is the pop-up shown after a mouse click or a key press?

Certain events, such as clicking or pressing a key, can spawn pop-ups regardless of if the pop-up blocker is on. This is intentional, so that Firefox doesn’t block pop-ups that websites need to work.

Is it a true pop-up window?

Sometimes ads are designed to look like windows, but really aren’t. Firefox’s pop-up blocker can’t stop these ads.

Mozilla surveys

When you visit a Mozilla website, sometimes you’ll see a pop-up asking you to participate in a survey. The only third-party that Mozilla ever uses for surveys is SurveyGizmo, which has been vetted by our legal and privacy teams. The Firefox pop-up blocker doesn’t block these pop-ups.

These fine people helped write this article:

Volunteer

Grow and share your expertise with others. Answer questions and improve our knowledge base.