Scripting between windows
Notes from June 6, 2005 class
Here's an exercise from our textbook, page 265, that lets two separate windows share script and interact with one another. You can see the working scripts in action here.
<html>
<head><title>Inter-window scripting</title>
<script language="JavaScript" type="text/javascript">
<!--
var newWindow;
function buttonOpenWin_onclick()
{var winTop = (screen.height / 2) - 125;
var winLeft = (screen.width / 2) - 125;
var windowFeatures = "width=250,height=250,";
windowFeatures = windowFeatures + "left=" + winLeft + ",";
windowFeatures = windowFeatures + "top=" + winTop;
newWindow = window.open("newWindow.html","myWindow",windowFeatures);
}function buttonGetText_onclick()
{
if (typeof(newWindow) == "undefined" || newWindow.closed == true)
{
alert("No window is open");
}else
{
document.form1.text1.value= newWindow.document.form1.text1.value;
}
}
function window_onunload()
{
if (typeof(newWindow) != "undefined" && newWindow.closed == false)
{
newWindow.close();
}
}//-->
</script>
</head>
<body onunload=window_onunload()>
<h1>Inter-window scripting</h1>
<form name="form1">
<input type="button" value="Open newWindow" name="buttonOpenWin" onclick="buttonOpenWin_onclick()">
<br /><br />
New window's text<br />
<input type="text" name="text1"><br />
<input type="button" value="Get text" name="buttonGetText" onclick="return buttonGetText_onclick()">
</form></body>
</html>
Now, we need to create the pop-up window's html, in a file named newWindow.html since that's what the script called for.
<html>
<head><title>Inter-window scripting pop-up page</title>
<script language="JavaScript" type="text/javascript">
<!--
function buttonGetText_onclick()
{
document.form1.text1.value = window.opener.document.form1.text1.value;
}//-->
</script>
</head>
<body>
<h1>Inter-window scripting pop-up</h1>
<form name="form1">
Text from opener window<br /><input type="text" name="text1">
<br /><input type="button" value="Get text" name="buttonGetText" language="JavaScript" onclick="buttonGetText_onclick()">
</form></body>
</html>
Applying inter-window scripting to an existing script
Now, using what we just learned, get a copy of Kevin's "Mad Coder" script and change it so that the insulting information about the user's browser and operating system come up in a new window instead of via an alert box.
I just commented out the alert box and added a few lines to the main function:
var winTop = (screen.height / 2) - 125;
var winLeft = (screen.width / 2) - 125;
var windowFeatures = "width=250,height=250,";
windowFeatures = windowFeatures + "left=" + winLeft + ",";
windowFeatures = windowFeatures + "top=" + winTop;
var newWindow = window.open("","myWindow",windowFeatures);
newWindow.document.write("<p>Warning " + browser +" is a terrible browser. Version " + version +" is the a blot on the very soul of humanity, exceeded in its sheer awfulness only by the " + OS + " operating system.</p>");
newWindow.document.write("<form><input type='button' onclick='window.close()' value='Close'></form>");There are much more elegant ways to do this, but this one was fast.