Opening New Browser Windows Part 1
I currently have to open a new window in a web application. Here are my requirements:
- Must be browser compatible for IE6/7/8, Firefox (all), Opera (all), Chrome and Safari
- Must pass parameters to the new page (without using URL parameters)
- Must return a value to the old page
- Must know whether a window has already be opened, so only 1 is open at a time
According to this site, the target attribute for the anchor tag is being phased out. Therefore it is a better idea to use DOM in javascript to open the window. We need this anyway to meet the requirements for holding on to the new window reference.
I tried the first code example from this site, however it did not work in IE 7. I think a majority of this code is the correct way to go, so I need to work out why it failed in IE 7. I also noticed the resizable config setting had no effect in any of the browsers. That is fine, as this does not break any of the requirements.
I came across an interesting paragraph on the MSDN site, that mentions IE 7 in Windows Vista has access restrictions across process boundaries. It also mentions that when a new window is opened, it creates a new process. This may be an issue as it will make our requirements more difficult to meet.
The issue with IE 7 was related to the title text. I passed in a parameter like so:
function openWindow(url, title)
{
var win = window.open(url, ‘App - ‘ + title, config=”…”);
}
When I simply used:
var win = window.open(url, ‘App’, config=”…”);
Internet Explorer worked fine.
The resizable config setting appears to only work in Internet Explorer. I want consistent behaviour so I will not use this setting. The default value is resizable=no, so I have to explicitly say yes, I do want the window to be resizable. I am trying to make navigation easier for my users, not restrictive.
An object is returned after the window has been opened. This is the object I intend to use to pass the parameters to, be notified when the window has closed and retrieve the returned value. Here is my code so far:
Javascript
function openWindow(url)
{
var win = window.open (url, 'CHCR', config='height=300, \
width=520, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, \
location=no, directories=no, status=no');
}
HTML
<div onclick=”openWindow(’../SuburbLookup.htm’);”>..</div>
This will open my window and meets requirement 1.
Stay tuned for further progress on my window.