JavaScript DHTML/Window Browser/Window — различия между версиями

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

Текущая версия на 07:28, 26 мая 2010

A Main Window Document

  
<HTML>
<HEAD>
<TITLE>Main Document</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function newWindow() {
    window.open("http://www.wbex.ru","sub","HEIGHT=200,WIDTH=200")
}
</SCRIPT>
</HEAD>
<BODY>
</FORM>
<INPUT TYPE="button" VALUE="New Window" onClick="newWindow()">
<BR>
Text incoming from subwindow:
<INPUT TYPE="Text" NAME="entry">
<FORM>
</BODY>
</HTML>



Capturing Click Events in the Window

  
<HTML>
<HEAD>
<TITLE>Window Event Capture</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
function flash(e) {
    if (e.modifiers = Event.CONTROL_MASK && e.target.name.indexOf("button") == 0) {
        document.bgColor = "red";
        setTimeout("document.bgColor = "white"", 500);
    }
    routeEvent(e)
}
window.captureEvents(Event.CLICK);
window.onclick = flash;
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<FORM NAME="buttons">
<B>Turn window click event capture on or off (Default is "On")</B><P>
<INPUT NAME="captureOn" TYPE="button" VALUE="Capture On"  onClick="window.captureEvents(Event.CLICK)">&nbsp;
<INPUT NAME="captureOff" TYPE="button" VALUE="Capture Off" onClick="window.releaseEvents(Event.CLICK)">
<HR>
<B>Ctrl+Click on a button to see if clicks are being captured by the window
 (background color will flash red):</B><P>
<UL>
<LI><INPUT NAME="button1" TYPE="button" VALUE="Informix" onClick="alert("You
 clicked on Informix.")">
<LI><INPUT NAME="button2" TYPE="button" VALUE="Oracle" onClick="alert("You
 clicked on Oracle.")">
<LI><INPUT NAME="button3" TYPE="button" VALUE="Sybase" onClick="alert("You
 clicked on Sybase.")">
</UL>
</FORM>
</BODY>
</HTML>



Checking Before Closing a Window

  
<HTML>
<HEAD>
<TITLE>window.closed Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var newWind;
var isIE3 = (navigator.appVersion.indexOf("MSIE 3") != -1) ? true : false;
function newWindow() {
    newWind = window.open("","subwindow","HEIGHT=200,WIDTH=200")
    if (newWind.opener == null) {
        newWind.opener = window
    }
    setTimeout("finishNewWindow()", 100)
}
function finishNewWindow() {
    var output = ""
    output += "<HTML><BODY><H1>A Sub-window</H1>"
    output += "<FORM><INPUT TYPE="button" VALUE="Close Main Window""
    output +="onClick="window.opener.close()"></FORM></BODY></HTML>"
    newWind.document.write(output)
    newWind.document.close()
}

