Event when x element is loaded

**noctourne** · 08-01-2009, 01:45 AM

Is there a way to catch an element when it is loaded?

Say the target webpage's source is this

Code:

<html>
<body>
<div id='main'>
water
</div>
<div id='secondary'>
milk
</div>
<div id='last'>
cheese
</div>
<script>
{Some script that takes 5 seconds to load}
</script>
</body>
</html>

How would I replace 'milk' with 'soup'?
There's a script that would need to finish loading before my user script even begins, and 'milk' would be displayed for 5 seconds.

If I set my script to run-at start, I could hide the entire div with an injected css style, but I can't add 'soup' to it.

Is there a way to catch the div when it loads?

Or is there some other way to do this?

Thanks in advance.

**NicholasPufal** · 08-01-2009, 03:57 AM

The onload() event handler is used to run something right after the page is loaded.

So you could attach a function - which makes use of setTimeout - to it, and I guess that would provide the desired effect.

More info can be found here:

http://www.w3schools.com/htmldom/met_win_settimeout.asp

**Waha** · 08-01-2009, 05:02 AM

You could run-at document-start and use setInterval to routinely check the DOM to see if that div exists.
Best I can think of.

**PAEz** · 08-01-2009, 10:47 AM

For an example do you mean doing something like whats in AdSweep?.....

Code:

// ==UserScript==
// @name AdSweep
// @description AdSweep is an ad blocker for the web
// @author Charles
// @namespace http://www.adsweep.org
// @version 1.6.17.1
// @run-at document-start
// ==/UserScript==

adsweep();

function adsweep(){
		if(location.href){
			window.adsweepVersion='1.6.17.1';
			window.ua=navigator.userAgent;
			window.URL = location.href;
			if(ua.match(/Chrom(ium|e)|Iron/)){
				var countTries=0;
				function checkDOM(){
					if(countTries<120){
						if(document.getElementsByTagName("HEAD")[0] && document.getElementsByTagName("BODY")[0]){
							adsweep_core();
							window.addEventListener("load", adsweep_removeAdNodes, false);
							window.addEventListener("load", adsweep_installCheck, false);
						} else {
							countTries++;
							window.setTimeout(checkDOM,250);
						}
					}
				}
				checkDOM();

Im new at all this and wanted to do something along those lines myself, but Im a pretty crap coder

**Waha** · 08-01-2009, 11:49 AM

Similar I suppose, but that's only setting the onLoad to the body, which will still probably make your extension wait a while after that text is first visible, as it has to load all the elements in body for that event to be fired.
You can use document.getElementsByTagName("DIV") and iterate through each one to see if the ID is what you're looking for, though. That's more along the lines of what I was thinking.

**NicholasPufal** · 08-01-2009, 03:01 PM

I don't really know the main reason for doing that, so if it's just "wait 5 seconds and after it's loaded execute the content change" I guess the easier way is like this:

Code:

<html>
<head>
<script>
function myChanges(change_for_what)
{
    var div = document.getElementById('secondary');
    div.innerHTML = change_for_what;
}
    
function myTest()
{
    setTimeout("myChanges('soup')",5000);
}
</script>
</head>
<body onload="myTest()">
<div id='main'>
water
</div>
<div id='secondary'>
milk
</div>
<div id='last'>
cheese
</div>
</body>
</html>

The onLoad() handler is going to be activated as soon as the page is loaded and your function (myTest) is going to be executed. As the function has a setTimeout in it, it's going to execute the other function (myChanges) after 5 seconds (5000 milliseconds)

Now if it needs to constantly check, then as Waha says is best.

setTimeout runs one time (just adds a delay), while setInterval (as the name says) keeps running periodically.

**Waha** · 08-01-2009, 11:21 PM

I thought he was complaining about it displaying the original content for five seconds, not wanting it. :X

LinkBack

Thread Tools

Display

Event when x element is loaded

Similar Threads

Element Hider

Posting Permissions