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; 

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");

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("https://www.w3.org/1999/xhtml", "html:hr");
document.getElementById("id1").appendChild(hr);

See also

• More about Working with windows in chrome code.