Pop It Up

Using iframes - instead of windows created via window.open - to show external content from a foreign domain has two big advantages: (i) iframes can be more easily customized than new windows created via window.open and (ii) popup blockers won't stop external content shown in an iframe from appearing.

The advantage given in (ii) is real when a new window is not explicitly requested by the person using the browser i.e. when the window's appearance is attached to such events as onload and onunload. But the advantage is only appearant when the window's appearance is attached to an onclick event on a link (and other events that can be taken to mean that a person has explicitly requested a new window). When the browser sees that a new window is actually requested, it won't allow popup blockers to do their job.

So preferring an iframe to window.open() is not always obvious. And there's a specific case in which iframes should not be used. If the page contained in it has links leading to other pages, each click on a link adds an entry to the browser's history. This may lead to a situation where the number of entries in the history surpasses the one corresponding to the number of visited 'main pages'. When this happens, the browser's back button may not function correctly anymore, because browsers don't distinguish between history entries recorded in the main page(s) and entries recorded in an iframe. From this it follows that we should use the window.open method rather than an iframe if the external page has hrefs on it.

In modern browsers, window.open opens a new tab by default, instead of opening an 'old fashioned' new window. But there may be cases in which we don't want a new tab. We would prefer the old fashioned new window when we want to explicitly show that an external page must be seen as an essential part of the existing 'main page'. This very page contains a script ensuring that an external page opens in a new window (not in an iframe or a new tab) when the visitor clicks on a link. Features:

the new window is automatically centered on the page (but see below);
the new window closes an existing one when a new page is requested;
the new window closes as soon as the visitor leaves the page;
the new window is opened as a percentage of the monitor size;
there's a 'once-per-session message' informing the visitor on what to do if there's no back button in the new window (new windows opened with Google Chrome don't have a back button).

The HTML, just an example:
<a href="javascript: void(0)" onclick="pop_it_up('http://www.google.com',70, 80)">Google</a>
In this example, the Google page opens in a (centered) new window that takes up 70% of the screen's width and 80% of the screen's height.

DEMO:
The links on this page.

Notes:

The script doesn't function properly when used locally (on the hard drive) with Internet Explorer and Google Chrome. But there's no problem on the internet.
In Opera, the new window shows as a resized new tab, which does not prevent it from looking like a normal old fashioned new window.
Also in Opera, the new window seems to be located too far away from the top of the screen. The reason is that Opera does its best to have as few overlap as possible between the new window (the new resized tab, actually) and the browser's bars on top.
In Internet Explorer version 7, the new window is located too far away from the bottom of the screen. I don't feel inclined to correct this, as this browser will be dead soon.

Arie Molendijk
http://www.mesdomaines.nu/music