JS q - window.open positioning; also, window closing

Question about how to position a popup window and how to close it

[semiaziz]

Howdy!
Am wondering which is the correct way to position a popup window in the upper left-hand corner... is it

screenX=0,screenY=0
or
left=0,top=0
or
location=0
?
Also, what would the script be for closing the window with a text link?
thanks

[moonbiter]

It is different in IE and Netscape, so declare both (cut into a blank html document for an example):

<script type="text/javascript">
var window_name = window.open('foo.htm','window_name','[b]screenX=0,screenY=0,top=0,left=0[/b]');
</script>
<p>
<a href="javascript: window_name.close();">Close that window</a><br />
or if you want the link to go to foo.htm:<br />
<a href="foo.htm" onclick="window_name.close();">Close that window</a>
</p>

More info at MSDN [msdn.microsoft.com] and at Netscape's documentation site [developer.netscape.com].

[edited by: moonbiter at 7:38 pm (utc) on Aug. 27, 2002]

[semiaziz]

thanks a lot!
is there a reason to use

<script type="text/javascript">
var window_name = window.open('foo.htm','window_name','screenX=0,screenY=0,top=0,left=0');
</script>

instead of

<a href="#" onClick="window.open('foo.htm','screenX=0,screenY=0,top=0,left=0'); return false ;">
Foo</a>
?
I've been using the latter up till now.

[moonbiter]

Just code portability. If you want to put the window open into a function, you can call it from a lot of different links on the page and just pass it arguments in the function call. So you could have:

function openWindow(url) {
var window_name = window.open(url,'window_name','screenX=0,screenY=0,top=0,left=0');
}

and call it like:

<a href="#" onclick="openWindow('foo.htm')">Foo link</a>
<a href="#" onclick="openWindow('foo2.htm')">Foo link 2</a>
<a href="#" onclick="openWindow('foo3.htm')">Foo link 3</a>

and so on.

<added>
Plus, you'll need to put the window into a variable to get the window.close() method to work from another window.
</added>

[jatar_k]

as has been mentioned around a few times use

<a href="javascript:openWindow('foo.htm');">Foo link</a>

instead of

<a href="#" onclick="openWindow('foo.htm')">Foo link</a>

This will keep the page from jumping around and leave the back button able to be used on a single click instead of the user having to click twice to go back.

[moonbiter]

jatar_k makes a good point.

Another alternative is:

<a href="foo.htm" onclick="openWindow('foo.htm'); return false">Close that window</a>

Which has the added benefit of failing gracefully, allowing those who have javascript turned off to visit the url too (it will show up in the main window). Plus, if you want to get a little clever make your function base itself off of the href of the link, so that you could do:

function openWindow(obj) {
var url = obj.href;
var window_name = window.open(url,'','screenX=0,screenY=0,top=0,left=0');
}

And call it with

<a href="foo.htm" onclick="openWindow(this); return false;">Open that window</a>

.

This way, you never have to change the arguments in the function call, and just changing the href url is enough.

[starway]

I always wonder about screenX/screenY - I never use it and get the same relative to the parent position of a new window in IE and NN4 with top/left.