Referencing elements in a new window

Opening a new window
Referencing a new window

The previous examples show how you can reference the new window itself and apply methods to that window, I will now show you some examples on how to reference contents within a window.

In order for all this to work you must have created the window and depending on what you are wanting to reference you must know that it exists in the document loaded into the new window.

Elements such as the Document Title and Document Body are present in all documents and would be reference as

newWin.document.title
newWin.document.body

Try the following links.

Open Window
Get Title
Get body contents
Get div contents

Here are the functions I used to do all the above:

  1. Create the new window 
    newWin=null
function openWindow(url){
newWin = open(url,'winName','width=200,height=100,top=300,left=250' )
}
  2. Get the title of the document loaded into the new window 
    function getTitle(){
if(newWin&&newWin.open&&!newWin.closed){
alert("The window title in the popup is \n\n"+newWin.document.title)
newWin.focus()
}
else{
alert("The window is not open")
}
}
  3. Get the contents of the body tag 
    function getBodyContents(){
if(newWin&&newWin.open&&!newWin.closed){
alert("The contents of the BODY are \n\n"+newWin.document.body.innerHTML)
newWin.focus()
}
else{
alert("The window is not open")
}
}
  4. Get the contents of the DIV element named display 
    function getDivContents(){
if(newWin&&newWin.open&&!newWin.closed){
alert("The contents of the DIV element is \n\n"+newWin.document.getElementById("display").innerHTML)
newWin.focus()
}
else{
alert("The window is not open")
}
}

Notice that with exception of the function that actually opened the new window all the others checked first to make sure the new window was open.

if(newWin&&newWin.open&&!newWin.closed){

If it was not open the else part of the statement would kick in and show the alert

alert("The window is not open")

As we were using the same window I also refocused it.

newWin.focus()

Not only can we reference the various tags in the document but we can also call functions or get the values of the variables in a script.
In the example page loading into the new window I have coded the following into the head section. 

<script type="text/javascript">
<!--
var string1="Hello"

function test1(){
alert("Hello World")
}

//-->
</script>

If you closed the window reopen it here and try the following links.

Get Variable Value
Run function test1

  1. Get the value of variable string1 
    function getVariableValue(){
if(newWin&&newWin.open&&!newWin.closed){
alert("The value of the variable string1 is \n\n"+newWin.string1)
newWin.focus()
}
else{
alert("The window is not open")
}
}

  2. function runFunctionTest1(){
if(newWin&&newWin.open&&!newWin.closed){
newWin.test1()
newWin.focus()
}
else{
alert("The window is not open")
}
}

This is the code in the page that was loaded into the popup window 

<HTML>
<HEAD>
<TITLE>Example 1</TITLE>

<script type="text/javascript">
<!--
var string1="Hello"
function test1(){
alert("Hello World")
}
//-->
</script>

</HEAD>
<BODY BACKGROUND="../../main/bgmain.jpg" onload=focus()>

<h1>Example one</h1>

<div id="display">This is some dummy text just to fill out this div</div>

</BODY>
</HTML>

If you closed the window reopen it here and try the following links which will change the contents of the div "display".

Show me Show me Show me Show me Show me 

<script type="text/javascript">
<!--
newWin=null
function openWindow(){
newWin = open('example1.htm','winName','left=100,top=100,width=300,height=150')
}

function tes(num){
if(newWin&&newWin.open&&!newWin.closed){

if(num=='1'){
newWin.document.getElementById("display").innerHTML="You have now changed the contents of this div"
} 
if(num=='2'){
newWin.document.getElementById("display").innerHTML="Different information to the same popup"
} 
if(num=='3'){
newWin.document.getElementById("display").innerHTML="These messages are set within the script"
} 
newWin.focus()

}
else{
alert("The window is not open")
}

} 

function tes2(message){
if(newWin&&newWin.open&&!newWin.closed){

newWin.document.getElementById("display").innerHTML=message
newWin.focus()

}
else{
alert("The window is not open")
}
}

//-->
</script>

<a href="#null" onClick="tes(1)">Show me</a> 
<a href="#null" onClick="tes(2)">Show me</a> 
<a href="#null" onClick="tes(3)">Show me</a> 
<a href="#null" onClick="tes2('This mesage is passed to the function from the link')">Show me</a> 
<a href="#null" onClick="tes2('Have fun :)')">Show me</a>

You should now know the basics to do all the following.

  1. Open new windows
  2. Reference a new window
  3. Reference elements and objects in the new window

See Transfering Data for more indepth examples of passing data.