...

View Full Version : Adding an "onload" event handler to an iframe DOM object in IE



PunMaster
11-14-2008, 08:29 PM
I have a handle to an iframe dom object. I am able to use ".src" or ".contentWindow.location.href" to set the page loaded in the iframe to a given url, and both methods work perfectly in both ff3 and ie7. Now, I want to register an event that will call my javascript back when this file finishes loading. I have tried literally a hundred different ways of doing this and most of them worked flawlessly in firefox, but none worked in ie. Does anyone know an ie-compatible way of doing this? Note that the files I am loading in the iframe are text files (not html) and I cannot modify them. I am currently using a temporary "fix" by ditching the dom completely and putting an '<iframe src="..." onload="..."></iframe>' string into the document using "document.innerHTML", but this ugly and not as flexible as registering a real dynamic event. If anyone can help me with this, I would greatly appreciate it. Thank you. :)

itsallkizza
11-15-2008, 06:39 AM
If I understand your needs correctly, you can simply add an onload event to the iframe.

You can do this several ways, here's 2:
1) Add it statically inside the iframe's html tag:


<iframe name="my_iframe" src="http://www.google.com" onload="alert('hey');"></iframe>

2) Add it dynamically using a DOM reference:


frames["my_iframe"].onload = function(){
alert("hey");
}


Oh and the document.getElementById("my_iframe").src works in all browsers but Opera 6, whereas the frames["my_iframe"].location.href works in Opera 6 as well. However, if you are adding the entire iframe dynamically, then you MUST use the document.getElementById("my_iframe").src method for cross-browser access (this is because newly added iframes - especially if inserted using innerHTML - are not guaranteed to be placed into the window.frames array immediately, if at all).

rangana
11-15-2008, 07:40 AM
Hi itsallkizza,

Could you please show a working example on how to apply that of your example in #2.

I've tried this:


<script type="text/javascript">
window.onload=function(){
document.getElementById('myframe').onload = function()
{
alert("hey");
}
}
</script>
<iframe src="http://www.yahoo.com" id="myframe" name="myframe"></iframe>


...and this (returns null):


<script type="text/javascript">
window.onload=function(){
frames['myframe'].onload = function()
{
alert("hey");
}
}
</script>
<iframe src="http://www.google.com" id="myframe" name="myframe"></iframe>


..as well as this (returns null):


<script type="text/javascript">
frames['myframe'].onload = function()
{
alert("hey");
}
</script>
<iframe src="http://www.google.com" id="myframe" name="myframe"></iframe>


...but none of them worked (for me at least).

Could you please shed some light on that.

