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…)

Working with Pop-up Windows

Table of Contents

HTML Executable lets you open several windows called pop-up windows (or popup) in the same IE browser publication; thus your users can see additional information without navigating away from the current page in the main window. Popup windows are windows without toolbar or status bar. They can feature a custom menu bar however.

Each popup has a unique name.

How should pop-up windows display?

In HTML Executable, you can define several properties for pop-up windows: go to Application Settings => Pop-Ups.

You may define the default size for new pop-up windows: enter the desired width and height in the different fields. You may also click on the Auto-Sizer button: it will display a small window that you can resize as you want, then HTML Executable will automatically set the window’s height and width according to the size you have chosen.

Do not manage popup Z order automatically

By default, pop-up windows are created as children of the main window. Consequently, you cannot return to the main window before closing the pop-up window. If you want to create independent pop-up windows, then enable this option.

Include a menu bar for each pop-up

Pop-up windows may have their own menu bar with specific commands like Print, Close or custom ones. Enable this option and click Edit Menu Bar Items to manage the menu’s entries.

You can call some script commands from the default Global and Macros scripts that contain commands useful for popup menus:

Global.HEExitPublication : exits the publication.

Global.HECloseCurrentPopup : closes the active pop-up.

Global.HEPopupPrintPreview : shows the print preview for the current pop-up which lets end users print the contents of the pop-up window.

For instance, if you want to add a “Print” menu to your pop-up windows, click Add, enter “Print” and click OK. Then choose “Execute this script function”, select Global.HEPopupPrintPreview and that’s all. You should get the same result as shown on this screenshot:

Note: all pop-up windows will share the same menu bar.

How to open a popup window

There are several ways to open a new popup window from your HTML pages:

with a standard hyperlink tag

Use the target parameter _blank , or if you also want to assign a name to the new popup, use _hepopup_ followed by the name of your popup window (no space, alphanumeric characters only).

The popup’s name will be pop1 and this popup will show the compiled webpage named popup1.htm

Note that _blank will always open a new window while _hepopup_[name] will bring the [name] window to the front if the latter already exists. For instance, click twice on the hyperlinks above.

You can also use external links like https://www.htmlexe.com: our website

with JavaScript functions:

Open a popup with window.open.

window.open will only take account of the “width” and “height” parameters if available. If you want to set the position too, use window.external.ShowPopup instead.

Note that you should always give a name to the popup window you create with window.open.

Open a popup with window.external.ShowPopup

Syntax for window.external.ShowPopup:

• Name: name of your popup window.
• URL: url to the page that should be displayed. It can be a virtual path to a compiled page or a full URL. Relative paths are not handled.
• Width, Height: width and height of the popup window (in pixels).
• Left, Top: x and y screen coordinates of the top-left corner (in pixels).

Param: blank or one creation parameter parentexplicit, parentismain or noresize

parentexplicit: makes the popup independent (ignores the z-order auto management set by the option named “Do not manage popup Z order automatically” described above).

parentismain: the popup is a child of the main window, and not the window with the page or script that opened it.

noresize: does not allow the end user to resize the popup window.

Note: to create a screen-centered popup, set both Left and Top to -1.

All parameters are required.

with HEScript

An internal HEScript procedure Showpopup is available and lets you specify additional parameters for your popup window.

• Name: name of your popup window.
• URL: url to the page that should be displayed. It can be a virtual path to a compiled page or a full URL.
• Width, Height: width and height of the popup window (in pixels).
• Left, Top: x and y screen coordinates of the top-left corner (in pixels). If both set to -1, the popup appears centered.
• IsModal: always set the value to false.
• RedirectLinksToMain: whether you want the popup window to redirect all hyperlinks to the main window (when a user clicks a link, the page is displayed in the main window). Could be useful for website contents.

Example: you could associate the following procedure (ShowFirstPopup) with a custom menu command or a toolbar button.

Note: ShowPopupEx exists too.

Additionally you could add the following HEScript commands to your UserMain script:

In that case, you can now display any popup you want without having to create a specific HEScript function for each popup. To call the previous NewWindow function from your HTML pages, use:

How to close a popup window

If you wish to close the popup window from the popup itself, you can use:

• window.close (JavaScript):

End users may be prompted by Internet Explorer if they want to close the window.

• window.external.CloseCurrentWindow (JavaScript):

Contrary to the previous one, this function does not ask end users whether they want to close the popup window.

If you wish to close any popup, use window.external.ClosePopup(name) (JavaScript). You just need to know the popup’s name (that can be retrieved with the window.name JavaScript property).

This function also exists in HEScript:

To close all popup windows, use the HEScript function CloseAllPopups.

How to modify a popup size/position, set the focus…

You can set up properties for popup windows using the SetUIProp function (available as HEScript or window.external JavaScript extension).

Available property names are Left (x position), Top (y position), Width, Height, Caption (window title).

Example: we want to move an existing popup to another location. We can use this JavaScript code:

Close popup window

I have a popup window which is opened using this code:

How can I close that popup from within the popup?

all did not work

5 Answers 5

You can only close a window using javascript that was opened using javascript, i.e. when the window was opened using :

will work. Or else not.

For such a seemingly simple thing this can be a royal pain in the butt! I found a solution that works beautifully (class=»video-close» is obviously particular to this button and optional)

Your web_window variable must have gone out of scope when you tried to close the window. Add this line into your _openpageview function to test:

In my case, I just needed to close my pop-up and redirect the user to his profile page when he clicks «ok» after reading some message I tried with a few hacks, including setTimeout + self.close(), but with IE, this was closing the whole tab.

Solution : I replaced my link with a simple submit button.
buttonText . Nothing more.

This may sound stupid, but I didn’t think to such a simple solution, since my pop-up did not have any form.

I hope it will help some front-end noobs like me !

Not the answer you’re looking for? Browse other questions tagged javascript popup or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.4.16.39093

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.