View Full Version : Determining when IFRAME load is complete

05-05-2006, 07:33 PM
I have found a couple different code snippits that allow you to determine when a page has finished loading in an IFRAME. However, what I need is a way to determine this when it is a form that is POSTing to that IFRAME (which is on a remote web site).

Basically on my page there is a button that submits a form to another website and the target = the IFRAME. However, I don't want to actually display the content from the other site (and so the IFRAME is invisible). I just need to know when the submission is complete. As a user you can tell by watching the status bar in IE to see that the submission is still processing, but I'm looking for a more elegant way to do this (as I want to tie it into a mechnism that will visually show the user the status of the submission in real time.)

05-05-2006, 10:14 PM
The onload event of the Iframe will not accomplish what you want?

05-06-2006, 07:45 PM
onload will not work for the pages in the IFRAMES since I do not control them. i.e. they are remote websites that I am submitting to from my parent page. There's no way to include code on them that will talk back to my parent page.

If it helps those that are reading this to brainstorm... here is what I have so far. In the HEAD of my parent page I am including the following files:

<SCRIPT SRC="version.js"></script>
<SCRIPT SRC="urloader.js"></script>

as well as this function:

<script language="Javascript">
function Gotit(DocElem) {
var o1 = document.getElementById('divWait');
var o2 = document.getElementById('divSubmit');
o1.style.visibility = "hidden";
o1.style.position = "";
o2.style.visibility = "visible";
o2.style.position = "absolute";

Then, when you click the button on my parent page (that activates the form POSTs to the remote sites which load in the IFRAMEs) I include the following code for that button:


All of this works fine if you were simply loading a page into the IFRAME (e.g. http://website.com/test.html or something). It will display a layer (an image) on my parent page while the website is loading in the IFRAME and then change once it is completed. HOWEVER, the problem is that I need to POST form data to the URL in the IFRAME... not just load a normal webpage.

Any ideas?!? Here is the source code for the 2 files mentioned above:

var URLoader_Works = (Version.NS(6) || Version.IE(5));
var URLoader = new Object();

URLoader.Get = function(URL,OnLoad) {
if (!URLoader_Works) {
alert('URLoader does not work in this browser.');
if (!this.Frame) {
f = document.createElement('IFRAME');
f.style.visibility = 'hidden';


this.Frame = window.frames[window.length-1];
this.OnLoad = OnLoad;
this.Timeout = setTimeout("URLoader_Timeout()",100);
this.Frame.onload = URLoader_OnLoad;
this.Frame.location = URL;

function URLoader_OnLoad() {
DocElem = URLoader.Frame.document.documentElement;
if (Version.NS())
URLoader.Frame.location = 'about:blank';

function URLoader_Timeout() {
if (Version.IE() && URLoader.Frame.document.readyState == "complete")
URLoader.Timeout = setTimeout("URLoader_Timeout()",100);

var Version = new Object;
a = navigator.userAgent;
ie = a.indexOf("MSIE");

Version.Netscape = a.indexOf("Gecko")+1 ?
: a.indexOf("Mozilla")+1 && !(ie+1) ?
parseFloat(a.substring(a.indexOf("/")+1,a.indexOf(" ")))
: 0;

Version.MSIE = ie+1
? parseFloat(a.substring(ie+5,a.indexOf(";",ie+5)))
: 0;

Version.JavaScript = window.clearInterval ? 1.2 : window.blur ? 1.1 : 1.0;

delete a;
delete ie;

Version.IE = function(V) { return((V <= this.MSIE) || (!V && this.MSIE) ? true : false); }
Version.JS = function(V) { return( V <= this.JavaScript ? true : false); }
Version.NS = function(V) { return((V <= this.Netscape) || (!V && this.Netscape) ? true : false); }