I am developing a Firefox extension. My extension needs to get notified when a page completes loading. To implement this I am using DOMContentLoaded event. This works fine most of the times. But while visiting few sites (like nytimes.com), this event is not getting triggered at all. I am not sure whether these sites are using some special scripts.
Is there any workaround for this? Or is there a better way to implement what I am trying to do?
DOMContentLoaded may not be what you need...
According to MDN
Fired at the page's Document object when parsing of the document is
finished. By the time this event fires, the page's DOM is ready, but
the referenced stylesheets, images, and subframes may not be done
loading; use the "load" event to detect a fully-loaded page.
https://developer.mozilla.org/en/Gecko-Specific_DOM_Events
So, it is possible that nytimes.com and others my be using frames or complex CSS and that is why you are not getting the correct trigger.
As mentioned above, the "fix" is to
use the "load" event to detect a fully-loaded page
Related
(Note: FireFox only)
The Back-Forward cache is a caching system in firefox that runs when the back button is clicked. It will then simply use the DOM from the previous page that is in it's cache instead of reloading the entire page (and re-requesting files).
I'm using piwik (an analytics service), that requires a tracking code snippet to be added to the footer. Upon adding this, the back-forward cache no longer works.
It is my understanding that, if there is an unload event (or beforeunload) the bfcache is automatically disabled. This is likely what is happening here.
Is there anything I can add to make the BFCache work anyway?
To make matters worse, I cannot add any custom code below the piwik code. That one is always last.
I added the code displayed below to try and remove any unload events that are registered, but the BFcache is still not working.
$(window).unbind('beforeunload');
$(window).unbind('unload');
window.onbeforeunload = null;
window.onunload = null;
I also tried:
function UnloadHandler() {
window.removeEventListener('unload', UnloadHandler, false);
}
window.addEventListener('unload', UnloadHandler, false);
$(window).unload(function () { $(window).unbind('unload'); });
but this too does not work.
I have placed some samples online. Remember to test this with Firefox:
this one shows a working BFcache (you will get an different alert based on whether or not the back button was clicked)
http://users.telenet.be/prullen/bfcache/a.html
Loaded piwik, BFCache no longer works
http://users.telenet.be/prullen/bfcache/b.html
Loaded piwik, tried to unset onload event, but still not working
http://users.telenet.be/prullen/bfcache/c.html
Using unloadhandler
http://users.telenet.be/prullen/bfcache/d.html
Suggestions by #roasted
http://users.telenet.be/prullen/bfcache/e.html
http://users.telenet.be/prullen/bfcache/f.html
More information about BFCache:
https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching
You can see another demo of the behavior here:
http://www.twmagic.com/misc/cache.html
If you add dom elements, and click the first link, then return - the dom elements are still there. However, if you add an onload or beforeunload event that is not the case. Again, test this in firefox.
Any ideas?
In order to enable BFCache you need to remove beforeunload event listener. It should be the same listener which was added by Piwik code, otherwise removeEventListener will do nothing.
That listener is unreachable outside of the Piwik's source, so one does not simply remove it.
But, if you have a possibility to insert code before the Piwik, you can try to override addEventListener, track added handlers and expose function to remove all tracked handlers at once.
I have a page which contains ActiveX element.
When it's loaded, a dialog is opened to confirm that user allows to install it and there are fancy progressbars on the page, they are initialized on document.ready event, which is fired after ActiveX is loaded.
Is there a way not to wait form ActiveX element?
If not use document.ready event, some important scripts may happen not to be loaded yet, and this may cause error.
Are there any solutions for this case?
Please, share your advices.
Solution - loading ActiveX after document.ready event. Did not find a better one.
In chrome's Developer tool, the blue vertical line labeled "DOMContent event fired", and the red line labed "load event fired". Does "DOMContent event fired" means the browser begin to execute the inline javascript? And "load event fired" means it fire "onload" event?
"DOMContent Event" is from webkit (which chrome relies on) and is equivelant to DOMContentLoaded msdn mdn.
The DOMContentLoaded event fires when parsing of the current page is complete; the load (onload) event fires when all files have finished loading from all resources, including ads and images. DOMContentLoaded is a great event to use to hookup UI functionality to complex web pages.
See the demo here, related question.
The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).
check Difference between DOMContentLoaded and Load events
Hey, So this is a rather weird issue, so what we have is a site that the javascript is at the bottom of the page. The html loads first and then we $(document).ready() element events. The issue I have right now is in IE6 (Stupid I know) where if you click on the item that is about to or during the loading of the page, will destroy the binding event. If you wait for the page to fully load then it runs the page correctly.
What I thought of so far:
Create an overlay on the page and then on document.ready remove it so that the click events aren't becoming broken.
Your probably thinking why don't you just push the JS files into the header? Well tuff-noogies can't do that either. (That might help)
Let me know what you think.
Thanks,
$(document).ready() is only executed after the page is loaded. So during the page load, $(document).ready() is still not called and events are still not bound.
The solution is to bind the events as soon as elements appear on the page. It's a bit ugly, but for slow connections, it might be the only way.
I have a set of pages that have tons of JavaScript on it: Table sorting, AJAX calls, autocomplete, dynamically hiding and displaying areas of the page, etc... The problem that I am seeing is when the data on said page gets large a delay (browser freezes) is noticed when leaving the page. This delay happens when the user clicks away, closes the browser, or executes a form submit. I want to see if the problem is caused by JavaScript. What tool could I use to find out? Firebug doesn't seem to work in this scenario.
The only place unload is mentioned in the codebase is in jquery.js and ui.tabs.js (jquery ui)
Are there any onunload event handlers attached (to body, window, form etc.)? If so, it would be a good starting point to investigate.
[Edit]: Apparently jQuery runs a loop unbinding all the events attached to every element. This is to prevent memory leaks in IE (created due to event handler closures referencing the element they are listening to). This could create a delay if your DOM is very complex.
Can you try commenting this portion out in jQuery code and see if that is causing the problem?
[Edit 2]: The window unload seems to have been improved in newer versions of jQuery (1.3+). What version are you using?
Inline Code Finder is a firefox addin (well, really it's a firebug addin) that shows you visually what events are attached where and when they're invoked.