Chapter: Internet & World Wide Web HOW TO PROGRAM - The Ajax Client - JavaScript: Objects

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

window Object - JavaScript(Js)

The window object provides methods for manipulating browser windows.

window Object

 

The window object provides methods for manipulating browser windows. The following script shows many of the commonly used properties and methods of the window object and uses them to create a website that spans multiple browser windows. Figure 11.13 allows the user to create a new, fully customized browser window by completing an XHTML form and clicking the Submit button. The script also allows the user to add text to the new window and navigate the window to a different URL.

 

The script starts in line 10. Line 12 declares a variable to refer to the new window. We refer to the new window as the child window because it is created and controlled by the main, or parent, window in this script. Lines 14–50 define the createChildWindow func-tion, which determines the features that have been selected by the user and creates a child window with those features (but does not add any content to the window). Lines 18–20 declare several variables to store the status of the checkboxes on the page. Lines 23–38 set each variable to "yes" or "no" based on whether the corresponding checkbox is checked or unchecked.

 

      <?xml version = "1.0" encoding = "utf-8"?>

 

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

 

      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

      <!-- Fig. 11.13: window.html -->

 

      <!-- Using the window object to create and modify child windows. -->

 

      <html xmlns = "http://www.w3.org/1999/xhtml">

 

      <head>

 

      <title>Using the Window Object</title>

 

        <script type = "text/javascript">

        <!--

 

        var childWindow; // variable to control the child window

        function createChildWindow()

        {

 

        // these variables all contain either "yes" or "no"

 

        // to enable or disable a feature in the child window

 

        var toolBar;

 

        var menuBar;

 

        var scrollBars;

        // determine whether the Tool Bar checkbox is checked

 

        if ( document.getElementById( "toolBarCheckBox" ).checked )

 

        toolBar = "yes";

        else

 

        toolBar = "no";

        // determine whether the Menu Bar checkbox is checked

 

        if ( document.getElementById( "menuBarCheckBox" ).checked )

 

        menuBar = "yes";

        else

 

        menuBar = "no";

        // determine whether the Scroll Bar checkbox is checked

 

        if ( document.getElementById( "scrollBarsCheckBox" ).checked )

 

        scrollBars = "yes";

        else

 

        scrollBars = "no";

        //display window with selected features

 

        childWindow = window.open( "", "",

 

        ",toolbar = " + toolBar +

 

        ",menubar = " + menuBar +

 

        ",scrollbars = " + scrollBars );

        // disable buttons

 

        document.getElementById( "closeButton" ).disabled = false;

 

        document.getElementById( "modifyButton" ).disabled = false;

 

        document.getElementById( "setURLButton" ).disabled = false;

 

        } // end function createChildWindow

        // insert text from the textbox in the child window

 

        function modifyChildWindow()

        {

 

        if ( childWindow.closed )

 

        alert( "You attempted to interact with a closed window" );

        else

 

        childWindow.document.write(

        document.getElementById( "textForChild" ).value );

 

        } // end function modifyChildWindow

        // close the child window

 

        function closeChildWindow()

        {

 

        if ( childWindow.closed )

 

        alert( "You attempted to interact with a closed window" );

        else

 

        childWindow.close();

        document.getElementById( "closeButton" ).disabled = true;

 

        document.getElementById( "modifyButton" ).disabled = true;

 

        document.getElementById( "setURLButton" ).disabled = true;

 

        } // end function closeChildWindow

        // set the URL of the child window to the URL

 

        // in the parent window's myChildURL

 

        function setChildWindowURL()

        {

 

        if ( childWindow.closed )

 

        alert( "You attempted to interact with a closed window" );

        else

 

        childWindow.location =

        document.getElementById( "myChildURL" ).value;

 

        } // end function setChildWindowURL

        //-->

 

