Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

This article needs a technical review. How you can help.

This article offers code snippets demonstrating common tasks you may wish to perform.

Opening new browser windows

To open a new browser window, you can simply use window.open(). However, window.open() returns a Window object for content, not for the browser window itself, so you should get the chrome Window first. The simplest way to do that is to use nsIWindowMediator.

Example

window.open(); //This open a pop-up window that could be "blocked" client-side

//The following code generate an error as describe in the following warning box
var wm = Components.classes["@mozilla.org/appshell/window-mediator;1"] 
                   .getService(Components.interfaces.nsIWindowMediator);
var newWindow = wm.getMostRecentWindow("navigator:browser");
var b = newWindow.gBrowser; 

The code generate a TypeError from firefox console. In particular the Components.classes is undefined and The Components object is deprecated. It will soon be removed. 

Draggable windows

To make a window draggable by clicking on the window's contents, you can use the mousedown and mousemove events. The following code does not care which element is clicked on, simply responding to all mousedown events equally. You could improve this code by checking the event.target element and only setting the startPos if the element matches some criteria.

Example

 

var startPos = null;
function mouseDown(event) {
  startPos = [event.clientX, event.clientY];
}
function mouseMove(event) {
  if (startPos) {
    var newX = event.screenX - startPos[0];
    var newY = event.screenY - startPos[1];
    window.moveTo(newX, newY);
  }
}
function mouseUp(event) {
  startPos = null; 
}

window.addEventListener("mousedown", mouseDown, false);
window.addEventListener("mouseup", mouseUp, false);
window.addEventListener("mousemove", mouseMove, false);

XUL Titlebar Element

XUL Applications can take advantage of the titlebar element to achieve a similar result without extra JavaScript code.

Re-using and focusing named windows

While specifying the name parameter to window.open or window.openDialog will prevent multiple windows of that name from opening, each call will actually re-initialize the window and thus lose whatever state the user has put it in. Additionally, if the window is in the background, it may not be brought to the front. This code will check for a window of the provided name. If it finds one, it focuses it. If it doesn't, it opens one.

var wenum = Components.classes["@mozilla.org/embedcomp/window-watcher;1"]
                      .getService(Components.interfaces.nsIWindowWatcher)
                      .getWindowEnumerator();
var index = 1;
var windowName = "yourWindowName";
while (wenum.hasMoreElements()) {
  var win = wenum.getNext();
  if (win.name == windowName) {
    win.focus();
    return;
  }
  index++
}
window.open("chrome://to/your/window.xul", windowName, "features");

Uniquely identifying DOM windows

(Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)

In Gecko, each DOM window has a unique 64-bit ID number. You can get a DOM window's ID using the nsIDOMWindowUtils attribute outerWindowID. Each time a new window is created, it gets assigned an ID one greater than the last created window. This can be used in cases in which you need to uniquely identify a DOM window during the duration of the application's lifespan:

var util = win.QueryInterface(Components.interfaces.nsIInterfaceRequestor).getInterface(Components.interfaces.nsIDOMWindowUtils);
var windowID = util.outerWindowID;

After running that code, windowID contains the outer window's unique ID.

Similarly, you can get the current inner window ID using the nsIDOMWIndowUtils attribute currentInnerWindowID:

var util = win.QueryInterface(Components.interfaces.nsIInterfaceRequestor).getInterface(Components.interfaces.nsIDOMWindowUtils);
var windowID = util.currentInnerWindowID;

Programatically modifying HTML

When attempting to modify HTML elements, it is important to specify the namespace. For example, the following code will add a horizontal rule.

var hr = document.createElementNS("http://www.w3.org/1999/xhtml", "html:hr");
document.getElementById("id1").appendChild(hr);

See also

Document Tags and Contributors

 Last updated by: SpaceMudge,