PDA

View Full Version : transferring values between child and parent window from parent window

htmlcssnewbie
02-01-2008, 10:28 AM
Hi guys,

I know how to transfer or make calls to the parent window from the child (or popup) window (i.e. window.opener.somevalue = value). But how do I accomplish the same task from the parent window? I've seen some references to writing the popup html from the parent window using document.write(). But that's not what I'm asking. I'm asking is there a way to something like this:

//popup window

var new_value = 5; (set globally)

//Parent window
var popupwin = window.open("somepage.php", "popup", "height=240, width=320");

alert(popupwin.new_value);
popupwin.new_value = 10;
alert(poupwin.new_value);

I tried something like this and it doesn't work. It says "undefined" in the alert window.

Update: To clarify, the 4 lines of code in the parent window are being executed inside a function. And I lied...it doesn't actually do anything. No alert box pops up, nothing.
rangana
02-02-2008, 04:50 AM
hi htmlcssnewbie,
What is in somepage.php??..Why hesitant using document.write when you will replace the value of 5 to 10??..See the code below
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript">
function popupwindow(){
var popupwin = window.open("", "popup", "height=240, width=320");
with (popupwin.document)
{
open("text/html","replace");
write("<html><head><title>New Value</title></head><body style=\"font-family:Tahoma;font-size:10pt;background:darkslategray;color:#fff;\"><center>Previous Value is 5, now changed to <b>10</b></center></body></html>");
close();
}
}
</script>
</head>
<body style="margin:0;padding:10px;font-family:Tahoma;font-size:10pt;" onLoad="popupwindow()">
</body>
</html>
htmlcssnewbie
02-04-2008, 04:00 PM
interesting. thanks. I couldn't find any documentation on the "with (...)" keyword. Perhaps you can point me in the right direction???

somepage.php contained pretty much what you assumed, nothing but the javascript variable, open and close html and head tags.

The variable of 5 is just a test. That's all this is. I wrote it to make sure I could change a popup window value FROM the parent window. I couldn't, which is why I asked I for help. Based on your code, I'm guessing passing information between the parent and the child is a one-way street (unless one uses document.write, but that seems to be useful if your're building the popup for the first time, as opposed to changing its contents after it's been loaded).

If you could point me to where you found the "with" keyword, I'd appreciate it.
coothead
02-04-2008, 05:38 PM
Hi there htmlcssnewbie,

I would advise against the use of document.write() for this project. :disagree:
Instead try it like...

link_page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
div {
margin:10px 0;
}
input {
width:60px;
}
#link {
color:#000;
}
#link:hover {
color:#f00;
}
</style>

<script type="text/javascript">

var mywindow;
var w=320;
var h=240;
var l=(screen.width-w)/2;
var t=(screen.height-h)/2;
var features='width='+w+',height='+h+',left='+l+',top='+t;

window.onload=function() {
document.getElementById('link').onclick=function() {

var new_value=document.forms[0][0].value;

makePopUp(this.href+'?'+new_value);
return false;
}
}
function makePopUp(url) {
if(mywindow) {
mywindow.close();
}
mywindow=window.open(url,'popup',features);
mywindow.focus();
}
</script>

</head>
<body>

<form action="#">
<div>
<input type="text" value="5"><label> : change this value to test process</label>
</div>
</form>

<div>
<a id="link" href="popup.html">popup.html</a>
</div>

</body>
</html>

popup.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
margin:0;
padding:0;
background-color:#99c;
}
#value {
line-height:240px;
font-family:serif;
font-size:20px;
text-align:center;
}
</style>

<script type="text/javascript">
window.onload=function() {

var url=location.href;
var info=url.substring(url.lastIndexOf("?")+1,url.length);

document.getElementById('value').firstChild.nodeValue=
'The value of the form input is '+info;
}
</script>

</head>
<body>

<div id="value">&nbsp;</div>

</body>
</html>
htmlcssnewbie
02-08-2008, 03:21 PM
yea, this was an interesting excercise; would've never thought of doing it like that. This one will go in my records, for sure. thanks agian.