0

I'm looking for a way to put a piece of plain javascript in the header, and have it hook the page load so that as each tag or element loads it can look at it, test for a specific name, id, or class, and if it meets the requirements then perform some manipulation. Alternately, have it fire after DOM has updated with each new chunk of downloaded page. In the meantime, the page would of course keep loading, but I'm willing to do the debugging to figure out any caveats and issues.

If the browser does the filtering for me, awesome, otherwise I'll have to test the element type and name each time, and I understand that would slow down page rendering in the worst case. I'm primarily concerned with Firefox, because I'm looking to create Greasemonkey scripts, but cross platform would be great.

The reason for this is to keep from loading a page with the wrong style until the end, then have it jump into the new style. A lot of other sites that aren't usable until DOM completion could benefit from early bound javascript, too, I think.

SilverbackNet
  • 2,076
  • 17
  • 29
  • GM only starts to work after the DOM has loaded. So i'm saying that is not possible, everything GM does is after*, not before neither going with the load. It depends more in the user connection, configuration of browser and how heavy is the page. So unless the page you're modifying is very heavy, and if the modification is also heavy, then it is usually not noticeable. – Griphox Nov 04 '11 at 00:39
  • That's only true in the older versions, there's now a statement that allows execution to begin as soon as the head element is loaded. – SilverbackNet Nov 07 '11 at 01:45

2 Answers2

0

You will need to hook into the DOMNodeInserted event. This event bubbles, allowing you to monitor the whole document by registering the event at the document level.

Since this will only be supported on modern browsers, you may also have to run an interval timer to periodically check for new DOM elements. You should be careful that your code here is not too inefficient. You may want to assume that if there were, say, 15 elements last time you checked, then you only need to check from the 16th element onwards (in a document.getElementsByTagName('*') search or something).

thomasrutter
  • 114,488
  • 30
  • 148
  • 167
0

With Greasemonkey and Firefox, you cannot catch some of the first elements, and you can't do anything to stop an element, EG <style>, from loading or parsing (without stopping the whole page load).

The best you can do is immediately delete an element after it has loaded, or override it's effects with later code.

You can get an idea of that kind of approach -- able to (mostly) catch DOM elements as they come in -- in this answer.

However, "to keep from loading a page with the wrong style until the end, then have it jump into the new style", a far simpler and flicker free method is to use the Stylish add-on to overwrite the offending styles. Stylish, is faster and easier than Greasemonkey and effects a page practically as it loads. Just remember that a Stylish script is an acceptable place to use the !important keyword.

Finally, for externally loaded styles and scripts, you can easily replace them with the Fiddler utility.

Community
  • 1
  • 1
Brock Adams
  • 90,639
  • 22
  • 233
  • 295