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.

I don't understand your question. Please elaborate.

nmaier
– nmaier

2013-08-13 17:15:40 +00:00
Commented Aug 13, 2013 at 17:15 — nmaier
– nmaier, Commented Aug 13, 2013 at 17:15
I've updated the question with an example.

simonzack
– simonzack

2013-08-13 17:22:41 +00:00
Commented Aug 13, 2013 at 17:22 — simonzack
– simonzack, Commented Aug 13, 2013 at 17:22

nmaier · Accepted Answer · 2013-08-13 19:25:02Z

2

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

answered Aug 13, 2013 at 19:25

nmaier

33.3k5 gold badges67 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

simonzack Over a year ago

But which API should I use to parse the xul file into a xul document? Creating it entirely in js is better, but in this case the element I want to append has a long definition.

nmaier Over a year ago

As I wrote, you can still use a regular XUL overlay and insert the element somewhere else at first and move it later to the right place. Or instead of doing an actual overlay, you can XMLHttpRequest it (from a chrome URI) and adoptNode and insert the required nodes into the browser.xul.

tomdemuyt · Accepted Answer · 2013-08-13 21:08:09Z

1

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.

answered Aug 13, 2013 at 21:08

tomdemuyt

4,5922 gold badges35 silver badges62 bronze badges

1 Comment

nmaier Over a year ago

Not really what was asked, and also most of the time the subscript loader should be avoided in favor of other means to run scripts, such as <script>, javascript code modules, or even the newly available common js loaders.

Filipe Silva · Accepted Answer · 2013-08-30 00:40:06Z

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.

Collectives™ on Stack Overflow

Load XUL resource using javascript

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related