GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
GeezerVison is showing www.techotopia.com — JavaScript Window Object - Techotopia JavaScript Window ObjectFrom Techotopia Jump to: navigation, search
Contents Referencing the JavaScript window ObjectAs covered in JavaScript Object Basics it is usually necessary to use dot-notation when accessing properties or methods of an object. For example the following script fragment accesses the write() method of the document object: document.write("Hello");
The window object is the top-level object of the object hierarchy. As such, whenever an object method or property is referenced in a script without the object name and dot prefix it is assumed by JavaScript to be a member of the window object. This means, for example, that when calling the window alert() method to display an alert dialog the window. prefix is not mandatory. Therefore the following method calls achieve the same thing: window.alert(); alert() JavaScript window Object PropertiesThe JavaScript window object contains a number of properties that can be inspected and used in a script:
Opening Browser Windows using JavaScriptA new browser window can be opened from a JavaScript script using the open() method of the window object. The syntax for opening a new window is as follows:
newWindowObj = window.open("URL", "WindowName", "feature, feature, feature ... ");
The following provides an explanation of the arguments passed through to the open() method:
The height, width and position features are set using numbers. The remaining feature options can be set using true or false values (also yes, no and 1 and 0 can be used in place of true and false). An absent attribute is considered to be false. The following example creates a new window with a menubar, specific dimension and no toolbar:
newWindowObj = window.open("URL", "WindowName", "toolbar=0, menubar=1, innerHeight=200, innerWidth=300");
Closing Browser Windows using JavaScriptA window can be closed using the window object's close() method. The name of the window (specified in the open() method) should be referenced when performing a close so that you are certain to close the correct window. For example the following code creates a new window and creates a pushbutton which, when clicked, closes the new window:
<script language="JavaScript" type="text/javascript">
newWindowObj = window.open ("", "MyWindow");
</script>
<form action="null">
<input type="button" value="Close Window" onclick="newWindowObj.close()" />
</form>
It is also possible to close the window that opened the current window using the opener property of the current window object: window.opener.close() This will close the window that opened the window in which the above script is run. Moving and Resizing WindowsA window can be moved to specific coordinates on the screen using the window object's moveTo() method which takes x and y coordinates as arguments. The following example moves a new window to location 100, 200 on the screen when the "Move Window" button is pressed:
<script language="JavaScript" type="text/javascript">
newWindowObj = window.open ("", "MyWindow");
</script>
<form action="null">
<input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" />
</form>
In addition to moving a window to a specific new location is also possible to move a window relative to its current location on the screen using the moveBy() method of the JavaScript window object. Once again the method takes x and y values that are added to the current x and y coordinates of the specified window. Negative values can be used to change the direction of the movement:
<script language="JavaScript" type="text/javascript">
newWindowObj = window.open ("", "MyWindow");
</script>
<form action="null">
<input type="button" value="Move Window" onclick="newWindowObj.moveTo(100, 200)" />
</form>
The window resizeTo() and resizeBy() methods work similarly in that they allow you to change the size of a window either to a specific size, or to a new size relative to the current size. Changing Window FocusWhen a window is the currently selected window on the screen it is said to have focus. Typically, clicking with the mouse pointer in a window gives that window focus. With JavaScript it is possible to programmatically change the focus of a window using the focus() and blur() methods. The following example displays a new window, blurs it so that the opening window still has focus and provides a button to switch focus to the new window:
<script language="JavaScript" type="text/javascript">
newWindowObj = window.open ("", "MyWindow");
newWindowObj.blur();
</script>
<form action="null">
<input type="button" value="Focus New Window" onclick="newWindowObj.focus()" />
</form>
Displaying Message Box DialogsThe JavaScript window object provides methods to display three types of message dialogs, the alert, confirmation and prompt dialogs:
<form action="null">
<input type="button" value="Show Alert" onclick="window.alert('You do not have a valid password')" />
</form>
<script language="JavaScript" type="text/javascript">
function showConfirmation()
{
var result = confirm("Would you like to continue?");
if (result)
document.write("Continue");
else
document.write("Do not continue");
}
</script>
<form action="null">
<input type="button" value="Show Confirmation" onclick="showConfirmation()" />
</form>
<script language="JavaScript" type="text/javascript">
function showPrompt()
{
var userInput = prompt("Please enter your name:");
document.write("Hello, " + userInput);
}
</script>
<form action="null">
<input type="button" value="Show Prompt" onclick="showPrompt()" />
</form>
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| You are visitor 01402520 — GeezerVison does not store the pages you look up. Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
