Opening a new window in JavaScript

To display dynamically data, we can create an iframe, or open a new windows.

Properties of window creation

These attributes are assigned when creating the window. They value yes or no according to the state enabled or not.

scrollbars yes if scrollbars appear and no otherwise.

statusbar yes or no, depending on whether one shows the status bar or not.

toolbar yes or no, depending on whether one displays the toolbar or not.

menubar presenting a menu or not.

resizable to be able to change the size or not. The lower right corner is designed accordingly.

directories including buttons for favorites.

A demonstration of window creation is provided in the appendix.

Methods

open(url, nom [, list of properties])
Open a new window. The URL and name are given as parameters with a list of options. As an example of options: statusbar, toolbar, scrollbar, width, height ...
The options are enclosed in single or double quotation marks, and inside, separated by a comma.

close()
Close the window. Example: x.close(); window.close();

Creating a window, demo

Demonstration of the open method of the window HTML object.
Select the properties of the window to define and click on the open button. The code for the option will be displayed below the form.

In this demo, a page is loaded but its content is replaced by the following command:

win.document.write("Hello!");

Without this command, the windows does not remain displayed under IE7. You have to adapt the code as you need.

Code

function yesno(arg)
{
  if(arg) return "yes";
  return "no";
}

function demo()
{
  var t = document.myform.checktool.checked;
  var m = document.myform.checkmenu.checked;
  var s = document.myform.checkscroll.checked;
  var u = document.myform.checkstatus.checked;
  var r = document.myform.checkresize.checked;
  var d = document.myform.checkdir.checked;
  var w = document.myform.wwidth.value;
  var h = document.myform.wheight.value;
  var options = "location=yes,toolbar=" + 
          yesno(t) + 
          ",menubar=" + yesno(m) + 
          ",scrollbars=" + yesno(s) + 
         ",statusbar=" + yesno(u) +
         ",resizable=" + yesno(r) +
         ",directories=" + yesno(d) +
         ",width=" + w +
         ",height=" + h;

  var url = "window-demo.php";
  var myname = "mywindow";
  document.getElementById("storage").innerHTML = options;
  var win = window.open(url, myname, options);
  win.document.write("Hello!");	
}