1) CODE TITLE: Pop It Up
2) AUTHOR NAME: Arie Molendijk
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.
But the advantage given in (ii) is only real when a new window is not explicitly requested (onload and onunload). The advantage is appearant only when the window's appearance is attached to an onclick event on a link. 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 in the iframe adds an entry to the browser's history. This may lead to a situation where the browser's back button does not function properly anymore.
In modern browsers, window.open opens a new tab by default. 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.
With all of this in mind, I created a script that has the following features:
- the new window that is opened with the help of the script 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:
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 and explanations:
- 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.
4) URL TO CODE: