Jump to content
xisto Community
Sign in to follow this  
Mordent

Addeventlistener Method DOMContentLoaded or load?

Recommended Posts

Hey again folks, once more I turn to you people for JavaScript-y help. So, I'm working on a Firefox extension and am using the AddEventListener method to work out when a new page has been loaded. If it's a particular URL then I do some stuff to it (preferably before it's shown to the user, but I gather that that may not be possible), I've got it semi-working, however there's some funky behaviour that I don't understand.

With some severe "snipping", my code is as follows:

var myExtension = new function (){	this.init = function ()	{		/* initialise page load listener */		var appcontent = document.getElementById ("appcontent");		if ( appcontent )		{			appcontent.addEventListener ( "load", myExtension.onPageLoad, true );		}	};	this.onPageLoad = function ( aEvent )	{		var doc = aEvent.originalTarget;		alert ( "Test!" );	};}/* initialise window listener */window.addEventListener ( "load", function () { myExtension.init(); }, false );
This is pretty much taken pretty much exactly from here. The one real change I made is changing the "DOMContentLoaded" event type to "load", as it made more sense to me at the time. I've got two real questions for you: firstly, why can't the external listener ("window.addEventListener(...)") point directly to the myExtension.onPageLoad function? I assume that it's something to do with what object triggers the event, and therefore how to access the "originalTarget" bit within onPageLoad, but a bit of an explanation would be grand.

Secondly, what's the difference between "load" and "DOMContentLoaded"? Based on this page, it gives a pretty good explanation of what the difference is, so that's great. My main issue here is that, when using "load" and opening a typical page (e.g. Google) I get 4 alerts saying "Test!" when it's loaded. I even get 3 for opening a new tab! It's not a problem so much as a confusion. Why does opening a new tab trigger the "load" event three or four (or even more!) times, and the DOMContentLoaded event just once?

Cheers in advance!

Share this post


Link to post
Share on other sites

As a bit of a follow up question, I'm now working on trying to use the "unload" event. Again referring to this page, the code it suggests is something like this:

 

window.addEventListener("pagehide", OnPageUnload, false);function OnPageUnload(aEvent) {	if (aEvent.originalTarget instanceof HTMLDocument) {		var doc = aEvent.originalTarget;		alert("page unloaded:" + doc.location.href);	}}
Using the code above, I also get a strange number of alerts. When opening a new tab it says "page unloaded:about:blank", and nothing when I close it. Surely it should be the other way around? It also triggers a second popup when closing iframes and the like. My immediate response to this is to try to find a way to attach it to the tab in question, rather than the window as a whole. I'm currently storing a bit of information about each open tab that's from a particular domain in objects within my extension (myExtension.pages.page is a class, referred to by using myExtension.pages.objIdArray[#]). Each page object has a variable called doc which stores (I believe?) a reference to the tab it's open in, or at least something very similar. I'm using the code in my above post, so if it doesn't do that then I'd love to know.

 

Anyway, I was thinking that I could add an event to the closing of the tabs that are on this particular URL (close, refresh, back, however it's closed doesn't overly matter to me. The important thing is that you're leaving the page) by doing something along the lines of "this.doc.addEventListener ( "pagehide", myExtension.pages.destroy(this), false );" within the page class and dealing with it within myExtension.pages.destroy (on the basis that I could work backwards to find out how to update my array and so on, the important thing is that I can trigger a function in a manner similar to this). Unfortunately, this doesn't seem to work all that well (i.e. it doesn't). One option I've considered is to use the code example shown above and doing some sort of checking within it to work out if the page closed was one of the ones I'm tracking, but it doesn't seem all that elegant.

 

Any suggestions for this one?

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.