Wednesday, January 2, 2013

Window object

This post will help you to deal with window, location and history objects.

So lets get started.....
we will see how to open a new window and close the window. I have pasted the the code below and you can also view the live working example regarding the same.

<input type="button" value="open" onclick="openwin()" />
<input type="button" value="close" onclick="closewin()" />
<input type="button" value="reload" onclick="reloadwin()" />

<script type="text/javascript">
function openwin(){
 x=window.open('http://informativejavascript.blogspot.nl','','width=800px,height=250px');
}
function closewin(){
window.close(x);
}
function relaodwin(){
location.reload();
}
</script>

Click on the button to open/close the new window, while reload will reload the page.


Now moving on to the location object.

We have assign, reload and replace methods, we will use the same window created in the previous section.

<input type="button" value="assign" onclick="assignwin()" />
<input type="button" value="replace" onclick="replacewin()" />

<script type="text/javascript">
function assignwin(){
x.location.assign("http://feeds.feedburner.com/blogspot/Puccab");
}
function replacewin(){
x.location.assign("http://informativejavascript.blogspot.nl/2013/01/window-object.html");
}
</script>

Click on the button to assign/replace a new window


Next is the history object

History object are used to create back,forward button and length property which loads the previous URL's in the history list.

<input type="button" value="back" onclick="backwin()" />
<input type="button" value="forward" onclick="forwardwin()" />
<input type="button" value="go" onclick="gowin()" />
<input type="button" value="length" onclick="lengthurl()" />

<script type="text/javascript">
function backwin(){
history.back();
}
function forwardwin(){
history.forward();
}
function gowin(){
history.go();//go back 2 pages
}
function lengthurl(){
alert(history.length);
}
</script>



Informative Javascript

No comments:

Post a Comment