Although that worked for me then, it wasn't a very good solution. There were certain features of jQuery that didn't work.
Scenario 1: jQuery to work with the ChromeWindow.
Step 1: Add OnLoad event handler.
You probably already do this.
window.addEventListener("load", function(e) { ziink.onLoad(e); }, false);
Here ziink.onLoad is the function where I deal with the event.
Note: If we load jQuery before this event, it might screw up the toolbars and some buttons might not show.
Step 2: Load jQuery in your onLoad handler using loadSubScript
Code: Select all
loadjQuery: function(wnd){
var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
.getService(Components.interfaces.mozIJSSubScriptLoader);
loader.loadSubScript("chrome://clhelper/content/jquery/jquery-1.5.js",wnd);
var jQuery = wnd.jQuery.noConflict(true);
loader.loadSubScript("chrome://clhelper/content/jquery/jquery.hoverIntent.js", jQuery);
return jQuery;
},
Code: Select all
// Within onLoad handler
ziink.jQuery = loadjQuery(window);
// In my case ziink refers to the single variable I declare in the global scope
Note: See how the jQuery plugin (jquery.hoverIntent.js) is loaded by passing jQuery as the scope.
Step 3: Using jQuery
Within any function (or event handler) add
Code: Select all
var $ = ziink.jQuery; // Note: ziink is what I use, you should have your own (and hopefully single) global variable.
Now use jQuery as you normally would.
Scenario 2: Manipulating web page DOM
Although we can use the jQuery object from scenario 1, it fails under a number of circumstances. This is because jQuery saves the window and document objects from it's global scope when it's created. These are then used by a number of its methods. What we want to do is create the jQuery object within the scope of the web pages 'window'.
Step 1: Add an event listener for when the web page is loaded.
You are probably doing this already. A good place to add it is in the onLoad handler mentioned above.
Code: Select all
var appcontent = document.getElementById("appcontent"); // browser
if(appcontent){
appcontent.addEventListener("DOMContentLoaded", ziink.onPageLoad, true); // ziink.onPageLoad is what I use, you should use your own.
}
Step 2: Load jQuery in the onPageLoad handler and save it as a property of the page's window.
Code: Select all
loadjQuery: function(wnd){
var loader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
.getService(Components.interfaces.mozIJSSubScriptLoader);
loader.loadSubScript("chrome://clhelper/content/jquery/jquery-1.5.js",wnd);
var jQuery = wnd.jQuery.noConflict(true);
loader.loadSubScript("chrome://clhelper/content/jquery/jquery.hoverIntent.js", jQuery);
return jQuery;
},
Code: Select all
onPageLoad: function(event) {
var doc = event.originalTarget;
var wnd = doc.defaultView;
// load jQuery and save it as a property of the window
wnd.ziink_jQuery = ziink.loadjQuery(wnd); // Be sure to choose a name likely to be unique
// To use jQuery here the next line helps
var $ = jQuery = wnd.ziink_jQuery;
ziink.processPage(doc);
},
Step 3: Using jQuery within an event handler
Use code similar to
Code: Select all
var doc = event.originalTarget.ownerDocument;
var wnd = doc.defaultView;
var $ = jQuery = wnd.ziink_jQuery;
// Now you can use jQuery as you normally would
Caveat: Our jQuery object is within the scope of the web page's 'window'. The web pages javascript might be changing the environment that might cause jQuery not to work properly. One situation where this might happen is when the page's javascript messes around with the built-in types prototype.