View Full Version : opening more than one new window

08-08-2002, 05:33 PM
I am using the following code to open a new window from a text link


function openpopup(){
var popurl="bookpasses.htm"


the link is <a href="javascript:openpopup()">car passes</a>

Everything works fine but how can I get it to open different windows with different url's from different text links on the same page, such as

<a href="javascript:openpopup()">car passes</a>
<a href="javascript:openpopup()">bus passes</a>
<a href="javascript:openpopup()">train passes</a>

Any help would be appreciated



08-08-2002, 05:45 PM

try this


function openpopup(popurl){

<a href="javascript:openpopup('car.html')">car passes</a>
<a href="javascript:openpopup('bus.html')">bus passes</a>
<a href="javascript:openpopup('train.html')">train passes</a>

for every link, pass a different parameter,,

is that what u wanted?


08-09-2002, 01:55 AM
Hi all....I'm trying to do the same thing the original poster is attempting. Your fix definitely worked....thanks for the answer! One more question, though...how can I get each of the pop-ups to open in an entirely new window, rather than each loading into the same window?

08-09-2002, 02:46 AM
you'll have to pass a window name along with the file to the script like so

function openpopup(popurl,popwin){

<a href="javascript:openpopup('car.html','car')">car passes</a>
<a href="javascript:openpopup('bus.html','bus')">bus passes</a>
<a href="javascript:openpopup('train.html','train')">train passes</a>

openpopup() now expects two string arguments: popurl and popwin - the name of the new window.

There is a point where the amount of control you wish to have over your popup windows will make using an external function like openpopup() more costly than calling window.open from the anchor tag as in the example below.

<a href="train.html" onclick="window.open('','train','width=450,height=400,resizable,scrollbars')" target="train">train passes</a>

This link has complete control over the popup window including name, size and options.

08-09-2002, 03:06 AM
excellent....thank you for your help!

08-09-2002, 03:37 AM
Sorry, guys...thought I had this figured out, but I don't. Please excuse my JS ignorance!

Basically, I'm generating pop-ups from various image maps on the page. I would like, however, for each popup to open in its own window, rather than having the content for each .htm file showing up in the same window...

Okay, here's my HEAD code:

<script language="JavaScript"><!--
function win(fileName) {
myWin = window.open('','myWindow','scrollbars=yes,directories=no,status=no,resizable=no,toolbar=no,copyhisto ry=no,location=no,menubar=no,width=600,height=400,scrollbars=yes,top=100,left=150')
myWin.location.href = fileName;

And here's an example of my BODY code:

<area shape="rect" coords="32,129,126,152" href="javascript:win('about.htm')">
<area shape="rect" coords="32,249,126,272" href="javascript:win('contact.htm')">

What tags/variables do I need to add here to get about.htm and contact.htm each pop up in its own window?

Thanks in advance!

08-09-2002, 05:14 AM
This might help:

<script type="text/javascript" language="javascript">

function popcoll(url, name) {
var width = 500; //pop widths
var height = 300; //pop heights
var offset = 50; //pop spacing
var popfactor, i, temparray = new Array();
if (typeof popcoll.coll == 'undefined') popcoll.coll = new Array();
popcoll.infront = null;
for (i=0; i<popcoll.coll.length; ++i)
if (popcoll.coll[i] && !popcoll.coll[i].closed) {
temparray[temparray.length] = popcoll.coll[i];
if (name == popcoll.coll[i].name) popcoll.infront = popcoll.coll[i];
popcoll.coll = temparray;
if (!popcoll.infront)
popcoll.coll[popcoll.coll.length] =
for (i=0; i<popcoll.coll.length; ++i) {
popfactor = offset * (i + 1);
for (i=popcoll.coll.length-1; i>=0; --i) setTimeout('popcoll.coll['+i+'].focus()',i * 50);
if (popcoll.infront) setTimeout('popcoll.infront.focus()',popcoll.coll.length * 50);
return false;


<a href="pop1.htm" target="_blank"
onclick="return popcoll(this.href,'pop0')">pop 1</a><br>
<a href="pop2.htm" target="_blank"
onclick="return popcoll(this.href,'pop1')">pop 2</a><br>
<a href="pop3.htm" target="_blank"
onclick="return popcoll(this.href,'pop2')">pop 3</a>


You could call it with:

href="javascript&#58;void popcoll('url','pop0')">

..from a map. Pass a unique name for each new window. Not sure it's completely debugged yet, though..

08-09-2002, 04:52 PM

the necessary changes to your script are in bold (i hope)

<script language="JavaScript">
function win(fileName,winName) {
myWin = window.open('', winName ,'scrollbars=yes,directories=no,status=no,resizable=no,toolbar=no,copyhistory=no,location=no,menubar =no,width=600,height=400,scrollbars=yes,top=100,left=150');
myWin.location.href = fileName;

<area shape="rect" coords="32,129,126,152" href="javascript:win('about.htm','about')">
<area shape="rect" coords="32,249,126,272" href="javascript:win('contact.htm','contact')">

08-09-2002, 07:00 PM
Brilliant! That's exactly what I needed. Now, one additional question. What tags do I need to include in order to get each new window to be slightly offset in location? With all of the windows opening one on top of another, it's easy to miss the fact that there are several open!

Thanks again!

08-09-2002, 07:36 PM
I would just remove the top and left commands in the function.

change this

function win(fileName,winName) {
myWin = window.open('',winName,'scrollbars=yes,directories=no,status=no,resizable=no,toolbar=no,copyhistory= no,location=no,menubar=no,width=600,height=400,scrollbars=yes,top=100,left=150');
myWin.location.href = fileName;

to this (much shorter)

function win(fileName,winName){
myWin = window.open(fileName, winName,'scrollbars,width=600,height=400');

the other things I removed because they are unnecessary. saying 'statusbar=no' is the same as leaving statsubar=no out of the function. (no is default when an option is omitted, yes is default if option is included)

08-09-2002, 07:44 PM
Excellent advice....done. Thanks so much!

08-10-2002, 01:17 AM
To paraphrase my first post to this thread - eventually the higher level of control over each individual popup window will obviate the use of a custom function. It will be just as easy to call window.open() from the onclick event of the link.

The upside of using the onclick method is that browsers with little or no javascript support will still be able to open the link since the URL is stored as the href.

<a href="about.htm" onclick="window.open('','about','width=640,height=480,resizable,scrollbars')" target="about">

<a href="contact.htm" onclick="window.open('','contact','width=480,height=360,scrollbars')" target="contact">

These two change the popup window minutely but more code would have to be added to the win() function to support different window sizes and options.

Incidentally this method works perfectly with <area> tags as well as <a> tags. Just be sure to include both the onclick handler and the target attribute (which must be set to the name of the window in the window.open() command).