VirtualMV/JavaScript/WindowObject

From WikiEducator
Jump to: navigation, search




Introduction

The window object is the top level object and contains all of the objects that build up a web page.

VmvIcon Objective.png

Window object

By the end of this page you will be able to:

  • Use the Window object to open a new browser window and include html and data from a parent window.

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&nbsp;" + 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


VmvIcon Notes.png

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."

VmvIcon References.png References

  1. 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. (2017). In WikiEducator/VirtualMV wiki. Retrieved November 20, 2017, from http://wikieducator.org/VirtualMV/JavaScript/WindowObject    (zotero)