</script>

        </head>

 

        <body>

 

        <h1>Hello, this is the main window</h1>

 

        <p>Please check the features to enable for the child window<br/>

 

        <input id = "toolBarCheckBox" type = "checkbox" value = ""

 

        checked = "checked" />

 

        <label>Tool Bar</label>

 

        <input id = "menuBarCheckBox" type = "checkbox" value = ""

 

        checked = "checked" />

 

        <label>Menu Bar</label>

 

        <input id = "scrollBarsCheckBox" type = "checkbox" value = ""

 

        checked = "checked" />

 

        <label>Scroll Bars</label></p>

        <p>Please enter the text that you would like to display

 

        in the child window<br/>

 

        <input id = "textForChild" type = "text"

 

        value = "<h1>Hello, I am a child window.</h1> " />

 

        <input id = "createButton" type = "button"

 

        value = "Create Child Window" onclick = "createChildWindow()" />

 

        <input id= "modifyButton" type = "button" value = "Modify Child Window"

 

        onclick = "modifyChildWindow()" disabled = "disabled" />

 

        <input id = "closeButton" type = "button" value = "Close Child Window"

 

        onclick = "closeChildWindow()" disabled = "disabled" /></p>

        <p>The other window's URL is: <br/>

 

        <input id = "myChildURL" type = "text" value = "./" />

 

        <input id = "setURLButton" type = "button" value = "Set Child URL"

 

        onclick = "setChildWindowURL()" disabled = "disabled" /></p>

 

        </body>

 

</html>






Fig. 11.13 | Using the window object to create and modify child windows.

The statement in lines 41–44 uses the window object’s open method to create the requested child window. Method open has three parameters. The first parameter is the URL of the page to open in the new window, and the second parameter is the name of the window. If you specify the target attribute of an a (anchor) element to correspond to the name of a window, the href of the link will be opened in the window. In our example, we pass window.open empty strings as the first two parameter values because we want the new window to open a blank page, and we use a different method to manipulate the child window’s URL.

 

The third parameter of the open method is a string of comma-separated, all-lowercase feature names, each followed by an = sign and either "yes" or "no" to determine whether that feature should be displayed in the new window. If these parameters are omitted, the browser defaults to a new window containing an empty page, no title and all features vis-ible. [Note: If your menu bar is normally hidden in IE7, it will not appear in the child window. Press the Alt key to display it.] Lines 47–49 enable the buttons for manipulating the child window—these are initially disabled when the page loads.

 

Lines 53–60 define the function modifyChildWindow, which adds a line of text to the content of the child window. In line 55, the script determines whether the child window is closed. Function modifyChildWindow uses property childWindow.closed to obtain a boolean value that is true if childWindow is closed and false if the window is still open. If the window is closed, an alert box is displayed notifying the user that the window is cur-rently closed and cannot be modified. If the child window is open, lines 58–59 obtain text from the textForChild input (lines 103–104) in the XHTML form in the parent window and uses the child’s document.write method to write this text to the child window.

 

Function closeChildWindow (lines 63–73) also determines whether the child window is closed before proceeding. If the child window is closed, the script displays an alert box telling the user that the window is already closed. If the child window is open, line 68 closes it using the childWindow.close method. Lines 70–72 disable the buttons that interact with the child window.

Function setChildWindowURL (lines 77–84) copies the contents of the myChildURL text field to the location property of the child window. If the child window is open, lines 81–82 set property location of the child window to the string in the myChildURL textbox. This action changes the URL of the child window and is equivalent to typing a new URL into the window’s address bar and clicking Go (or pressing Enter).

 

The script ends in line 86. Lines 88–116 contain the body of the XHTML document, comprising a form that contains checkboxes, buttons, textboxes and form field labels. The script uses the form elements defined in the body to obtain input from the user. Lines 106, 108, 110, and 115 specify the onclick attributes of XHTML buttons. Each button is set to call a corresponding JavaScript function when clicked.

 

Figure 11.14 contains a list of some commonly used methods and properties of the window object.



Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.