PDA

Click to See Complete Forum and Search --> : <iframe> onload event

Endeavor
07-08-2003, 09:24 AM
Gentlemen! Would anybody tell, please..
<iframe name="myIFRAME"></iframe>
<script>
myIFRAME.document.onload = alert(someStuff);
</script>
-- is it a right call to fire the onload event? I can't get the innerHTML of the <iframe> using this syntax (and lots other).
How to get the innerHTML of a page loaded into the iframe??

Lots of _GRATITUDE_ for all!!!

Respectfully,
Endeavor
Khalid Ali
07-08-2003, 09:27 AM
iframe.document.elementName.innerHTML

however,if the page you a re trying to get innerHTML of is an out of domain page then you can not do that...
Endeavor
07-08-2003, 09:31 AM
Thank You a lot, mr Khalid Ali!

Well the root of the problem is that _possibility_ to get the valid innerHTML of an <iframe>.
Here goes:

<script>
//the urls array I try to use
URLs = [null, 'outer.html', ... url2, url3, ...];
//the loader function
function loadOuterContent(theURL){
nestFRAME.location.href = theURL;
rootDIV.innerHTML = nestFRAME.document.body.innerHTML;
}
</script>
<div id="myButton" onclick="loadOuterContent(URLs[1])">button</div>
<iframe name="nestFRAME"></iframe>
<div id="rootDIV"> </div>

>> event #_
1.) By firing URLs[1] the <iframe> gets URLs[1], and rootDIV gets NOTHING;
2.) by url2 (the URLs array) I get that damn URLs[1] in my miserable rootDIV instead of the very url2 (that is handled properly by the nestFRAME though);
3.) By url#...12345 the <iframe> gets it, and the rootDIV receives, on its turn, the last iframe's content, that's url2.
Etc., rootDIV goes one step behind of the nestFRAME.

All pointed above points at that there's a lack of coincidence in the history steps between <iframe> and the rootDIV.
So I decided to fire the 'onload' event of the <iframe> object to swap the rootDIV's content with the _LOADED_ iframe's _PROPER_ one. But it seems it didn't help.. Was the 'iframe onload' syntax right again?, what should I do (instead of getting some beer :)??

..and yes, it's on the same domain..

Thanks a lot again!!
G'luck!

>> Respectfully,
>> Endeavor
Khalid Ali
07-08-2003, 09:36 AM
yes onload syntax looked correct.
Only thing is you need to use it with window
window....in this case it should be like this
frameName.onload...
Endeavor
07-08-2003, 09:53 AM
Thank you again, sir!

..but anyway the 'rootDIV' remains behind the iframe in showing stuff ('link_1' appears in iframe, 'null' for div; 'link_2' for iframe, 'link_1' swaps into the div; etc).. May be there're that 'history' object?..
Sorry for bothering,
and thank you again!

Respectfully,
>> Endeavor
Khalid Ali
07-08-2003, 09:59 AM
Originally posted by Endeavor
Thank you again, sir!

.. the 'rootDIV' remains behind the iframe in showing stuff

Let me understand this,
are you saying that you have some div elements and iframe overlaps the display for some div?
If so then you have set the z-index property for both elements(div and iframe)
the element with the highest z-index value will be painted on top...
But this is problematic,because not allots of browsers see iframe as windowless elements....
Endeavor
07-08-2003, 10:59 AM
No, by 'remaining behind' I mean the very history. The idea is to load an external .HTML file(s) into a hidden iframe, and then to place its innerHTML into the div (rootDIV.innerHTML = nestFRAME.document.body.innerHTML). And the problem occurs :(
I just can't understand where the problem is rooted -- why div receives the _PREVIOUS_ iframe's content instead of current one. -??.. First I thought it's connected with the 'onload' event of an iframe. But even if I write smth like iframeName.onload = loadItIntoDIV(innerHTML.routine)..., anyway the div receives the iframe's _PREVIOUS_ content. That's iframe gets some new page, and div receives innerHTML of the _old_ page (that is already _replaced_ with the new one in the iframe). That's it, and WHY???

Sorry if my description is blurry, I'm not a native English speaker (I'm from RUSSIA)..

And -- AGAIN -- THANK YOU VERY MUCH, mr Khalid!

Respectfully,
>> Endeavor

______________________________________

p.s. There's a sample code from here down..

<!--
Sorry for my poor coding -- I'm a newbie in JS
-->

<html><head><title>iframe-to-div sample</title>

<style type="text/css"><!--
body{overflow:hidden}
.rootDiv{border:1px solid slategray; cursor:hand; font-weight:bold; font-size:14px; letter-spacing:1px; font-family:Verdana;}
.nest{position:absolute; margin-top:34px; left:23px; overflow:auto; width:123px; height:123px;}
--></style>

<script language="JavaScript1.2" type="text/javascript"><!-- //

//urls array..
URLs = [null, 'url_1.html', 'url_2.html', 'url_3.html', 'url_4.html', 'url_5.html'];

//text for buttons
txt=[null, "about", "stuff", "new", "arch", "info"];

//take iframe's innerHTML and place it into DIV
function iframeToDiv()
{
screenDIV.innerHTML = ifr.document.body.innerHTML;
}

//load a proper url into iframe;
//then call the iframeToDiv() function when _onload_
function loadURL( theURL )
{
ifr.location.href = theURL;
ifr.document.onload = iframeToDiv();
}

//write menus with 'onclick' event..
function doStuff()
{
for(i=1; i<=5; i++)
{
document.write('<div class="rootDiv" id="'+i+'" onclick="loadURL(URLs[' + i + '])">'+txt[i]+ '</div><br />');
}
}

doStuff();

// --></script>
</head>
<body>

<!-- the hidden iframe where we load files for retreiving their innerHTML property -->
<iframe name="ifr" id="nestFRAME" class="nest"></iframe>

<!-- our brave div to take the innerHTML of documents _loaded_ into iframe -->
<div class="nest" id="screenDIV" style="left:180px; border:1px solid black">&nbsp;</div>

</body></html>

That's it. Not that I'm asking to give a code, I need to understand a principle -- why it goes this way? Where to see for the solution?
Endeavor
07-08-2003, 11:44 AM
A little addition -- the sample files sources, please:

______________________

<!-- url_1.html -->

<html>
<head>
<title>url_1</title>
</head>
<body>
<p>
url_1
</p>
</body>
</html>
______________________

<!-- url_2.html -->

<html>
<head>
<title>url_2</title>
</head>
<body>
<p>
url_2
</p>
</body>
</html>
______________________

<!-- url_3.html -->

<html>
<head>
<title>url_3</title>
</head>
<body>
<p>
url_3
</p>
</body>
</html>
______________________

<!-- url_4.html -->

<html>
<head>
<title>url_4</title>
</head>
<body>
<p>
url_4
</p>
</body>
</html>
______________________

<!-- url_5.html -->

<html>
<head>
<title>url_5</title>
</head>
<body>
<p>
url_5
</p>
</body>
</html>
______________________

Best regards --

>> Endeavor
Khalid Ali
07-08-2003, 12:29 PM
try this link..
http://68.145.35.86/temp/Endeavor/Endeavor_main.html
Endeavor
07-08-2003, 01:16 PM
Ah, I see what you mean.
Thank you very much!
Also I humbly apologize for possible inconveniences of any kind I might bring by writing to your forums.
By the by, sorry for the next stupid question -again, but why the 'populateDiv()' function does not work if I commit smth like this:
<select name="lb" onchange="Process(this.options[this.selectedIndex].value); populateDiv()">
or that:
frameObj.onload = populateDiv();
-???..

>> Best wishes from
>> Endeavor

p.s. T H A N K Y O U !!!
Khalid Ali
07-08-2003, 01:49 PM
That could be that page is not loaded in the iframe as yet and its been tried to access...if you must do it that way then add a delay using
setTimeout('populateDiv()',100);

and this will work
Endeavor
07-08-2003, 03:01 PM
T H A N K &nbsp;&nbsp;Y O U &nbsp;&nbsp;AGAIN!!!

G'LUCK!

>> Endeavor
Endeavor
07-08-2003, 07:04 PM
..By the by, in IE4 the onload event seems unsupported at all (alerts don't work at least).
Well, is there some other way to explain a browser that an iframe's content is refreshed and loading is complete??

Thanks!
--- ENDEAVOR -->>
Khalid Ali
07-08-2003, 09:19 PM
As in my code try using setTimeout() that oughtta work..:-)
Endeavor
07-09-2003, 04:10 AM
Will setting timeout solve the problem, actually? How I can realize when a document is REALLY loaded, if an onload event is not supported, what timing out do is timing out, and a connection a user have might vary -- PC config., OS, modem, wiring, opened applications, etc etc etc...
-???..

Respectfully,
>> Endeavor