VirtualMV/JavaScript/WindowObject
Introduction
The window object is the top level object and contains all of the objects that build up a web page.
|
Window objectBy the end of this page you will be able to:
|
Window object
Window.open(URL, windowName, windowproperties)
- the window properties from JavaScript 1.1 can include the following:
- toolbar, location, directories,status, menubar, scrollbars, resizable, copyhistory, width=[pixels], height=[pixels]
Example
window.open('js8_01.html', 'newWindow', 'toolbar,scrollbars,resizable,width=300,height=200')
You can also use window.print to provide a print button.
<form> <input type=button name=print value="Print page" onClick="javascript:window.print()"> </form>
Windows (js8_01)
Open a new browser window
<html> <head> <script type="text/javascript"> function fnOpenWindow() { window.open("http://www.eit.ac.nz") } </script> </head> <body> <form> <input type=button value="Open Window" onclick="fnOpenWindow()" /> </form> </body> </html>
Example js8_01
Windows (js8_02)
Open a new browser window with specified properties
<html> <head> <title>JavaScript (js8_02)</title> <script type="text/javascript"> function fnOpenWindow(){ window.open("http://www.eit.ac.nz","winNew", "toolbar=yes,location=yes,directories=no,\ status=no,menubar=yes,scrollbars=yes,resizable=no,\ copyhistory=yes,width=400,height=400") } </script> </head> <body> <form> <input type="button" value="Open Window" onclick="fnOpenWindow()"> </form> </body> </html>
Note: I have used the \ to break the window properties string across several lines. You can put this all on one line.
Example js8_02
Windows (js8_03)
<html> <head> <title>JavaScript (js8_03)</title> <script type="text/javascript"> function fnOpenWindow() { strName=document.frmForm.txtName.value; winMsg=window.open("","DisplayWindow","scrollbars=yes, resizable=yes"); winMsg.document.write("Hello there " + strName); } </script> </head> <body> <form name="frmForm"> Enter your name: <input type="text" value="" name="txtName" /> <input type="button" value="Open Window" onclick="fnOpenWindow()" /> </form> </body> </html>
Example js8_03
Windows (js8_04) Controlling when to display a window
And now for a little example that looks at whether a check box is checked before allowing the window to be displayed. You could use this to only display a from once the data is validated (If the data validates ok set the check box). For a user you may like to make the check box hidden (but not while you are testing it!)
<html><head> <script type="text/javascript"> function fnOpenWindow() { /* chkBoxOk=document.frmChoose.chkBox; //being replaced by getElements */ var chkBoxOk = document.getElementById('chkBox'); if (chkBoxOk.checked) { winMsg=window.open("","winDisplay"); winMsg.document.write("<html><head><title>Show Booking Form</title>"); winMsg.document.write("</head>"); winMsg.document.write("<body>"); winMsg.document.write("<p>You chose " + chkBoxOk.value + "</p>"); winMsg.document.write("</body></html>"); } else { alert("Box not checked"); } } </script> </head><body> <form name="frmChoose"> <input type="checkbox" id="chkBox" value="Ok" />Ok<br /> <input type=button value="Display Booking" onclick="fnOpenWindow()"> </form> </body></html>
Example js8_04
Windows (js8_05) Including styles in a new Window
And now for a more sophisticated example to show you how to build an entire page with styles.
<html> <head> <title>JavaScript (js8_03)</title> <script type="text/javascript"> function fnOpenWindow() { winMsg=window.open("","DisplayWindow","scrollbars=yes, resizable=yes"); strName1=document.frmForm.txtResult5.value; strName2=document.frmForm.txtResult8.value; winMsg.document.write( "<html><head><title>Show Calcs</title>" + "<style type='text/css'>"+ "h1 { color: #00FF00; }" + "</style></head><body>" + "<h1>Equipment (h1 in green)</h1>" + "Equipment Total " + strName1 + "<br />" + "Extras Total" + strName2 + "<p style = '{color:red}'>This is a red paragraph</p> + "</body></html>"); } </script> </head> <body> <form name="frmForm"> Enter two numbers: <input type="text" value="" name="txtResult5" /> <input type="text" value="" name="txtResult8" /> <input type="button" value="Open Window" onclick="fnOpenWindow()" /> </form> </body> </html>
Example js8_05
|
1. (May 7, 2009) CSS doesn't want to work in Google Chrome (Works in IE and Firefox) 2. Be very careful with the quotes in quotes, for example: winMsg.document.write("<p style = '{color:red}'>This is a red paragraph</p>"); 3. The name of the window CANNOT include spaces. so winMsg=window.open("","DisplayWindow","scrollbars=yes, resizable=yes"); // is OK winMsg=window.open("","Display Window","scrollbars=yes, resizable=yes"); //is NOT OK |
Extensions
There are other interesting window object properties for you to explore
status
The status bar is the bar on the lower left side of the browser and is used to display temporary messages. The following example writes a message to the status bar
window.status = "This message displays in the window status bar."
References
- ↑ The Computer Technology Documentation Project(n.d.) JavaScript Window Object. Retrieved May 30, 2010 from http://www.comptechdoc.org/independent/web/cgi/javamanual/javawindow.html
|
virtualMV | Superquick wiki guide | Please give me some feedback |
VirtualMV/JavaScript/WindowObject. (2024). In WikiEducator/VirtualMV wiki. Retrieved December 22, 2024, from http:https://wikieducator.org/VirtualMV/JavaScript/WindowObject (zotero)
|
