Call function after iframe source completes loading

Hi,

I want to do exactly as mentioned on the title. You can consider this like surfing pages in traffic exchangers or PTCs. The functionality is exactly like those, though it is not for those.

This is what I have now.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>

<style>
html, body { margin: 0px; padding: 0px; width: 100%; height: 100%; }
.bar { height: 90px; background: #999999; }
</style>

<script>
var info = document.getElementById("info");
var s_web = document.getElementById("s_web");

function s_webLoaded()
{
	alert("Page has been loaded");
}

s_web.onload = s_webLoaded();

</script>
</head>

<body>
	<div id="info" class="bar">Please wait</div>

	<iframe id="s_web" src="http://www.google.com" height="100%" scrolling="yes" width="100%" style="overflow:auto;"></iframe>

</body>
</html>

currently, it shows “Page has been loaded” before even showing the “Please wait” part.

secondly I changed the function to the following

function s_webLoaded()
{
	info.innerHTML = "Page has been loaded";
}

Then it said info is null…Hope I explained enough. Please help.

Is it not possible to use the onload event for the iframe element?

same result. There should be a way to do this, many traffic exchangers do it, ptc (Paid to Click) sites too. I searched all over internet and yet to find a good solution.

How exactly did you implement the ‘onload’ handler which Paul proposed? It should work perfectly!

Is the iframe’s src on your own domain, if so there may be another way to achieve this.

Oh dear, I see from his example that the iframe source is an external domain, google.com
That external domain situation is going to be the cause of many troubles. Basically, it’s invisible, where the browser isn’t able to determine very much at all about it.

A possible work around is to use a server-side page on your local domain which retrieves the data from the external site. That will get around those sorts of issues, but as far as implementation goes, the people in the php forum would be able to provide plenty of details about that.

yes, If it was internal I could have the iframe source to help me achieve with the detection. But, here the iframe source can be any website. A perfect example would be PTC, traffic exchangers. If any of you have used them them you would understand what i’m trying to achieve. I know it’s possible because I seen several sites preform something like “page has been loaded” and “Account has been credited” etc after external iframe fully loads.

Here is some update, I know it can be done because I seen it done in many websites. Please help. Following are the things I tried.

2nd Experiment

I used <iframe onload=“function()”…></iframe> It seems to work on all latest windows browsers. It now dynamically changes the “info” td’s text when iframe finishes loading. However, when the function had alert it showed the alert before the iframe loaded. Anyway, I read that this is not cross-browser compatible as iframe does not explicitly support onload event.

3nd Experiment

This time i resorted to check doccument.getElementById(‘s_web’).readyState == ‘completely’

But though it works in IE, It does not work in firefox.

Anyone please help me I spent weeks and weeks and still no solution.

Okay, lets just stop right there. Let us know please about where you’ve seen this done. Then we can investigate what they are doing to achieve the effect and let you know the detail about how it is done.

I have mentioned several times in this thread that I have seen it in ptc’s and traffic exchangers, I don’t know if i’m allowed to post direct link but here goes “n e o b u x . c o m” Click view advertisments on top and click an ad. However. in order to see the loading progressbar after the iframe loads an external source you have to be logged in. :slight_smile:

Okay, that place doesn’t use iframes. It uses frames instead which is quite a different kettle of fish from iframes.

no they use iframes, I seen it in the source of their page.


.............
                </table></td>
            </tr>
          </table></td>
        <td align="right" valign="top" style="padding-top:4px;padding-right:40px;" class="bg bg-bg1"><iframe src="/banners.html" border="0" framespacing="0" marginheight="0" marginwidth="0" vspace="0" hspace="0" frameborder="0" height="60" scrolling="no" width="468" style="width:468px;height:60px;overflow:auto;"></iframe></td>
      </tr>
    </table>
    <table cellpadding="0" cellspacing="0" width="100&#37;" style="background:url(/imagens/v5.gif) repeat-x;">
      <tr>
        <td valign="top" style="padding-top:2px;font-style:italic;color:#000;" class="sombra">Please take the time to visit the sponsor on the page below. </td>
        <td align="right" valign="top"></td>
      </tr>
    </table></td>
</tr>
<tr>
  <td valign="top"><iframe id="iF" src="advertisment url" border="0" framespacing="0" marginheight="0" marginwidth="0" vspace="0" hspace="0" frameborder="0" height="100%" scrolling="yes" width="100%" style="overflow:auto;"></iframe>
</body>
</html>
</td>
</tr>
</table>

Ahh, neobux just looks like it’s using frames, and the site in the advertising frame was the one actually using frames. I was too quick to pass judgement there. Frames within iframes that look like frames, it’s confusing.

Anyhow, how is neobux using iframes to indicate that the page has loaded?

yes, that’s what I would like to know. More so it works in all wen browsers as old as ie 5.5 I think. Anyone figure out how neo might be doing this? readyState would work forIE6 and above but no idea how to achieve it with cross-browser compatibly. :frowning:

Does the onload event for the body fire when an iframe has completed loading?

That’s the strange part, I can’t figure out how neo checks if iframe had finished loading. All I know is that the iframe has id “iF” and when iframe finishes loading, in the top info bar shows a loading progress bar to count down 30 seconds before crediting the user (so that it will be that the users viewed the ad for 30 seconds after the site loaded, then the user is credited .01 cents).

I have no idea how neo is checking if iframe is complete, but know that it is cross-browser supported.

Currently I have it check onload if netscape/firefox browsers and opera, and readyState if IE. Now it works in IE6+, Firefox, chrome, safari 3, opera 9+ but it doesn’t work on opers 8 or below. So, even if i limit my site to those browsers I have no way of knowing how it works on other browsers such as previous version of safari, Mac IE and so on…

I kept trying ans still no solution which is cross-browser compatible. So anyway to go through doing this with frame instead of iframe? if it is possible, is there any disadvantages in using frames for this purpose?

if there is no solution I would appreciate if you could help me out in this thread: http://www.sitepoint.com/forums/showthread.php?t=605078

Can anyone tell me if this is possible via frame instead of iframe? Please help, i been trying to find solution for over weeks. :frowning: