HomeJavaScript Page 3 - Controlling Browser Properties with JavaScript
Moving Windows - JavaScript
Maybe you know how to make Web pages dance to your tune with JavaScript - but how about making the browser do the same? This tutorial focuses on the important browser objects (including the Window, Location and History objects) that are controllable via JavaScript, showing you how to manipulate and use them in your scripts.
You might not know this, but the alert() function you call every time you want a pop-up on your page is actually a method of the Window object. Take a look:
<script language="JavaScript"> // pop up alert window.alert("I can see you"); </script>
There's also a window.confirm() method, which displays a confirmation box with a message and two buttons. Depending on the button you pick, the method returns true or false. Take a look at the next example, which demonstrates:
<script language="JavaScript"> // ask a question var answer = window.confirm("Parlez-vous Francais?");
// process the response if (answer) { window.alert ("Tres bon, comment allez-vous?"); } else { window.alert ("Illiterate pig!"); } </script>
Finally, the window.prompt() method pops up an input box and stores the user's input in a variable. The following example illustrates:
<script language="JavaScript"> // ask for user input var name = window.prompt("Enter your screen name");
// print it back window.alert ("Welcome, " + name); </script>
You can move a window to the front of the window stack by calling the window.focus() method (remember to use the window name when calling this method, or you won't see anything special happen), and the window.blur() method to move a window to the back of the stack. Consider the following example, which creates a child window and then allows you to move it to the front and back of the window stack using these methods:
You can resize a window by calling the window's resizeTo() method, as in the example below:
<html> <head> </head> <body>
<a href="javascript:var test = window.open('', 'test');"> <b>Open test window</b></a>
<p>
<b>Resize test window</b> to:
<ul> <li> <a href="javascript: test.resizeTo(300, 300);"> 300 x 300</a> <li> <a href="javascript: test.resizeTo(640, 480);"> 640 x 480</a> <li> <a href="javascript: test.resizeTo(800, 600);"> 800 x 600</a> </ul>
<a href="javascript:test.close();"> <b>Close test window</b></a>
</body> </html>
Consider the following example, which allows you to input height and width values into a form, and uses these values to adjust the target window's height and width appropriately:
<html> <head> <script language="JavaScript"> var test = window.open('', 'test'); function changeSize() { var width=document.forms[0].winwidth.value; var height=document.forms[0].winheight.value; test.resizeTo(parseInt(width), parseInt(height)); } </script> </head> <body>
JavaScript 
/ 120 
