[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1292
  • Last Modified:

Check if/when an iframe finished loading

Hi,

I am setting up a page, in which I want to have dynamic content.
on the left will be a row with links, and on the right will be various dynamic content. Now I want to show this dynamic content without refreshing the main window, so I thought about having an invisible iframe in which I load the content and then I copy the content over to the main window.
Now my question is: How can I know when the iframe is loaded? Before that I cannot copy the contents.

Thanks in advance,
Sander
0
tjikkun
Asked:
tjikkun
  • 6
  • 4
1 Solution
 
archrajanCommented:
do this

<iframe onLoad="alert('iframe loaded');"></iframe>
0
 
archrajanCommented:
More exactly u shud set a hidden variable in the iframe with the loaded status like this

<iframe onload = "document.getElementById('hid').value = 'loaded'">

and u can check this:

<BODY>
<input type = "text" id = "hid">
<iframe src = "http://www.yahoo.com" onload = "document.getElementById('hid').value = 'loaded'"></iframe>
</BODY>
0
 
tjikkunAuthor Commented:
Well now how do I check when this variable is changed?
I tried:

function reload() {
doc = document.getElementById('frame').contentDocument
doc.location.reload()
while (document.getElementById('load').value == "false"){
//hangs in this loop
}
##############################
<iframe id="frame" src="foo.html" onload="document.getElementById('load').value = 'true'"></iframe>

but it never comes out of the loop (yes I know I shouldn't use a tight loop like that. I tried with a setInterval construction as well, same result. It seems that as long as the script is running no new script is invoked or somehing?
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
tjikkunAuthor Commented:
hmm I was stupid, but got it working now. Just put the function inside of onload. However I now see that the iframe onload = not part of the html specs. Is there any standards complying way of doing this?
0
 
archrajanCommented:
puting in the iframe onload?
0
 
tjikkunAuthor Commented:
sorry I don't understand what you mean.
0
 
archrajanCommented:
I meant to ask u want a way to replace the onload event of the iframe tag?

Then do this
<script>
document.getElementById('load').value = 'true'
</script>

and place this just before the </body> tag of ur iframe source
0
 
tjikkunAuthor Commented:
yes ok, but then how do you check when this value is set? Every way I do it seems to block
0
 
archrajanCommented:
>>>Every way I do it seems to block
The iframe src is in ur own domain right???

And the onload event of iframe is not something wrong...
U can attach the onload event with javascript like this

<iframe id = "ifr" src = "somepage.html"></iframe>

<script>
document.getElementById('ifr').onload = myfunc;
</script>

function myfunc()
{
document.getElementById('load').value = 'true'
}


0
 
archrajanCommented:
Please post ur view source to see problems with ur code
0
 
Cem TürkSenior Software EngineerCommented:
No comment has been added to this question in more than 21 days, so it is now classified as abandoned.

I will leave the following recommendation for this question in the Cleanup topic area:
    PAQ - No Refund

Any objections should be posted here in the next 4 days. After that time, the question will be closed.

cem_turk
EE Cleanup Volunteer
0

Featured Post

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

  • 6
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now