Opening a new window in JavaScript

To display dynamically data, we can create an iframe, or open a new window. In the second case there it has a set of options to define what is displayed on the window or not.

Options

These attributes are assigned when creating the window. The value is yes or no according to the state enabled or not, a an integer.

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
showing the 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.
width
of the window in pixels.
height
of the window in pixels.

There is no option to hide the address bar. This is something deliberate from browser makers, to prevent malicious sites are unmistakable on the origin of the page that is displayed.

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, interactive 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.

Toolbar Menubar Scrollbars Statusbar Resizable Directories

Width Height

URL


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!");	
}
© 2008-2014 Xul.fr