function closeWindow() {
    if (isIE3) {
        newWind = window.open("","subwindow","HEIGHT=200,WIDTH=200")    
    }
    if (newWind && !newWind.closed) {
        newWind.close()
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Open Window" onClick="newWindow()"><BR>
<INPUT TYPE="button" VALUE="Close it if Still Open" onClick="closeWindow()">
</FORM>
</BODY>
</HTML>



Close window and open document in new window

  

<html>
<head>
<title>Javascript examples</title>
<script language="javascript">
<!--
function CloseWindow() {
  window.close();
}
function CloseAndNewPage() {
  window.close();
  opener.location.href = "http://www.wbex.ru";
}
//-->
</script>

</head>
<body bgcolor="#ffffff" text="#000000">
This is a new Window<br>
<br>
<a href="javascript:CloseWindow()">Close This Window</a><br>
<br>
<a href="javascript:CloseAndNewPage()">Close This Window And Open This Document in Original Window</a>
</body>
</html>



Communicating with a New Window

  
<html>
<head>
<title>Recipe 6.6</title>
<script type="text/javascript">
var newWindow;
function makeNewWindow() {
    if (!newWindow || newWindow.closed) {
        newWindow = window.open("","sub","status,height=200,width=300");
        setTimeout("writeToWindow()", 50);
    } else if (newWindow.focus) {
        newWindow.focus();
    }
}
function writeToWindow() {
    var newContent = "<html><head><title>Secondary  Window</title></head>";
    newContent += "<body><h1>This is a script-created window.</h1>";
    newContent += "</body></html>";
    newWindow.document.write(newContent);
    newWindow.document.close();
}
</script>
</head>
<body>
<h1>Communicating with a New Window</h1>
<hr /> 
<form>
<input type="button" value="Create New Window" onclick="makeNewWindow();" />
</form>
</body>
</html>



Contents of a Main Window Document That Generates a Second Window

  
<HTML>
<HEAD>
<TITLE>Master of all Windows</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
var myWind
function doNew() {
    if (!myWind || myWind.closed) {
        myWind = window.open("http://www.wbex.ru/","subWindow",
           "HEIGHT=200,WIDTH=350,resizable")
    } else {
        // bring existing subwindow to the front
        myWind.focus()
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="input">
Select a color for a new window:
<INPUT TYPE="radio" NAME="color" VALUE="red" CHECKED>Red
<INPUT TYPE="radio" NAME="color" VALUE="yellow">Yellow
<INPUT TYPE="radio" NAME="color" VALUE="blue">Blue
<INPUT TYPE="button" NAME="storage" VALUE="Make a Window" onClick="doNew()">
<HR>
This field will be filled from an entry in another window:
<INPUT TYPE="text" NAME="entry" SIZE=25>
</FORM>
</BODY>
</HTML>



Creating an always Raised Window

  
<HTML>
<HEAD>
<TITLE>Simple Signed Script</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function newRaisedWindow() {
    var newWindow = window.open("","","HEIGHT=100,WIDTH=300,alwaysRaised")
    var newContent = "<HTML><BODY><B>message</B>"
    newContent += "<FORM><INPUT TYPE="button" VALUE="OK""
    newContent += "onClick="self.close()"></FORM></BODY></HTML>"
    newWindow.document.write(newContent)
    newWindow.document.close()
}
</SCRIPT>
</HEAD>
<BODY>
<B>This button generates an always-raised new window.</B>
<FORM>
<INPUT TYPE="button" VALUE="New "Always Raised" Window" onClick="newRaisedWindow()">
</BODY>
</HTML>



Creating a New Window

  

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>New Window</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var newWindow
function makeNewWindow() {
    if (!newWindow || newWindow.closed) {
        newWindow = window.open("","","status,height=200,width=300")
        if (!newWindow.opener) {
        newWindow.opener = window
        }
        // force small delay for IE to catch up
        setTimeout("writeToWindow()", 50)
    } else {
        // window"s already open; bring to front
        newWindow.focus()
    }
}
function writeToWindow() {
    // assemble content for new window
    var newContent = "<HTML><HEAD><TITLE>One Sub Window</TITLE></HEAD>"
    newContent += "<BODY><H1>This window is brand new.</H1>"
    newContent += "</BODY></HTML>"
    // write HTML to new window document
    newWindow.document.write(newContent)
    newWindow.document.close() // close layout stream
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="newOne" VALUE="Create New Window"
 onClick="makeNewWindow()">
</FORM>
</BODY>
</HTML>



Hyper link to close window

  
<html>
<head>
<title>Hyper link to close window</title>
<script language="javascript">
<!--
function CloseWindow() {
  window.close();
  window.open("http://www.wbex.ru");
}
//-->
</script>

</head>
<body bgcolor="#ffffff" text="#000000">
This is a new Window<br>
<br>
<a href="javascript:CloseWindow()">Close This Window</a>
</body>
</html>



Make a new window

  
<html>
<head>
<title>A New Window</title>
<script language="JavaScript" type="text/javascript">
var newWindow;
function makeNewWindow() {
    if (!newWindow || newWindow.closed) {
        newWindow = window.open("","sub","status,height=200,width=300");
        if (!newWindow.opener) {
            newWindow.opener = window;
        }
        setTimeout("writeToWindow()", 500);
    } else if (newWindow.focus) {
        newWindow.focus();
    }
}
function writeToWindow() {
    var newContent = "<html><head><title>Sub Window</title></head>";
    newContent += "<body><h1>This is a new window.</h1>";
    newContent += "</body></html>";
    newWindow.document.write(newContent);
    newWindow.document.close(); // close layout stream
}
</script>
</head>
<body>
<form>
<input type="button" value="Create New Window"
 onclick="makeNewWindow();">
</form>
</body>
</html>



Maximize Window for different browser

  
function maximizeWindow() {
    var offset = (navigator.userAgent.indexOf("Mac") != -1 || 
                  navigator.userAgent.indexOf("Gecko") != -1 || 
                  navigator.appName.indexOf("Netscape") != -1) ? 0 : 4;
    window.moveTo(-offset, -offset);
    window.resizeTo(screen.availWidth + (2 * offset), screen.availHeight + (2 * offset));
}



Move a window

  
<HTML>
<BODY>
<H2>Welcome to the New Window!</H2>
<FORM name="myform">
<INPUT TYPE="button" value="Move Window" onClick="window.moveBy(10,10);">
<P>
<INPUT TYPE="button" value="Set a Position" onClick="window.moveTo(240,200);">
<P>
<INPUT TYPE="button" value="Close Window" onClick="window.close();">
</FORM>
</BODY>
</HTML>



New Window Laboratory

  
<HTML>
<HEAD>
<TITLE>window.open() Options</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function makeNewWind(form) {
    var attr = "HEIGHT=300,WIDTH=300"
    for (var i = 0; i < form.elements.length; i++) {
        if (form.elements[i].type == "checkbox") {
            attr += "," + form.elements[i].name + "=" 
            attr += (form.elements[i].checked) ? "yes" : "no"
        }
    }
    var newWind = window.open("http://www.wbex.ru","subwindow",attr)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<B>Select new window options:</B>
<TABLE>
<TR>
    <TD COLSPAN=2>All Browsers Features:</TD>
</TR>
<TR>
    <TD><INPUT TYPE="checkbox" NAME="toolbar">toolbar</TD>
    <TD><INPUT TYPE="checkbox" NAME="location">location</TD>
</TR>
<TR>
    <TD><INPUT TYPE="checkbox" NAME="directories">directories</TD>
    <TD><INPUT TYPE="checkbox" NAME="status">status</TD>
</TR>
<TR>
    <TD><INPUT TYPE="checkbox" NAME="menubar">menubar</TD>
    <TD><INPUT TYPE="checkbox" NAME="scrollbars">scrollbars</TD>
</TR>
<TR>
    <TD><INPUT TYPE="checkbox" NAME="resizable">resizable</TD>
    <TD><INPUT TYPE="checkbox" NAME="copyhistory">copyhistory</TD>
</TR>
<TR>
    <TD COLSPAN=2 ALIGN="middle"><INPUT TYPE="button" NAME="forAll" 
    VALUE="Make New Window" onClick="makeNewWind(this.form)"></TD>
</TR>
</TABLE>
<BR>
</FORM>
</BODY>
</HTML>



Open a new link from a button

  
<html>
<head>
<script type="text/javascript">
function open_win() {
    window.open("http://www.wbex.ru")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Window" onclick="open_win()">
</form>
</body>
</html>



Open a new window and control its appearance

  
<html>
<head>
<script type="text/javascript">
function open_win(){
    window.open("http://www.wbex","_blank",
                "toolbar=yes, location=no, directories=no, 
                        status=no, menubar=no, scrollbars=yes, 
                        resizable=yes, copyhistory=yes, width=600, height=600")
}
</script>
</head>
<body>
<form>
<input type="button" value="Open Window" onclick="open_win()">
</form>
</body>
</html>



Open a new window setting height, width and position

  
 
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
function new_win()
{
    window.open("http://www.wbex.ru","mywin","width=400,height=300,screenX=50,left=50,screenY=50,top=50,status=yes,menubar=yes");
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="myform">
<INPUT TYPE="button" value="Open New Window" onClick="new_win()">
</FORM>
</BODY>
</HTML>



Open a window and center it

  
var myWindow;
function openCenteredWindow(url) {
    var width = 400;
    var height = 300;
    var left = parseInt((screen.availWidth/2) - (width/2));
    var top = parseInt((screen.availHeight/2) - (height/2));
    var windowFeatures = "width=" + width + ",height=" + height + ",status,resizable,left=" + left + ",top=" + top + "screenX=" + left + ",screenY=" + top;
    myWindow = window.open(url, "subWind", windowFeatures);
}



Opening and Closing Windows

  

/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke 
ISBN: 067231763X
Publisher Sams CopyRight 2000
*/
<html>
<head>
<title>Window Open</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
     var newWindow
   
     // Open Window based on user defined attributes     function openWindow() {
   
          // Build the windowFeatures parameter list
          var winAtts = ""
          if (document.winOptions.toolbarOption.checked) {
               winAtts += "toolbar=1," }
          if (document.winOptions.menubarOption.checked) {
               winAtts += "menubar=1," }
          if (document.winOptions.scrollbarsOption.checked) {
               winAtts += "scrollbars=1," }
          if (document.winOptions.resizableOption.checked) {
               winAtts += "resizable=1," }
          if (document.winOptions.statusOption.checked) {
               winAtts += "status=1," }
          if (document.winOptions.locationOption. checked) {
               winAtts += "location=1," }
          if (document.winOptions.directoriesOption.checked) {
               winAtts += "directories=1," }
          if (document.winOptions.copyHistoryOption.checked) {
               winAtts += "copyhistory=1," }
          if (document.winOptions.customSizeOption.checked) {
               winAtts += "height=" + document.winOptions.heightBox.value + ","
               winAtts += "width=" + document.winOptions.widthBox.value + ","
          }
          winAtts = winAtts.substring(0, winAtts.length-2)
   
          // Determine URL and show window
          if (document.winOptions.pageType[1].checked) {
               var urlVar = ""
               urlVar = document.winOptions.urlBox.value
               newWindow = window.open(urlVar,"newWindow",winAtts) }
          else {
               newWindow = window.open("","newWindow",winAtts)
               newWindow.document.write("<H1>Window Open Test</H1><p>")
          }
     }
   
     // Close Window
     function closeWindow() {
          newWindow.close()
     }
// --></SCRIPT>
</head>
   
<body >
<h1><font color="#008040">Window Open Example</font></h1>
<p><i><b>Please select the following display options and then click
the Open Window button. </i></B></p>
<form name="winOptions" method="POST">
<p>Would you like an existing page or one created on the fly?</p>
<input
     type=radio
     checked
     name="pageType"
     value="existing">Existing Page
     <input
          type=text
          size=30
          maxlength=256
          name="urlBox"></p>
     <input
          type=radio
          name="pageType"
          value="dynamic">Dynamic Page</p>
<hr>
<p>Window Attributes:</p>
<pre><input
     type=checkbox
     name="toolbarOption"
     value="ON"
     >Toolbar    <input
     type=checkbox
     name="menubarOption"
     value="ON">Menubar    <input
     type=checkbox
     name="scrollbarsOption"     value="ON">Scrollbars   <input
     type=checkbox
     name="resizableOption"
     value="ON">Resizable</pre>
<pre><input
     type=checkbox
     name="statusOption"
     value="ON">Status     <input
     type=checkbox
     name="locationOption"
     value="ON">Location   <input
     type=checkbox name="directoriesOption"
     value="ON">Directories  <input
     type=checkbox name="copyHistoryOption"
     value="ON">Copy History</pre>
<pre><input
     type=checkbox
     name="customSizeOption"
     value="ON">Custom Size</pre>
<pre>Width: <input
     type=text
     size=5
     maxlength=5
     name="widthBox">  Height: <input
     type=text
     size=5
     maxlength=5
     name="heightBox">               <input
     type="button"
     name="OpenButton"
     value="Open Window"
     onClick="openWindow()">  <input
     type="button"
     name="CloseButton"
     value="Close Window"
     onClick="closeWindow()"></pre>
</form>
<p>&nbsp;</p>
</body>
</html>



Opening a New Window

  
<HTML>
<HEAD>
<TITLE>Party</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function directions() {
 open("http://www.wbex.ru","map")
}
// --></SCRIPT>
</HEAD>
<BODY>
<H1>New Years Eve Party!</H1>
<P><B>When:</B> December 31, 2007 8pm</P>
<P><B>Where:</B> 613 Way #504</P>
<P><B>Dress:</B> Casual </P>
<FORM>
<INPUT TYPE="BUTTON" VALUE="Click for directions"
 ONCLICK="directions()">
</FORM>
<P>by December 28th.
<A HREF="mailto:info@wbex.ru">
 <I>info@wbex.ru</I></A></P>
</BODY>
</HTML>



Open multiple windows at one click

  
<html>
<head>
<script type="text/javascript">
function open_win() {
    window.open("http://www.wbex.ru/")
    window.open("http://www.wbex.ru/")
}
</script>
</head>
<body>
<form>
<input type=button value="Open Windows" onclick="open_win()">
</form>
</body>
</html>



Popup window animation (fly across screen)

  
/*
Examples From
JavaScript: The Definitive Guide, Fourth Edition
Legal matters: these files were created by David Flanagan, and are
Copyright (c) 2001 by David Flanagan.  You may use, study, modify, and
distribute them for any purpose.  Please note that these examples are
provided "as-is" and come with no warranty of any kind.
David Flanagan
*/
<html>
<script>
// Here are the initial values for our animation. 
var x = 0, y = 0, w=200, h=200;  // Window position and size
var dx = 5, dy = 5;              // Window velocity   
var interval = 100;              // Milliseconds between updates
// Create the window that we"re going to move around.
// The javascript: URL is simply a way to display a short document.
// The final argument specifies the window size.
var win = window.open("javascript:"<h1>BOUNCE!</h1>"", "", 
          "width=" + w + ",height=" + h);
// Set the initial position of the window.
win.moveTo(x,y);
// Use setInterval() to call the bounce() method every interval 
// milliseconds. Store the return value so that we can stop the
// animation by passing it to clearInterval().
var intervalID  = window.setInterval("bounce()", interval);
// This function moves the window by (dx, dy) every interval ms.
// It bounces whenever the window reaches the edge of the screen.
function bounce() {
    // If the user closed the window, stop the animation.
    if (win.closed) {
        clearInterval(intervalID);
        return;
    }
    // Bounce if we have reached the right or left edge.
    if ((x+dx > (screen.availWidth - w)) || (x+dx < 0)) dx = -dx;
    // Bounce if we have reached the bottom or top edge.
    if ((y+dy > (screen.availHeight - h)) || (y+dy < 0)) dy = -dy;
    // Update the current position of the window.
    x += dx;
    y += dy;
    // Finally, move the window to the new position.
    win.moveTo(x,y);
}
</script>
<!-- Clicking this button stops the animation! -->
<form>
<input type="button" value="Stop" 
       onclick="clearInterval(intervalID); win.close();">
</form>
</html>



Preventing a Page from Scrolling

  
<html> 
<head> 
<title>onscroll Event Handler</title> 
<script type="text/javascript"> 
window.onscroll = zipBack; 
function zipBack() { 

window.scroll(0,0); 
} 
</script> 

</head> 
<body> 
<h1>onscroll Event Handler</h1> 
<hr /> 
This page always zips back to the top if you try to scroll it. 
<p><iframe frameborder="0" scrolling="no" height="1000" 
src="bofright.htm"></iframe></p> 
</body> 
</html>



Properties and Methods of the Window Object

  
/*
JavaScript Unleashed, Third Edition
by Richard Wagner and R. Allen Wyke 
ISBN: 067231763X
Publisher Sams CopyRight 2000

+------------+----------------+------------------------------------------+
Type           Item             Description
+------------+----------------+------------------------------------------+
Method         atob()           Decodes a string that has been encoded using base 
                                64 encoding. This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
               alert()          Displays an alert dialog box with the text string 
                                passed.
+------------+----------------+------------------------------------------+
               back()           Loads the previous page in place of the window 
                                instance. This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
               blur()           Removes the focus from a window.
+------------+----------------+------------------------------------------+
               btob()           Encodes a string with base 64 encoding. 
                                This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              captureEvents()   Sets the window to capture all events of a specified 
                                type. This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              clearInterval()   Clears the interval set with the setInterval() 
                                method. This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              clearTimeout()    Clears the timeout set with the setTimeout() method.
+------------+----------------+------------------------------------------+
              close()           Closes the instance of the window. This method was 
                                added in JavaScript 1.1.
+------------+----------------+------------------------------------------+
              confirm()          Displays a confirmation dialog box.
+------------+----------------+------------------------------------------+
              crypto.random()    Generates a random string of data whose length is 
                                 specified by the number of bytes passed. This method 
                                 was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
             crypto.signText()   Returns a string of encoded data that represents a 
                                 signed object. This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
             disableExternalCapture()   Disables external event capturing. 
                                        from JavaScript 1.2.
+------------+----------------+------------------------------------------+
             enableExternalCapture()    Enables external event capturing for the 
                                        pages loaded from other servers. This method 
                                        was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
             find()               Displays a Find dialog box in which the user can 
                                  enter text to search the current page. This method 
                                  was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
             focus()              Assigns the focus to the specified window instance. 
                                  This method was added in JavaScript 1.1.
+------------+----------------+------------------------------------------+
              forward()           Loads the next page in place of the window instance. 
                                  This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              handleEvent()       Invokes the handler for the event passed. 
                                  This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              home()              Loads the user"s specified home page in place of 
                                  the window instance. 
                                  This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              moveBy()            Moves the window by the specified amount. 
                                  This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              moveTo()            Moves the window to the specified location. 
                                  This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              open()              Opens a new instance of a window.
+------------+----------------+------------------------------------------+
              print()             Invokes the Print dialog box so the user can 
                                  print the current window. This method was added in 
                                  JavaScript 1.2.
+------------+----------------+------------------------------------------+
              prompt()           Displays a prompt dialog box.
+------------+----------------+------------------------------------------+    
              releaseEvents()    Releases the captured events of a specified type. 
                                 This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              resizeBy()         Resizes the window by the specified amount. 
                                 This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
               resizeTo()        Resizes the window to the specified size. 
                                 This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
               routeEvent()      Passes the events of a specified type to be 
                                 handled natively. 
                                 This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
               scroll()          Scrolls the document in the window to a specified 
                                 location. This method was added in JavaScript 1.1.
+------------+----------------+------------------------------------------+
               scrollBy()        Scrolls the document in the window by a specified 
                                 amount. This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
               scrollTo()        Scrolls the document"s width and height to a 
                                 specified location in the window. This method was 
                                 added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
               setHotKeys()      Allows you to toggle on or off the window hotkeys 
                                 when no menus are present. 
                                 This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              setInterval()      Invokes a function or evaluates an expression 
                                 every time the number of milliseconds has passed. 
                                 This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              setResizable()     Allows you to specify whether a user can resize a 
                                 window. This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              setTimeout()       Invokes a function or evaluates an expression when 
                                 the number of milliseconds has passed.
+------------+----------------+------------------------------------------+
              setZOptions()      Allows you to specify the z-order stacking of a 
                                 window. This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+    
              stop()             Stops the current window from loading another item 
                                 within it. This method was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
Property
+------------+----------------+------------------------------------------+
              closed            Specifies if the window instance has been closed.
+------------+----------------+------------------------------------------+
              crypto            Allows access to Navigator"s encryption features. 
                                This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              defaultStatus     Specifies 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. 
                                This property was added in JavaScript 1.1.
+------------+----------------+------------------------------------------+
              innerHeight       Contains the height in pixels of the display 
                                area of the current window. This property was 
                                added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              innerWidth        Contains the width in pixels of the display area 
                                of the current window. This property was added in 
                                JavaScript 1.2.
+------------+----------------+------------------------------------------+
              length            Represents the number of frames in the current window.
+------------+----------------+------------------------------------------+
              location          Contains the current URL loaded into the window.
+------------+----------------+------------------------------------------+
              locationbar       Refers to the browser"s location bar. 
                                This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
           locationbar.visible  Contains Boolean value that tells you if the 
                                location bar on the user"s browser is visible. 
                                This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              menubar            Refers to the browser"s menu bar. This property was 
                                 added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              menubar.visible    Contains Boolean value that tells you if the menu 
                                 bar on the user"s browser is visible . 
                                 This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
               name              Contains the name of the window.
+------------+----------------+------------------------------------------+
            offscreenBuffering   Contains a Boolean value that allows you to determine 
                                 if any window updates are performed in an off screen 
                                 buffer. This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              opener             Contains the name of the window from which a second 
                                 window was opened.
+------------+----------------+------------------------------------------+
              outerHeight        Contains the height in pixels of the outer area of 
                                 the current window. This property was added in 
                                 JavaScript 1.2.
+------------+----------------+------------------------------------------+
              outerWidth         Contains the width in pixels of the outer area of 
                                 the current window. This property was added in 
                                 JavaScript 1.2.
+------------+----------------+------------------------------------------+
              pageXOffset        Contains the x-coordinate of the current window. 
                                 This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              pageYOffset        Contains the y-coordinate of the current window. 
                                 This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              parent             Refers to the uppermost window that is displaying 
                                 the current frame.
+------------+----------------+------------------------------------------+
              personalbar        Reference to the browser"s personal bar. 
                                 This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
         personalbar.visible     Contains Boolean value that tells you if the 
                                 personal bar on the user"s browser is visible.
                                  This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
              screenX            Refers to the browser"s x-coordinate at the left 
                                 edge of the window. This property was added in 
                                 JavaScript 1.2.
+------------+----------------+------------------------------------------+
              screenY            Refers to the browser"s y-coordinate at the top 
                                 edge of the window. This property was added in 
                                 JavaScript 1.2.
+------------+----------------+------------------------------------------+
               scrollbars        Refers to the browser"s scrollbars. This property 
                                 was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
            scrollbars.visible   Contains Boolean value that tells you if the 
                                 scrollbars on the user"s browser are visible . 
                                 This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
                self              Refers to the current window.
+------------+----------------+------------------------------------------+
              status              Refers to the message in the window"s status bar.
+------------+----------------+------------------------------------------+
              statusbar           Refers to the browser"s status bar. This property 
                                  was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
            statusbar.visible     Contains Boolean value that tells you if the 
                                  status bar on the user"s browser is visible . 
                                  This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
             toolbar              Refers to the browser"s toolbar. This property was 
                                  added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
             toolbar.visible      Contains Boolean value that tells you if the 
                                  toolbar on the user"s browser is visible . 
                                  This property was added in JavaScript 1.2.
+------------+----------------+------------------------------------------+
               top                Refers to the uppermost window that is displaying 
                                  the current frame.
+------------+----------------+------------------------------------------+
               window             Refers to the current window.
+------------+----------------+------------------------------------------+
*/



References to Window Objects

  
<HTML>
<HEAD>
<TITLE>Window Opener and Closer</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var newWindow;
function makeNewWindow() {
    newWindow = window.open("","","HEIGHT=300,WIDTH=300")
}
function closeNewWindow() {
    if (newWindow) {
        newWindow.close()
        newWindow = null
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" VALUE="Create New Window" onClick="makeNewWindow()">
<INPUT TYPE="button" VALUE="Close New Window" onClick="closeNewWindow()">
</FORM>
</BODY>
</HTML>



Resize a window

  
<html>
<head>
<script type="text/javascript">
function resizeWindow(){
    window.resizeBy(-100,-100)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="resizeWindow()" value="Resize window">
</form>
</body>
</html>



Resize a window to a specified size

  
<html>
<head>
<script type="text/javascript">
function resizeWindow(){
    window.resizeTo(500,300)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="resizeWindow()" value="Resize window">
</form>
</body>
</html>



Scroll the window

  
<html>
<head>
<script type="text/javascript">
function scrollWindow(){
    window.scrollBy(50,50)
}
</script>
</head>
<body>
<form>
<input type="button" onclick="scrollWindow()" value="Scroll">
</form>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
1
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
2
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
3
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
4
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
5
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
6
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
7
</body>
</html>



Scroll Window

  
function scrollWindow() {
    window.scrollBy(0, 1);
}
function initScroll() {
    setInterval("scrollWindow()", 100);
}



Setting Window Height and Width(Firefox)

  
<HTML>
<HEAD>
<TITLE>Window Sizer</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var originalWidth = window.outerWidth
var originalHeight = window.outerHeight
function setInner(width, height) {
    window.innerWidth = width
    window.innerHeight = height
}
function setOuter(width, height) {
    window.outerWidth = width
    window.outerHeight = height
}
function restore() {
    window.outerWidth = originalWidth
    window.outerHeight = originalHeight
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<B>Setting Inner Sizes</B><BR>
<INPUT TYPE="button" VALUE="600 Pixels Square" onClick="setInner(600,600)"><BR>
<INPUT TYPE="button" VALUE="300 Pixels Square" onClick="setInner(300,300)"><BR>
<INPUT TYPE="button" VALUE="Available Screen Space"
 onClick="setInner(screen.availWidth, screen.availHeight)"><BR>
<HR>
<B>Setting Outer Sizes</B><BR>
<INPUT TYPE="button" VALUE="600 Pixels Square" onClick="setOuter(600,600)"><BR>
<INPUT TYPE="button" VALUE="300 Pixels Square" onClick="setOuter(300,300)"><BR>
<INPUT TYPE="button" VALUE="Available Screen Space"
 onClick="setOuter(screen.availWidth, screen.availHeight)"><BR>
<HR>
<INPUT TYPE="button" VALUE="Cinch up for Win95" onClick="setInner(273,304)"><BR>
<INPUT TYPE="button" VALUE="Cinch up for Mac" onClick="setInner(273,304)"><BR>
<INPUT TYPE="button" VALUE="Restore Original" onClick="restore()"><BR>
</FORM>
</BODY>
</HTML>



Simple Notification: Display Window Info

  

<HTML>
<HEAD NAME = "WindowPane">
<SCRIPT LANGUAGE = "JavaScript">
   
     function displayWindowInfo() {
        var winInfo = ""
        winInfo = "Number of frames: " + window.length + "\r"
        winInfo += "Window object name: " + window.window + "\r"
        winInfo += "Window parent name: " + window.parent + "\r"
        winInfo += "URL: " + window.location + "\r"
        alert(winInfo)
      }
   
</SCRIPT>
</HEAD>
   
<BODY>
<FORM>
<INPUT
      Type="button"
      Value="Display Window Information"
      OnClick="displayWindowInfo()"
</INPUT>
</FORM>
</BODY>



To hide JavaScript errors from the user

  

$(window).error(function(){
  return true;
});



Using document.write() on Another Window

  
<html> 
<head> 
<title>Writing to Subwindow</title> 
<script type="text/javascript"> 
var newWindow; 
function makeNewWindow() { 
    newWindow = window.open("","","status,height=200,width=300"); 
} 
function subWrite() { 
    if (newWindow.closed) { 
        makeNewWindow(); 
    } 
    newWindow.focus(); 
    var newContent = "<html><head><title>title</title></head>"; 
    newContent += "<body bgcolor="coral"><h1>This document is brand new.</h1>"; 
    newContent += "</body></html>"; 
    newWindow.document.write(newContent); 
    newWindow.document.close(); 
} 
</script> 
</head> 
<body onload="makeNewWindow()"> 
<form> 
<input type="button" value="Write to Subwindow" onclick="subWrite()"> 
</form> 
</body> 
</html>



Using document.write() on the Current Window

  
<html> 
<head> 
<title>Writing to Same Doc</title> 
<script type="text/javascript"> 
function reWrite() { 

    var newContent = "<html><head><title>title</title></head>"; 
    newContent += "<body bgcolor="aqua"><h1>This document is brand new.</h1>"; 
    newContent += "Click the Back button to see original document."; 
    newContent += "</body></html>"; 
    
    document.write(newContent); 
    document.close(); 

} 
</script> 
</head> 
<body> 
<form> 
<input type="button" value="Replace Content" onclick="reWrite()"> 
</form> 
</body> 
</html>



Using the window.close() Method to Close a Browser Window

  
<HTML>
<BODY>
<H1> 
I"m not even fully opened yet! 
<SCRIPT> 
   if (window.confirm("Do you want to close the browser?")) 
     window.close(); 
</SCRIPT>
</H1>
</BODY>
</HTML>



Window focus and blur()

  

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Window Focus() and Blur()</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
// declare global variable name
var newWindow = null
function makeNewWindow() {
    // check if window already exists
    if (!newWindow || newWindow.closed) {
        // store new window object in global variable
        newWindow = window.open("","","width=250,height=250")
        // pause briefly to let IE3 window finish opening
        setTimeout("fillWindow()",100)
    } else {
        // window already exists, so bring it forward
        newWindow.focus()
    }
}
// assemble new content and write to subwindow
function fillWindow() {
    var newContent = "<HTML><HEAD><TITLE>Another Subwindow</TITLE></HEAD>"
    newContent += "<BODY bgColor="salmon">"
    newContent += "<H1>A Salmon-Colored Subwindow.</H1>"
    newContent += "<FORM><INPUT TYPE="button" VALUE="Bring Main to Front" onClick="self.opener.focus()">"
    // the following button doesn"t work in NN6
    newContent += "<FORM><INPUT TYPE="button" VALUE="Put Me in Back" onClick="self.blur()">"
    newContent += "</FORM></BODY></HTML>"
    // write HTML to new window document
newWindow.document.write(newContent)
    newWindow.document.close()
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Window focus() and blur() Methods</H1>
<HR>
<FORM>
<INPUT TYPE="button" NAME="newOne" VALUE="Show New Window" onClick="makeNewWindow()">
</FORM>
</BODY>
</HTML>



Window Property Picker

  
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/
<HTML>
<HEAD>
<TITLE>Property Picker</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var isNav4 = (navigator.appName == "Netscape" && navigator.appVersion.charAt(0)
 >= 4) ? true : false
function fillLeftFrame() {
    newURL = prompt("Enter the URL of a document to show in the left frame:","")
    if (newURL != null && newURL != "") {
    parent.frames[0].location = newURL
    }
}
function showLocationData(form) {
    for (var i = 0; i <3; i++) {
        if (form.whichFrame[i].checked) {
            var windName = form.whichFrame[i].value
            break
        }
    }
    var theWind = "" + windName + ".location"
    if (isNav4) {
      netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead")
    }
    var theObj = eval(theWind)
    form.windName.value = windName
    form.windHash.value = theObj.hash
    form.windHost.value = theObj.host
    form.windHostname.value = theObj.hostname
    form.windHref.value = theObj.href
    form.windPath.value = theObj.pathname
    form.windPort.value = theObj.port
    form.windProtocol.value = theObj.protocol
    form.windSearch.value = theObj.search
    if (isNav4) {
      netscape.security.PrivilegeManager.disablePrivilege("UniversalBrowserRead")
    }
}
</SCRIPT>
</HEAD>
<BODY>
Click the "Open URL" button to enter the location of an HTML document to display
 in the left frame of this window.
<FORM>
<INPUT TYPE="button" NAME="opener" VALUE="Open URL..." onClick="fillLeftFrame()">
<HR>
<CENTER>
Select a window/frame. Then click the "Show Location Properties" button to view
 each window.location property value for the desired window.<P>
<INPUT TYPE="radio" NAME="whichFrame" VALUE="parent" CHECKED>Parent window
<INPUT TYPE="radio" NAME="whichFrame" VALUE="parent.frames[0]">Left frame
<INPUT TYPE="radio" NAME="whichFrame" VALUE="parent.frames[1]">This frame
<P>
<INPUT TYPE="button" NAME="getProperties" VALUE="Show Location Properties"
 onClick="showLocationData(this.form)">
<INPUT TYPE="reset" VALUE="Clear"><P>
<TABLE BORDER=2>
<TR><TD ALIGN=right>Window:</TD><TD><INPUT TYPE="text" NAME="windName"
 SIZE=30></TD></TR>
<TR><TD ALIGN=right>hash:</TD>
<TD><INPUT TYPE="text" NAME="windHash" SIZE=30></TD></TR>
<TR><TD ALIGN=right>host:</TD>
<TD><INPUT TYPE="text" NAME="windHost" SIZE=30></TD></TR>
<TR><TD ALIGN=right>hostname:</TD>
<TD><INPUT TYPE="text" NAME="windHostname" SIZE=30></TD></TR>
<TR><TD ALIGN=right>href:</TD>
<TD><TEXTAREA NAME="windHref" ROWS=3 COLS=30 WRAP="soft">
</TEXTAREA></TD></TR>
<TR><TD ALIGN=right>pathname:</TD>
<TD><TEXTAREA NAME="windPath" ROWS=3 COLS=30 WRAP="soft">
</TEXTAREA></TD></TR>
<TR><TD ALIGN=right>port:</TD>
<TD><INPUT TYPE="text" NAME="windPort" SIZE=30></TD></TR>
<TR><TD ALIGN=right>protocol:</TD>
<TD><INPUT TYPE="text" NAME="windProtocol" SIZE=30></TD></TR>
<TR><TD ALIGN=right>search:</TD>
<TD><TEXTAREA NAME="windSearch" ROWS=3 COLS=30 WRAP="soft">
</TEXTAREA></TD></TR>
</TABLE>
</CENTER>
</FORM>
</BODY>
</HTML>



Window Resize Methods

  
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/
<HTML>
<HEAD>
<TITLE>Window Resize Methods</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function doResizeBy(form) {
    var x = parseInt(form.resizeByX.value)
    var y = parseInt(form.resizeByY.value)
    var count = parseInt(form.count.value)
    for (var i = 0; i < count; i++) {
        window.resizeBy(x, y)
    }
}
function doResizeTo(form) {
    var x = parseInt(form.resizeToX.value)
    var y = parseInt(form.resizeToY.value)
    window.resizeTo(x, y)
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<B>Enter the x and y increment, plus how many times the window should be resized
 by these increments:</B><BR>
Horiz:<INPUT TYPE="text" NAME="resizeByX" SIZE=4>
Vert:<INPUT TYPE="text" NAME="resizeByY" SIZE=4>
How Many:<INPUT TYPE="text" NAME="count" SIZE=4>
<INPUT TYPE="button" NAME="ResizeBy" VALUE="Show resizeBy()"
 onClick="doResizeBy(this.form)">
<HR>
<B>Enter the desired width and height of the current window:</B><BR>
Width:<INPUT TYPE="text" NAME="resizeToX" SIZE=4>
Height:<INPUT TYPE="text" NAME="resizeToY" SIZE=4>
<INPUT TYPE="button" NAME="ResizeTo" VALUE="Show resizeTo()"
 onClick="doResizeTo(this.form)">
</FORM>
</BODY>
</HTML>



Window Resize, motion, maximize

  
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
John Wiley & Sons CopyRight 2001
*/

<HTML>
<HEAD>
<TITLE>Window Gymnastics</TITLE>
<SCRIPT LANGUAGE="JavaScript1.2">
var isNav4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4))
// wait in onLoad for page to load and settle in IE
function init() {
    // fill missing IE properties
    if (!window.outerWidth) {
        window.outerWidth = document.body.clientWidth
        window.outerHeight = document.body.clientHeight + 30
    }
    // fill missing IE4 properties
    if (!screen.availWidth) {
        screen.availWidth = 640
        screen.availHeight = 480
    }
}
// function to run when window captures a click event
function moveOffScreen() {
    // branch for NN security
    if (isNav4) {
        netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserWrite")
    }
    var maxX = screen.width
    var maxY = screen.height
    window.moveTo(maxX+1, maxY+1)
    setTimeout("window.moveTo(0,0)",500)
    if (isNav4) {
        netscape.security.PrivilegeManager.disablePrivilege("UniversalBrowserWrite")
    }
}
// moves window in a circular motion
function revolve() {
    var winX = (screen.availWidth - window.outerWidth) / 2
    var winY = 50
    window.resizeTo(400,300)
    window.moveTo(winX, winY)
    
    for (var i = 1; i < 36; i++) {
        winX += Math.cos(i * (Math.PI/18)) * 5
        winY += Math.sin(i * (Math.PI/18)) * 5
        window.moveTo(winX, winY)
    }
}
// moves window in a horizontal zig-zag pattern
function zigzag() {
    window.resizeTo(400,300)
    window.moveTo(0,80)
    var incrementX = 2
    var incrementY = 2
    var floor = screen.availHeight - window.outerHeight
    var rightEdge = screen.availWidth - window.outerWidth
    for (var i = 0; i < rightEdge; i += 2) {
        window.moveBy(incrementX, incrementY)
        if (i%60 == 0) {
            incrementY = -incrementY
        }
    }
}
// resizes window to occupy all available screen real estate
function maximize() {
    window.moveTo(0,0)
    window.resizeTo(screen.availWidth, screen.availHeight)
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<FORM NAME="buttons">
<B>Window Gymnastics</B><P>
<UL>
<LI><INPUT NAME="offscreen" TYPE="button" VALUE="Disappear a Second" onClick="moveOffScreen()">
<LI><INPUT NAME="circles" TYPE="button" VALUE="Circular Motion" onClick="revolve()">
<LI><INPUT NAME="bouncer" TYPE="button" VALUE="Zig Zag" onClick="zigzag()">
<LI><INPUT NAME="expander" TYPE="button" VALUE="Maximize" onClick="maximize()">
</UL>
</FORM>
</BODY>
</HTML>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Window_Browser/Window&oldid=3975»