Javascript Window create and modify child windows

Description

Javascript Window create and modify child windows

View in separate window 

<html>
<head>
<title>Using the Window Object</title>
<script type = "text/javascript">
   let childWindow; // variable to control the child window

   function createChildWindow()//  w ww .ja va2 s.c om
   {
      // these variables all contain either "yes" or "no"
      // to enable or disable a feature in the child window
      let toolBar;
      let menuBar;     
      let 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;
   }

   // insert text from the textbox in the child window 
   function modifyChildWindow()
   {
      if ( childWindow.closed )
         console.log( "You attempted to interact with a closed window" );
      else
         childWindow.console.log(
            document.getElementById( "textForChild" ).value );
   } // end function modifyChildWindow

   // close the child window
   function closeChildWindow()
   {
      if ( childWindow.closed )
         console.log( "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;
   }

   // set the URL of the child window to the URL
   // in the parent window's myChildURL
   function setChildWindowURL()
   {
      if ( childWindow.closed )
         console.log( "You attempted to interact with a closed window" );
      else
         childWindow.location =
            document.getElementById( "myChildURL" ).value;
   }
</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>



PreviousNext

Related