Inter Window Variables

Passing a variable's value from one window to another

[Victoria_B]

What's the best/easiest technique to pass a variable's value from one window to another?

In my case I'm opening a popup window to display a picture. The user can choose from 20 or so thumbnails and I would like to pass the image name through to the popup so to correctly display the relevant picture.

Any ideas?

Victoria x

[Bernard Marx]

Hello Victoria,

It's pretty simple really. If you opened the new window:

newWin = window.open( ..blah..)

Then you can reference anything in the new window (from the main window) the same way as you would reference main window variables - but with the prefix, newWin (or whatever variable you chose).

access a variable: newWin.myVar
call a function: newWin.myFunction()
get an object reference: newWin.document.getElementById('banana')

The fact is, most things are (directly or indirectly) properties of the window on a web page - including new windows launched. A variable, myVar, can have a longer name, window.myVar. It's just the same for the new window, but to reference things on it from the main window, you need to go via the new window's variable name first.

BUT

You can't really access most of it until the new window has loaded. The safest way to go about it might be to set a global variable, myImage = "info", on the main page, and have a script in the new window pick it up when it loads, via the variable, opener:

alert(opener.myImage) ---> "info"

...I've just thought of something neater.
Your pop-up doesn't display the address bar, so it'll be invisible.

1. Put a search string in the URL:

newWin = window.open("pop_page.htm?image34.jpg","imgWin","width=....")

2. A script in the popup can access this string at any time, even while loading:

var searchStr = location.search.replace("?","")

so you could write the image's src as the page loads, using document.write()

[Victoria_B]

Thanks Bernard. Used the search option which worked a treat. However how could I pass 2 pieces of information through the url?

Victoria x

[Bernard Marx]

Yes. Just separate the strings with a delimiter, they often look like this:

[blue]page.htm?param1&param2&param3[/blue]

Then the search string is split into an array on the receiving page :

[blue]strings = location.search.replace("?","").split("&")[/blue]

Sometimes you'll want propertyName / value pairs. One way to do it is like this:

[blue]page.htm?name=victoria+apples=3+bananas=6[/blue]

It's a little trickier splitting that, and all the values are strings - eg '3' not 3.
Here's a string method I knocked up for your library. It turns anything composed of digits into a number. Then returns an object, with the property names and values, so it's easy to handle.

[blue]
String.prototype.getParameterObject = function()
{
 var pairs = this.replace("?","").split('+')
 var obj = new Object()
 for(var k=0;k<pairs.length;k++)
 {
 var pair = pairs[k].split('=')
 var val = pair[1]
 val = (isNaN(val))? val:eval(val)
 obj[pair[0]] = val
 }
 return obj
}[/blue]
// apply method to search string
[blue]params = location.search.getParameterObject()[/blue]
// then..
// 'number' turned into Number
[blue]alert("name: "+params.name +"\napples+1: "+ (params.apples+1))[/blue]
// find out what's in it
[blue]var str = ''
for(var p in params)
 str += p +': '+params[p]+' '+typeof(params[p])+'\n'
alert(str)[/blue]

*---------------------------------*
WebmasterWorld turns this character ¦ into something else.
Replace all instances of ¦ with [shift+\]

Of course, it doesn't do it all. Special characters, inc. spaces, need to be escaped before putting into a URL, then unescaped when received. Maybe later. You'll be OK if you don't use anything funny.