Load XUL resource using javascript

Question

How can I go about loading XUL resources using javascript? I tried to search on mdn but couldn't find any examples.

The motivation here is that I would like to create a overlay over elements which don't have an id attribute.

Say for example I have the following xul file:

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<button label="Test button" oncommand="alert('Hello World!');"/>

</window>

I would like to load this xul file using javascript, grab the button and append it to another element.

Help would be appreciated.

Answer 1

You should use the regular DOM APIs.

You can still overlay the element somewhere where an overlay is possible and later .appendChild() it where appropriate.

Or create it entirely using the DOM API, which is likely the better and faster way:

// XUL namespace is implied in XUL overlay scripts.
var btn = document.createElement("button");
btn.setAttribute("label", "Test Button");
btn.addEventListener("command", function() { alert("Hello World!"); }, false);
someElement.appendChild(btn);

Answer 2

If you want to load a local javascript file, then there is a dedicated helper for that:

//Check this for how the url should look like :
//https://developer.mozilla.org/en/mozIJSSubScriptLoader
function loadScript( url)
{
  var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader); 
  //The magic happens here
  loader.loadSubScript( url ); 
}

If you want to load a local HTML file inside your XUL application, then I dont think that is possible ( any more ) due to security risks.

Answer 3

I'm not 100% sure if i understand your question completely, but i'll try to give my 2 cents.

My approach doesn't help you getting an element from a different xul file from the one you are using, i don't really know even if that is possible.

What i usually do when i want to use a big elements multiple times, like when i want to create for example richlistboxitems, what i do is:

I create a template for the items:

<richlistbox id="richlistbox"/>
<richlistitem id="richListItemTemplate" hidden="true">
   <listcell class="classOne" label="one" width="50"/>
   <listcell class="classTwo" label="two" width="80"/>
</richlistitem>

Note that i have the template hidden.

Then when i load the panel or page that contains the richlistbox, i dynamically fill them out doing:

for(var i = 0; i < elements.length; i++) {
   var item = document.getElementById("richListItemTemplate").cloneNode(true);
   item.removeAttribute("id");
   item.removeAttribute("hidden");
   item.getElementsByClassName("classOne")[0].setAttribute("label",elements.value);
   item.getElementsByClassName("classTwo")[0].setAttribute("label",elements.value);

   document.getElementById("richlistbox").appendChild(item);
}

This way you are cloning the original element, removing the id, but you can access it's child elements through className that is unique inside that element.

Maybe you can do the same to your button. You create a buttonTemplate with id="myButtonTemplate" and hidden="true", and when you want to append it to an element, you do a buttonTemplate.cloneNode(true) (true because you want all the child elements), you customize it the way you want and then append it to the element that you want.

Hope this helps you.