javascript - Force synchronous iframe load - Stack Overflow

admin管理员组

文章数量:1402288

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.

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.

• javascript
• html
• google-chrome
• google-chrome-extension

Share Improve this question Follow asked Jun 25, 2012 at 4:25 ChuckChuck 65633 gold badges88 silver badges2020 bronze badges 1

• You can do it by creating 2 iframes. One for loading, one for //B. Show //B when it's done loading, then hide loading. – Derek 朕會功夫 Commented Jun 25, 2012 at 4:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You'll want to load the next URL as soon as the current URL is done loading, luckily for us the iframe has an onload event we can use.

You'll want to do something like this:

iframe.src='../html/loading.html'
//load the next page after finishing loading the last one
iframe.onload=function(){iframe.src='http://B';}

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';

本文标签： javascriptForce synchronous iframe loadStack Overflow