Question

I have an iframe pointing to arbitrary foreign domain http://A. I want to send it to another foreign domain http://B on a user event.

Say http://B is slow to load. If I just set iframe.src = "http://B", then the iframe will keep the contents from A until B is downloaded fully and can render. This is confusing for the user because they asked for B, but all they see is A.

I want to load a page from my domain, say ../html/loading.html, in between A and B. Assume that this page load will always be fast.

I have observed that setting iframe.src is asynchronous. Consider the following code:

iframe.src = '../html/loading.html';
iframe.src = 'http://B';

This skips opening ../html/loading.html and goes right to http://B. (Regardless of how fast loading.html might be, or how slow B might be). I also tried doing this:

iframe.src = '../html/loading.html';
iframe.contentWindow.location.reload();
iframe.src = 'http://B';

However, this throws cross-domain errors, saying I can’t access stuff in the contentWindow of http://A (because loading.html hasn’t loaded, we’re still on http://A and I can’t force a reload).

Is there a way to force an iframe to do a synchronous load of a URL? I’m writing a Chrome Extension, so if it has to be specific to crx that’s okay too.

Answer 1

Try this:

Initially iframe should load loading.html using

    iframe.src = '../html/loading.html';

In client side onload event of loading.html, the source should be changed to other domain B using

    iframe.src = 'http://B';