Opening a new window
Referencing elements in a new window
You can reference a new window to allow you to manipulate the window itself or target script functions and objects within the page in the window by assigning the window object to a variable, more commonly known as the Window Handle, you can also give the window a name which can be used by the target attribute.
For my examples I am using the variable newWin.
One of the common problems when using the same window for mulitple links is that when the link is clicked in the parent page the new window loses focus and gets hidden. The way round this is to use the focus method of the window object in the script.
<script type="text/javascript">
<!--
function openWindow(url){
var newWin=open(url,'winName','width=200,height=100,top=300,left=250' )
newWin.focus()
return false
}
//-->
</script>
<a href="page1.htm" onclick="return openWindow(this.href)">Example 1a</a>
<a href="page2.htm" onclick="return openWindow(this.href)">Example 1b</a>
<a href="page3.htm" onclick="return openWindow(this.href)">Example 1c</a>
<a href="page4.htm" onclick="return openWindow(this.href)">Example 1d</a>
Now each time the window is opened or reloaded the window is focused.
Click each of the following links in turn.
Notice that when you clicked B,C, and D the window lost focus.
Now try the next four links.
The window regains focus on each click. I gave the window a name so that all 8 links used the same window
Here is an example of moving the new window by using a second function containing the method moveTo()
<script type="text/javascript">
<!--
function openWindow(url,Left,Top,Width,Height,atts){
newWin=open(url,'win1','left='+Left+',top='+Top+',width='+Width+',height='+Height+'' )
}
function moveWin(x,y){
newWin.moveTo(x,y)
newWin.focus()
return false
}
// -->
</script>
<a href="poppage.htm" onclick="return openWindow(this.href,80,100,400,200)">Open Window</a>
<a href="#null" onclick="moveWin(300,300)">Move Window</a>
Using the above example make sure that window is closed and then click the Move Window link.
This will throw up an error telling you that Access is denied, this is because you are trying to do something with a window that does not exist.
In Mozilla the errors are show in the Javascript console.
Refresh this page and then click the same Move Window link again, this time you get a different error message telling you that newWin is undefined, this is because the new window has not yet been created, as you can see there is a problem and you don't want these errors thrown up if your visitor presses a wrong link first.
You can declare that the new window does not exist globally by stating windowHandle=null and then in your function(s) check to see if the windowHandle holds reference to the window object.
<script type="text/javascript">
<!--
newWin=null // the window does not exist
function openWindow(url,Left,Top,Width,Height,atts){
newWin=open(url,'win1','left='+Left+',top='+Top+',width='+Width+',height='+Height+'' ) // the window exists
return false
}
function moveWin(x,y){
if(newWin&&newWin.open&&!newWin.closed){ // if the window exists and is open
newWin.moveTo(x,y)
newWin.focus()
}
}
// -->
</script>
<a href="poppage.htm" onclick="return openWindow(this.href,80,100,400,200)">Open Window</a>
<a href="#null" onclick="moveWin(300,300)">Move Window</a>
Now try again, click the following Move window link first.
No error messages.
The variable newWin identifies the window object of the window, newWin.open references the window's window.open() method. You should not attempt to reference newWin.open unless you know for sure that newWin exists.
Use newWin.closed to determine whether a window that you opened, and to which you still hold a reference (from the return value of window.open), is still open.
Therefore you can use
if (newWin && newWin.open && !newWin.closed)
which translates to:- if newWin holds the window object and newWin.open exists, and newWin is not closed
Or
if (newWin && !newWin.closed)
The variable newWin can be any name of your choosing.
You can only reference a new window from the window that created it.
Example:- Page 1 opens Pop 1
If page 1 is closed leaving pop1 still open and page 1 is then reopened, pop 1 cannot be referenced from page 1 because the bond between them was lost when page 1 was closed.
Pop 1 has to be initialised again by either closing and reopening it or by just clicking the link that opens it again.
Once a window is closed you should not attempt to manipulate it.
Testing the results of newWin, newWin.open, and newWin.closed
Click the following links in sequence.
|
Popup Status Popup Open Popup Close |
|
Re-open the popup by clicking the Popup Open link and then close it using the popups X button then Click the Pop Status link.
Notice that the script has detected that the popup was closed.
<script type="text/javascript">
<!--
newWin4=null
function popOpen(){
newWin4=open('example1.htm','win','width=300,height=100,left=450,top=150')
document.getElementById("display").innerHTML="You have opened the popup"
popStatus()
}
function popClose(){
if(!newWin4){
document.getElementById("display").innerHTML="You have not opened the popup"
return
}
else{
if(newWin4&&newWin4.open&&newWin4.closed){
document.getElementById("display").innerHTML="The popup is already closed."
}
else{
document.getElementById("display").innerHTML="You have now closed the popup"
}
newWin4.close()
}
document.getElementById("display2").innerHTML="<b>newWin = </b>"+newWin4
document.getElementById("display2").innerHTML+="<br><b>newWin.open = </b>"+newWin4.open
document.getElementById("display2").innerHTML+="<br><b>newWin.closed = </b>"+newWin4.closed
}
function popStatus(){
if(!newWin4){document.getElementById("display").innerHTML="The popup has not been opened";return}
if(newWin4&&newWin4.open&&!newWin4.closed){document.getElementById("display").innerHTML="The popup is open"}
if(newWin4&&newWin4.open&&newWin4.closed){
document.getElementById("display").innerHTML="The popup has been closed"}
document.getElementById("display2").innerHTML="<b>newWin = </b>"+newWin4
document.getElementById("display2").innerHTML+="<br><b>newWin.open = </b>"+newWin4.open
document.getElementById("display2").innerHTML+="<br><b>newWin.closed = </b>"+newWin4.closed
}
//-->
</script>
<a href="#null" onclick="popStatus()">Popup Status</a><br>
<a href="#null" onclick="popOpen()">Popup Open</a><br>
<a href="#null" onclick="popClose()">Popup Close</a><br>
<br><br>
<div id="display"> </div>
<div id="display2"> </div>
Opening a new window
Referencing elements in a new window
A comprehensive list of properties and methods available for window objects.
| Property / Syntax | Description |
|---|---|
| window.closed | Returns boolean value to determine if a window has been closed |
| window.defaultStatus("message") | Defines the default message displayed in a window's status bar |
| window.document | Defines the document to displayed in a window |
| window.frames("frameId") | Returns an array containing references to all the named child frames in the current window |
| window.history | Returns the history list of visited URLs |
| window.innerHeight = value | Returns the height of the window's display area |
| window.innerWidth = value | Returns the width of the window's display area |
| window.length | Returns the number of frames in the window |
| window.location | The URL loaded into the window |
| window.name | Sets or returns window's name |
| window.opener | The name of the window that opened the current window |
| window.outerHeight | Returns the height of the outer area of the window |
| window.outerWidth | Returns the width of the outer area of the window |
| window.pageXOffset | Return the X-coordinate of the current window |
| window.pageYOffset | Return the Y-coordinate of the current window |
| window.parent | The name of the window containing this particular window |
| self | Refers to current window |
| window.top | Returns the name of topmost window |
| window.[property]or[method] | Returns the current window |
| Method / Syntax | Description |
| alert("Type message here") | Displays text string on a dialog box |
| window.back() | Loads the previous page in the window |
| window.blur() | Removes the focus from the window |
| window.captureEvent(eventType) | Sets the window to capture all events of a specified type |
| window.clearTimeout(timeoutID) | Clears the timeout, set with the setTimeout method |
| window.close() | Closes the window |
| confirm("type message here") | Displays a confirmation dialog box with the text message |
| window.disableExternalCapture( )/ window.enableExternalCapture( ) | Enables/disables external event capturing |
| window.focus() | Gives focus to the window |
| window.forward() | Loads the next page in the window |
| window.handleEvent(eventID) | Invokes the event handler for the specified event |
| window.moveBy(x,y) | Moves the window by the specified amount in the horizontal and vertical direction |
| moveTo(x,y) | This method moves the window's left edge and top edge to the specified x and y co-ordinates |
| window.open(url, name, attributes) | Open a new window |
| window.print() | Displays the print dialog box |
| window.prompt("type message here",value) | Displays prompt dialog box |
| window.releaseEvents(eventType) | Release any captured events of the specified type |
| window.resizeBy(x,y) | Resizes the window by the specified amount |
| window.resizeTo(width,height) | Resizes the window to the specified width and height |
| window.scroll(x,y) | Scrolls the window to the supplied co-ordinates |
| window.scrollBy(x,y) | Scrolls the window's content area by the specified number of pixels |
| window.scrollTo(x,y) | Scrolls the window's content area by the specified number of cordinates |
| window.setIntervals(expression,milliseconds) | Evaluates the expression every time milliseconds |
| window.stop() | Stops the windows from loading |