itsallkizza
11-15-2008, 07:46 AM
This works in FF and IE (I admittedly did not test any others):


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[
window.onload = function()
{
frames["my_iframe"].onload = function()
{
alert("hey");
}
//this also works for me:
//document.getElementById("my_iframe").onload = function()
// {
// alert("hey");
// }
}
// ]]>
</script>
</head>
<body>

<iframe name="my_iframe" id="my_iframe" src="http://www.google.com"></iframe>

</body>
</html>


I'm not sure why your first two aren't working (assuming your script tags are above your html </head>).*

Oh and: http://www.codingforums.com/showthread.php?t=152227
- I would never give you a bad rep, I appreciate all the help you give.

EDIT: *I'm sure you already know, this is just for others who come across this post: it's best form (even if it works on certain specific browsers) to not make any DOM calls/references to DOM objects before the DOM has completely loaded. Since an HTML DOM doesn't finish building until the </html> tag, this effectively means no inline DOM calls (unless attached to an onload or post-onload event).

rangana
11-15-2008, 07:52 AM
I tested using these browsers: FF 3.0.4, IE 7.0, Safari 3.1.1, Opera 9.50 and nothing seemed to work.

Also, for that one, my apologies for asking you via PM.

Also, the reason why you can't send me a PM is because I restricted sending PMs only to those that are in my friends list.

Anyway, hope you could shed some more light on how to make it work.

itsallkizza
11-15-2008, 08:00 AM
Wow, I feel embarrassed...

I had two copies of my test.html. One was on my server (http://ebonyaura.com/test.html) and the other was on my desktop. I was making changes to the one on my desktop and then testing the one on my server... lol silly me :)

Rangana is right: the iframe.onload=function(){} method doesn't seem to work, my apologies. I'll see if I can find another way to dynamically change the onload event.

jfyi, setAttribute doesn't work either.

itsallkizza
11-15-2008, 08:03 AM
One foolproof option is to have an intermediary page that ajaxes and displays your text file. You can tell for sure when the ajaxing is complete.

itsallkizza
11-15-2008, 08:21 AM
Here, I made it for you: http://ebonyaura.com/test.html

test.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[
function oniframeLoad()
{
alert("its loaded!");
}

function displayTextFileWithOnload(f)
{
var script_to_insert = "my_script.js";
frames["my_iframe"].location.href = "get_src_add_onload.php?f_url="+f+"&s_url="+script_to_insert;
}

window.onload = function()
{
displayTextFileWithOnload("text.txt");
//displayTextFileWithOnload("http://data.iana.org/TLD/tlds-alpha-by-domain.txt");
}
// ]]>
</script>
</head>
<body>

<iframe name="my_iframe" id="my_iframe" src=""></iframe>

</body>
</html>


my_script.js


function doSomething()
{
parent.oniframeLoad();
}

if (window.addEventListener)
{
window.addEventListener("load",doSomething,false);
}
else if (window.attachEvent)
{
window.attachEvent("onload",doSomething);
}


get_src_add_onload.php


<?php
$f_url = $_GET["f_url"] ? $_GET["f_url"] : null;
$s_url = $_GET["s_url"] ? $_GET["s_url"] : null;

$nl = '';
echo('<html>'.$nl);
echo('<head>'.$nl);
echo('<script type="text/javascript">'.$nl);
if ($s_url) echo(file_get_contents($s_url));
echo('</script>'.$nl);
echo('</head>'.$nl);
echo('<body>'.$nl);
echo('<pre>'.$nl);
if ($f_url) echo(file_get_contents($f_url));
else echo("failed to load text file");
echo('</pre>'.$nl);
echo('</body>'.$nl);
echo('</html>');
?>

rangana
11-15-2008, 08:28 AM
If you intend to check if the iframe has just been loaded, why not?


<script type="text/javascript">
window.onload=function()
{
var iframe=document.getElementById('myframe');
if(iframe)
alert('The iframe has just been loaded.');
}
</script>
<iframe src="http://www.google.com" id="myframe"></iframe>

itsallkizza
11-15-2008, 08:39 AM
He wants to dynamically load new sources into the iframe, he would have to run a setTimeout to keep checking if its loaded. That's not ideal.

However, if he uses the API I spent time making for him he can load any external source into his iframe at any point during his page's runtime.

PunMaster
11-15-2008, 05:31 PM
Thank you, everyone, for your help. :) The ajax code was a really cool idea, but unfortunately, this has to be completely client-side. The sad part is, in firefox, it was as easy as adding an "onload" event to the iframe object (i.e. "myFrame.onload = myEventFunc;"). I guess I expected there to be a similar method that made ie happy. It also seems strange that the "innerHTML" injected markup works fine in both browsers while the purely javascript method only works in firefox (because it's obvious ie could do it if it wanted to). Anyone have any other ideas? Thanks again for being so helpful. :)

itsallkizza
11-15-2008, 09:19 PM
unfortunately, this has to be completely client-side
Is this because you want it to run on your desktop? Just wondering.

Sadly I read in a few forums I came across yesterday that the iframe object doesn't have an onload in IE, period. Mind you these were just forums though and not written in stone from microsoft. (Also notice I said the iframe object, IE obviously supports the html tag attribute "onload.")

Also, if you're just running this on people's desktops, then there's really no harm in using innerHTML. The concept of bad form really only exists for public creations. Otherwise, if it works, it works.

PunMaster
11-16-2008, 03:43 AM
Thanks for looking into it. :) Actually, I am writing a javascript framework (a set of convenient libraries for people to use on their websites) and I really don't want it to be dependent on anything on the server.

itsallkizza
11-16-2008, 05:18 PM
Oh cool, I see now :)

Haha you probably shouldn't have mentioned that out loud, people are gonna try and burst your bubble by giving you links to Prototype, jQuery and whatnot.

I think it's a fun idea though, so if you ever need help on any aspect of it, pop me an e-mail.

Good luck.

subhailc
11-27-2008, 12:28 AM
in IE you can't add an onload handler dynamically, BUT you can redefine the function


<html>
<head>
<script>
function onLoadHandler(){};
function changeHandler(){
onLoadHandler = function(){
alert("added successfully");
};
};
</script>
</head>
<body>
<iframe onload="onLoadHandler()"></iframe>
</body>
</html>hth

itsallkizza
11-28-2008, 07:20 AM
Good idea. I'm jealous I didn't think of it :)

johnywhy
10-05-2010, 08:38 PM
If you intend to check if the iframe has just been loaded, why not?


<script type="text/javascript">
etc.

Does not work in IE



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum