JavaScript Tutorial/Window/Window Object

Материал из Web эксперт
Перейти к: навигация, поиск

Window

The Window object is a JavaScript object created when a <body>, <frameset>, or <frame> tag is encountered.

Instances of this object can also be created by using the Window.open() method.

Methods/Properties Description alert Loads an alert dialog box with the text string passed. back Loads the previous page in place of the window instance. blur Removes the focus from a window. captureEvents Sets the window to capture all events of a specified type. clearInterval Clears the interval set with the setInterval method. clearTimeout Clears the timeout set with the setTimeout method. close Closes the instance of the window. confirm Displays a confirmation dialog box. disableExternalCapture Disables external event capturing. enableExternalCapture Enables external event capturing for the pages loaded from other servers. find Displays a Find dialog box where the user can enter text to search the _current page. focus Assigns the focus to the specified _window instance. forward Loads the next page in place of the window instance. handleEvent Invokes the handler for the event passed. home Loads the user"s specified home page in place of the window instance. moveBy Moves the window by the amounts specified. moveTo Moves the window to the specified location. open Opens a new instance of a window. print Invokes the Print dialog box so the user can print the current window. prompt Displays a prompt dialog box. releaseEvents Releases the captured events of a specified type. resizeBy Resizes the window by the specified amount. resizeTo Resizes the window to the specified size. routeEvent Passes the events of a specified type to be handled natively. scroll Scrolls the document in the window to a specified location. scrollBy Scrolls the document in the window by a specified amount. scrollTo Scrolls the document, both width and height, in the window to a specified location. setInterval Invokes a function or evaluates an expression every time the number of milliseconds has passed. setTimeout Invokes a function or evaluates an expression when the number of milliseconds has passed. stop Stops the current window from loading other items within it. closed Specifies if the window instance has been closed. defaultStatus Is the default message in the window"s status bar. document References all the information about the document within this window. See the Document object for more information. frames References all the information about the frames within this window. See the Frame object for more information. history References the URLs the user has _visited. innerHeight Contains the height of the display area of the current window in pixels. innerWidth Contains the width of the display area of the current window in pixels. length Represents the number of frames in the current window. location Contains the current URL loaded into the window. locationbar Reference to the browser"s location bar. menubar Reference to the browser"s menu bar. name Name of the window. opener Contains the name of the window from which a second window was opened. outerHeight Contains the height of the outer area of the current window in pixels. outerWidth Contains the width of the outer area of the current window in pixels. pageXOffset Contains the x-coordinate of the current window. pageYOffset Contains the y-coordinate of the current window. parent Reference to the upper most window that is displaying the current frame. personalbar Reference to the browser"s personal bar. scrollbars Reference to the browser"s scroll bars. self Reference for the current window. status Reference to the message in the window"s status bar. statusbar Reference to the browser"s status bar. toolbar Reference to the browser"s tool bar. top Reference to the upper most window that is displaying the current frame. window Reference for the current window.

When using the close() and open() methods, you must take the instance"s name when called within an event handler.



<html>
    <head>
    <script language="JavaScript">
    <!--
    function openWin(){
      var myBars = "directories=no,location=no,menubar=no,status=no";
      myBars += ",titlebar=no,toolbar=no";
      var myOptions = "scrollbars=no,width=400,height=200,resizeable=no";
      var myFeatures = myBars + "," + myOptions;
      var myReadme = "This is a test";
      var newWin = open("", "myWin", myFeatures);
      newWin.document.writeln("<form>");
      newWin.document.writeln("<table>");
      newWin.document.writeln("<tr><td>Readme");
      newWin.document.writeln("</td></tr>");
      newWin.document.writeln("<tr valign=TOP><td>");
      newWin.document.writeln("<textarea cols=45 rows=7 wrap=SOFT>");
      newWin.document.writeln(myReadme + "</textarea>");
      newWin.document.writeln("</td></tr>");
      newWin.document.writeln("<tr><td>");
      newWin.document.writeln("<input type=BUTTON value="Close"");
      newWin.document.writeln(" onClick="window.close()">");
      newWin.document.writeln("</td></tr>");
      newWin.document.writeln("</table></form>");
      newWin.document.close();
      newWin.focus();
    }
    -->
    </script>
    </head>
    <body>
    <form>
      <b>Click the following button to open a new window: </b>
      <input type=BUTTON value="Open" onClick="openWin()">
    </form>
    </body>
    </html>


window.alert()

Syntax



window.alert(string)


window.back()

The back() method simulates the user clicking the Back button on the browser.

It returns the browser"s page or frame to the previous page or frame.



<html>
    <body>
    <form>
      <input type=BUTTON value="Back" onClick="window.back()">
      <input type=BUTTON value="Forward" onClick="window.forward()">
    </form>
    </body>
    </html>


window.captureEvents()

Syntax



window.captureEvents(event)
    window.captureEvents(event1 | event2 | eventN)


window.clearInterval()

Syntax



window.clearInterval(interval)


window.clearTimeout()

Syntax



window.clearTimeout(timeout)


window.defaultStatus

Syntax



window.defaultStatus = string


window.disableExternalCapture()

Syntax



window.disableExternalCapture()


window.document

Syntax



window.document.event
    window.document.method()
    window.document.property


The document property is a child object of the Window object created when instances of the <body> tag are encountered.

Event Handlers/Methods/Properties Description onClick Called when the document is clicked. onDblClick Called when the document is double-clicked. onKeyDown Called when a key is pressed down. This occurs before an onKeyPress event handler. onKeyPress Called when a key is pressed down immediately after an onKeyDown event handler. onKeyUp Called when a key is released. onMouseDown Called when the mouse button is pressed down. onMouseUp Called when the mouse button is released. captureEvents() Allows you to capture all events of the type passed in the document. close() Closes the stream to the document. getSelection() Returns the currently selected text. handleEvent() Invokes the handler for the event specified. open() Opens a stream to the document. releaseEvents() Releases the events that you have captured of the type passed in the document. routeEvent() Passes the specified event along the normal route of execution. write() Writes the string passed to the document. writeln() Writes the string, followed by a newline character, to the document. alinkColor Specifies the ALINK attribute of the <body> tag. anchors Array containing each <a> tag in a document. applets Array containing each <applet> tag in a document. bgColor Specifies the BGCOLOR attribute of the <body> tag. cookie Specifies a cookie. domain Specifies the domain that served the document. embeds Array containing each <embed> tag in a document. fgColor Specifies the TEXT attribute of the <body> tag. formName The actual name of each <form> in a document. forms Array containing each <form> tag in a document. images Array containing each tag in a document. lastModified Specifies the date the document was last changed. layers Array containing each <layer> tag in a document. linkColor Specifies the LINK attribute of the <body> tag. links Array containing each <a> and <area> tag in a document. plugins Array containing each plug-in in a document. referrer Specifies the referral URL. title Contains the text between the beginning and ending </title> tags. URL Specifies the URL of the document. vlinkColor Specifies the VLINK attribute of the <body> tag.

window.enableExternalCapture()

Syntax



window.enableExternalCapture(event)


window.find()

The find() method displays a find dialog box when invoked.

This allows a user to search for a string in the page from which it was invoked.



<html>
    <script language="JavaScript1.2">
    <!--
      window.find();
    -->
    </script>
</html>


window.focus()

The focus() method places focus on the window.



<html>
    <script language="JavaScript">
    <!--
    function openWin(){
      var myBars = "directories=no,location=no,menubar=no,status=no";
      myBars += ",titlebar=no,toolbar=no";
      var myOptions = "scrollbars=no,width=400,height=200,resizeable=no";
      var myFeatures = myBars + "," + myOptions;
      newWin = open("", "myDoc", myFeatures);
      newWin.document.writeln("Here is the child window");
      newWin.document.close();
      self.focus();
    }
    -->
    </script>
    <body>
    <form>
      <input type=BUTTON value="Open" onClick="openWin()">
    </form>
    </body>
    </html>


window.forward()

The forward() method simulates the user clicking the Forward button on the browser.

It returns the browser"s page or frame to the next page or frame in its history.



<html>
    <body>
    <form>
      <input type=BUTTON value="Back" onClick="window.back()">
      <input type=BUTTON value="Forward" onClick="window.forward()">
    </form>
    </body>
    </html>


window.frames

Syntax



window.frames["frameName"]
    window.frames[num]


window.frames.length

Syntax



window.frames["frameName"].length
    window.frames[num].length


window.home()

The home() method simulates the user clicking the Home button on the browser.

It takes the browser to the user"s specified home page.



<html>
    <body>
    <form>
    <h3>Home James!</h3>
      <input type=BUTTON value="Home" onClick="window.home()">
    </form>
    </body>
    </html>


window.innerHeight

The innerHeight property references the pixel height of the document within the browser"s frame.

This does not include any of the toolbars that makes up the frame itself.



<html>
    <head>
    <script language="JavaScript1.2">
    <!--
    function openWin(){
      var myBars = "directories=no,location=no,menubar=no,status=no";
      myBars += ",titlebar=no,toolbar=no";
      var myOptions = "scrollbars=no,width=400,height=200,resizeable=no";
      var myFeatures = myBars + "," + myOptions;
      var newWin = open("", "myDoc", myFeatures);
      newWin.document.writeln("<h4>Properties for this Window</h4>");
      newWin.document.writeln("innerHeight: " + newWin.innerHeight + "<br>");
      newWin.document.writeln("innerWidth: " + newWin.innerWidth + "<br>");
      newWin.document.writeln("outerHeight: " + newWin.outerHeight + "<br>");
      newWin.document.writeln("outerWidth: " + newWin.outerWidth + "<br>");
      newWin.document.writeln("<form>");
      newWin.document.writeln("<input type=BUTTON value="Close"");
      newWin.document.writeln(" onClick="window.close()">");
      newWin.document.writeln("</form>");
      newWin.document.close();
    }
    -->
    </script>
    </head>
    <body>
    <form>
      <input type=BUTTON value="Open" onClick="openWin()">
    </form>
    </body>
    </html>


window.innerWidth

The innerWidth property references the pixel width of the document within the browser"s frame.

This does not include any of the toolbars that makes up the frame itself.



<html>
    <head>
    <script language="JavaScript1.2">
    <!--
    function openWin(){
      var myBars = "directories=no,location=no,menubar=no,status=no";
      myBars += ",titlebar=no,toolbar=no";
      var myOptions = "scrollbars=no,width=400,height=200,resizeable=no";
      var myFeatures = myBars + "," + myOptions;
      var newWin = open("", "myDoc", myFeatures);
      newWin.document.writeln("<h4>Properties for this Window</h4>");
      newWin.document.writeln("innerHeight: " + newWin.innerHeight + "<br>");
      newWin.document.writeln("innerWidth: " + newWin.innerWidth + "<br>");
      newWin.document.writeln("outerHeight: " + newWin.outerHeight + "<br>");
      newWin.document.writeln("outerWidth: " + newWin.outerWidth + "<br>");
      newWin.document.writeln("<form>");
      newWin.document.writeln("<input type=BUTTON value="Close"");
      newWin.document.writeln(" onClick="window.close()">");
      newWin.document.writeln("</form>");
      newWin.document.close();
    }
    -->
    </script>
    </head>
    <body>
    <form>
      <input type=BUTTON value="Open" onClick="openWin()">
    </form>
    </body>
    </html>


window.length

The length property represents the number of frames within a window.

This returns the same results as Window.frames.length.



<html>
    <script language="JavaScript">
    <!--
      document.write( win.length );
    -->
    </script>
</html>


window.locationbar

The real use of this property is to access its visible property.



window.locationbar.visible


window.menubar

The real use of this property is to access its visible property.



window.menubar.visible


window.moveBy()

Syntax



window.moveBy(numHort, numVert)


window.moveTo()

Syntax



window.moveTo(numX, numY)


window.name

The name property returns the name of the window. This property contains the name specified when new windows are created using the Window.open() method.



<html>
    <head>
    <script language="JavaScript">
    <!--
    function openWin(){
      var myBars = "directories=no,location=no,menubar=no,status=no";
      myBars += ",titlebar=no,toolbar=no";
      var myOptions = "scrollbars=no,width=400,height=200,resizeable=no";
      var myFeatures = myBars + "," + myOptions;
      var newWin = open("", "myDoc", myFeatures);
      newWin.document.writeln("This window\"s name is: " + newWin.name + "<br>");
      newWin.document.writeln("<form>");
      newWin.document.writeln("<input type=BUTTON value="Close"");
      newWin.document.writeln(" onClick="window.close()">");
      newWin.document.writeln("</form>");
      newWin.document.close();
    }
    -->
    </script>
    </head>
    <body>
    <form>
      <input type=BUTTON value="Open" onClick="openWin()">
    </form>
    </body>
    </html>


window.onBlur

The onBlur event handler is fired when the focus is moved away from that particular window instance.



<html>
    <frameset cols="150,*">
      <frame name="toc"
             src="/toc.htm"
             onBlur="myBlurFunc()"
             marginwidth=1 marginheight=1 scrolling=AUTO>
      <frame name="body"
             src="/body.htm"
             marginwidth=10 marginheight=5 scrolling=AUTO>
    </frameset>
</html>


window.onDragDrop

The onDragDrop event handler is fired when the user drops an object.



<html>
    <body onDragDrop="return(confirm("Are you sure you want to continue?"))">
    </body>
    Try to drop an element on this page.
    </html>


window.onError

The onError event handler is fired when an error occurs loading the page.



<html>
    <body onError="alert("Error: There has been an error loading this page.")">
</html>


window.onFocus

The onFocus event handler is fired when the focus is placed on that particular window instance.



<html>
    <frameset cols="150,*">
      <frame name="toc"
             src="/toc.htm"
             onFocus="myFocusFunc()"
             marginwidth=1 marginheight=1 scrolling=AUTO>
      <frame name="body"
             src="/body.htm"
             marginwidth=10 marginheight=5 scrolling=AUTO>
    </frameset>
</html>


window.onLoad

The onLoad event handler is fired when the page has finished loading.

The onLoad event handler in the <body> of a document fires before the event handler in the <frameset> tag.



<html>
    <body onLoad="alert("The document has completely loaded.")">
</html>


window.onMove

The onMove event handler is fired when the window it is referenced in is moved.



<html>
    <body onMove="alert("Do NOT move this window!")">
</html>


window.onResize

The onResize event handler is fired when the window is resized.



<html>
    <body onResize="alert("Do NOT resize this window!")">
</html>


window.onUnLoad

The onUnLoad event handler is fired when the page is unloaded. This occurs when the user leaves the page for another page.

The onUnLoad event handler in a document will fire before an event handler loaded in the <frameset> tag.



<html>
    <body onUnLoad="alert("Please do not leave!")">
</html>


window.open()

Syntax



window.open(pageURL, name, parameters)


The open() method creates a new instance of a window. It loads the pageURL. The ACTION attribute of the <form> tag and the TARGET attribute of the <a> tag can reference the window.

You must use comma to separate each of these options and do not insert any spaces.

Parameters That Can Be Passed When Creating a New Window

Parameter Initialize With Description alwaysLowered yes/no tells the window to stay behind all other windows. This must be done in signed scripts. alwaysRaised yes/no tells the window to stay on top of all other windows. This must be done in signed scripts. dependent yes/no opens the window as a true child window of the parent window. directories yes/no Specifies if the Directory Bar on Navigator 2 and 3 is visible. height pixel value Sets the height of the window. hotkeys yes/no Disables all but the Security and Quit hotkeys in a new window with no Menu Bar. innerHeight pixel value Sets the height of the document. innerWidth pixel value Sets the width of the document. location yes/no Specifies if the Location Bar is visible. menubar yes/no Specifies if the Menu Bar is visible. outerHeight pixel value Sets the height of the window, including the chrome. outerWidth pixel value Sets the width of the window, including the chrome. resizable yes/no Specifies if the window can be resized. screenX pixel value Sets the distance of the window from the left side of the screen. screenY pixel value Sets the distance of the window from the top of the screen. scrollbars yes/no Specifies if the Scroll Bars are visible. titlebar yes/no Specifies if the Title Bar is visible. toolbar yes/no Specifies if the toolbar is visible. width pixel value Sets the width of the window. z-lock yes/no Specifies that the window is not supposed to be located above other windows when it is made active.

window.opener

Syntax



window.opener
    window.opener.method
    window.opener.property


window.outerHeight

The outerHeight property references the pixel height of the browser"s frame.

This includes any of the toolbars or other "chrome" that makes up the frame itself.



<html>
    <head>
    <script language="JavaScript1.2">
    <!--
    function openWin(){
      var myBars = "directories=no,location=no,menubar=no,status=no";
      myBars += ",titlebar=no,toolbar=no";
      var myOptions = "scrollbars=no,width=400,height=200,resizeable=no";
      var myFeatures = myBars + "," + myOptions;
      var newWin = open("", "myDoc", myFeatures);
      newWin.document.writeln("<h4>Properties for this Window</h4>");
      newWin.document.writeln("innerHeight: " + newWin.innerHeight + "<br>");
      newWin.document.writeln("innerWidth: " + newWin.innerWidth + "<br>");
      newWin.document.writeln("outerHeight: " + newWin.outerHeight + "<br>");
      newWin.document.writeln("outerWidth: " + newWin.outerWidth + "<br>");
      newWin.document.writeln("<form>");
      newWin.document.writeln("<input type=BUTTON value="Close"");
      newWin.document.writeln(" onClick="window.close()">");
      newWin.document.writeln("</form>");
      newWin.document.close();
    }
    -->
    </script>
    </head>
    <body>
    <form>
      <input type=BUTTON value="Open" onClick="openWin()">
    </form>
    </body>
    </html>


window.outerWidth

The outerWidth property references the pixel width of the browser"s frame.

This includes any of the toolbars or other "chrome" that make up the frame itself.



<html>
    <head>
    <script language="JavaScript1.2">
    <!--
    function openWin(){
      var myBars = "directories=no,location=no,menubar=no,status=no";
      myBars += ",titlebar=no,toolbar=no";
      var myOptions = "scrollbars=no,width=400,height=200,resizeable=no";
      var myFeatures = myBars + "," + myOptions;
      var newWin = open("", "myDoc", myFeatures);
      newWin.document.writeln("<h4>Properties for this Window</h4>");
      newWin.document.writeln("innerHeight: " + newWin.innerHeight + "<br>");
      newWin.document.writeln("innerWidth: " + newWin.innerWidth + "<br>");
      newWin.document.writeln("outerHeight: " + newWin.outerHeight + "<br>");
      newWin.document.writeln("outerWidth: " + newWin.outerWidth + "<br>");
      newWin.document.writeln("<form>");
      newWin.document.writeln("<input type=BUTTON value="Close"");
      newWin.document.writeln(" onClick="window.close()">");
      newWin.document.writeln("</form>");
      newWin.document.close();
    }
    -->
    </script>
    </head>
    <body>
    <form>
      <input type=BUTTON value="Open" onClick="openWin()">
    </form>
    </body>
    </html>


window.pageXOffset

The pageXOffSet property reflects the current horizontal pixel location of the top-left corner of the document.



<html>
    <head>
    <script language="JavaScript1.2">
    <!--
    function showLocation(){
      var x = self.pageXOffset;
      var y = self.pageYOffset
      var currX = "X-coordinate: " + x + "\n";
      var currY = "Y-coordinate: " + y;
      window.alert(currX + currY);
    }
    -->
    </script>
    </head>
    <body>
    <form>
      <input type=BUTTON value="Show Location" onClick="showLocation()">
    </form>
    </body>
    </html>


window.pageYOffset

The pageYOffSet property reflects the current vertical pixel location of the top-left corner of the document.



<html>
    <head>
    <script language="JavaScript1.2">
    <!--
    function showLocation(){
      var x = self.pageXOffset;
      var y = self.pageYOffset
      var currX = "X-coordinate: " + x + "\n";
      var currY = "Y-coordinate: " + y;
      window.alert(currX + currY);
    }
    -->
    </script>
    </head>
    <body>
    <form>
      <input type=BUTTON value="Show Location" onClick="showLocation()">
    </form>
    </body>
    </html>


window.parent

Syntax



window.parent.frames[num]
    window.parent.frameName


window.personalbar

Syntax



window.personalbar.property


window.print()

The print() method simulates the user clicking the Print button on the browser.

It tells the browser to open the print dialog box to print the current page.



<html>
    <body>
    <form>
      <input type=BUTTON value="Print" onClick="window.print()">
    </form>
    </body>
    </html>


window.prompt()

Syntax



window.prompt(string1, string2)


window.releaseEvents()

Syntax



window.releaseEvents(event)
    window.releaseEvents(event1 | event2 | eventN)


window.resizeBy()

Syntax



window.resizeBy(numHort, numVert)


window.resizeTo()

Syntax



window.resizeTo(numWidth, numHeight)


window.routeEvent()

Syntax



window.routeEvent(event)


window.scroll()

Syntax



window.scroll(numX, numY)


window.scrollbars

Syntax



window.scrollbars.property


window.scrollBy()

Syntax



window.scrollBy(numHort, numVert)


window.scrollTo()

Syntax



window.scrollTo(numX, numY)


window.self

Syntax



window.self.method
    window.self.property


window.setInterval()

Syntax



window.setInterval(expression, milliseconds)
    window.setInterval(function, milliseconds)
    window.setInterval(function, milliseconds, arg1, ..., argN)


window.status

Syntax



window.status = string


window.statusbar

Syntax



window.statusbar.property


window.stop()

Syntax



window.stop()


window.toolbar

Syntax



window.toolbar.property


window.top

Syntax



window.top.frames[num]
    window.top.frameName
    window.top.method
    window.top.property


The top property contains a reference to the topmost browser window of any frames or pages.

Источник — «http://wbex.ru/index.php?title=JavaScript_Tutorial/Window/Window_Object&oldid=9247»