9

I'm working on a Google Chrome extension that manipulates a webpage, but after it is either partially loaded (the DOM) or fully loaded (with images).

It seems that many sites nowadays use the 

<!DOCTYPE html>

declaration, or some variation of it, but many others do not. The question is mainly about HTML doctypes...I'm not sure about the others.

Is it safe to assume that if a webpage does not have the DOCTYPE declaration, then $(window).load(); will not be fired?

In the beginning I was using $(document).ready(); (for when the DOM is loaded), but later switched to $(window).load(); (to let the images load too).

The thing is, now $(window).load(); does not seem to work if there is no DOCTYPE. $(document).ready(); seems to work on all pages, regardless of whether a DOCTYPE is declared or not.

Maybe this can be useful for others with this same issue. I searched a bit and didn't find a decisive answer. It seems that I will end up using something like this:

if (window.document.doctype != null) {$(window).load(checkEntries);}
if (window.document.doctype == null) {$(document).ready(checkEntries);}

I guess my question is... Is this normal to have to check for the DOCTYPE to know which event to use? Or am I missing something here?

Basically, why does $(window).load(); seem not to fire if there's no DOCTYPE declaration?

11684
  • 7,120
  • 10
  • 45
  • 69
theMaxx
  • 2,356
  • 2
  • 22
  • 29
  • 2
    I can't [reproduce your problem](http://stone.thecoreworlds.net/so/load/). – Quentin Nov 05 '12 at 12:08
  • May this will help you http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready – Heroic Nov 05 '12 at 12:14
  • @Heroic — The question describes the difference between the two … so it is very unlikely to help. – Quentin Nov 05 '12 at 12:16
  • 1
    Thanks Heroic, I have read that post, and it is very helpful. Quentin, thanks, yes, the example does work. For a moment, I thought I had the two mixed up, but... As far as my chrome extension (and maybe any chrome extension), opening your example page using $(window).load(checkEntries); in my extension does not run the checkEntries function, whereas using $(document).ready(checkEntries); does run the checkEntries function. Maybe this is a chrome extension specific question? In the manifest file I am using "run_at": "document_idle", but I have also tried document_start and document_end. – theMaxx Nov 05 '12 at 12:23
  • It's likely that this is a Chrome Extension specific issue. Isn't this problem solvable by simply including the doctype in all of the extension's HTML? Or is it pulling external HTML in and displaying that? – LukeGT Nov 05 '12 at 12:40
  • Yes, now I do think it is a chrome extension specific issue. The extension can be run on any page or url, and basically it just checks if a favicon is present for the website. I think that the end result will be that accessing favicons for websites in the google chrome browser is not that reliable. Still I wonder if this is a requirement for many chrome extension programmers to check if a doctype is present to be able to then know which event to use for when the page is finished loading or being ready. If I didn't catch this, then the extension would not run on any page without a doctype! – theMaxx Nov 05 '12 at 12:49
  • @LukeGT it is a content script... – 11684 Nov 05 '12 at 16:23

2 Answers2

6

Basically, you shouldn't be using $(window).load(), since it's not fully supported. If you really need it, then your solution above is the best you can do. The jQuery page sums up the caveats nicely:

Caveats of the load event when used with images

A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

  • It doesn't work consistently nor reliably cross-browser
  • It doesn't fire correctly in WebKit if the image src is set to the same src as before
  • It doesn't correctly bubble up the DOM tree
  • Can cease to fire for images that already live in the browser's cache

URL: http://api.jquery.com/load-event/

LukeGT
  • 2,144
  • 1
  • 17
  • 20
  • 3
    That refers to `jQuery('img#someImage').load()` not `jQuery(window).load()`. – Quentin Nov 05 '12 at 12:11
  • Some of the dot points do refer to the `img` load event specifically, but other dot points apply to the load event in general. – LukeGT Nov 05 '12 at 12:13
  • Please provide evidence that "It doesn't work consistently nor reliably cross-browser" is true when applied to `window`. The other three cannot apply because they don't describe anything that would relate to `window`. – Quentin Nov 05 '12 at 12:14
  • I assumed that it was a cross-browser issue because the doctype was involved, and incuding the doctype often resolves existing cross-browser issues. However after looking at your attempt at reproducing the error, I'm questioning whether the doctype is the issue. – LukeGT Nov 05 '12 at 12:28
  • Thank you for the link. I wish I could provide an example, but I'm still working on the extension and it not yet released. I haven't tested it thoroughly yet as I just came across this issue. I think I'm just hoping for a confirmation if that's how it works and an explanation why it is so. But if it's only reproducible in a chrome extension, I know my chances or getting a concrete answer are much slimmer... – theMaxx Nov 05 '12 at 12:37
  • What!!! `window.load` is one of the oldest and most reliable events in the history of browsers. `$(window).load()` is just a jQuery encapsulation of it and is equally reliable. For sure, there has been a history of patchy support for the image load event but that's a whole different issue, as is the particular problem the OP is having with his Chrome extension. – Beetroot-Beetroot Nov 05 '12 at 15:02
  • Relax Beetroot, I no longer think this is correct. It does seem to be a chrome extension issue. – LukeGT Nov 05 '12 at 23:01
  • Yes, sorry, I didn't realize that at first, and didn't mean to cause a panic! ;) I have changed the title of the question so it is now more appropriate. I'm still hoping for an answer from someone that knows about chrome extensions. – theMaxx Nov 06 '12 at 10:48
3

The .ready() method is generally incompatible with the <body onload=""> attribute. If load must be used, either do not use .ready() or use jQuery's .load() method to attach load event handlers to the window or to more specific items, like images.

NullPoiиteя
  • 53,430
  • 22
  • 120
  • 137
  • I think he's not using the `` attribute, he's using jQuery's `.load()` method already, as you suggest. – LukeGT Nov 05 '12 at 12:23
  • Yes, I'm just trying to run a script on any given page using a chrome extension, regardless if their code has body onload='' or not or a doctype specified or not. I'm just trying to figure out why it works this way in the chrome extension. In the example page above, it seems to work in the browser, but not in a chrome extension. That seems kind of strange to me and is now what I'm trying to figure out. – theMaxx Nov 05 '12 at 12:30