Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Adding an "onload" event handler to an iframe DOM object in IE

    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.

  • #2
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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:
    Code:
    <iframe name="my_iframe" src="http://www.google.com" onload="alert('hey');"></iframe>
    2) Add it dynamically using a DOM reference:
    Code:
    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).
    Last edited by itsallkizza; 11-15-2008 at 06:41 AM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    Hi itsallkizza,

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

    I've tried this:
    Code:
    <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):
    Code:
    <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):
    Code:
    <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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #4
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    This works in FF and IE (I admittedly did not test any others):
    Code:
    <!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: Rangana
    - 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).
    Last edited by itsallkizza; 11-15-2008 at 07:49 AM. Reason: addition
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #5
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    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.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    itsallkizza (11-15-2008)

  • #6
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #7
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #8
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    Here, I made it for you: http://ebonyaura.com/test.html

    test.html
    Code:
    <!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
    Code:
    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
    Code:
    <?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>');
    ?>
    Last edited by itsallkizza; 11-15-2008 at 08:23 AM.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    rangana (11-15-2008)

  • #9
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    If you intend to check if the iframe has just been loaded, why not?
    Code:
    <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>
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • #10
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #11
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #12
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • #13
    New to the CF scene
    Join Date
    Nov 2008
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #14
    Senior Coder
    Join Date
    Oct 2008
    Location
    Long Beach
    Posts
    1,196
    Thanks
    36
    Thanked 164 Times in 164 Posts
    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.
    Feel free to e-mail me if I forget to respond ;)
    ohsosexybrit@gmail.com

  • Users who have thanked itsallkizza for this post:

    PunMaster (11-17-2008)

  • #15
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    in IE you can't add an onload handler dynamically, BUT you can redefine the function
    Code:
    <html>
    <head>
    <script>
    function onLoadHandler(){};
    function changeHandler(){
    	onLoadHandler = function(){
    		alert("added successfully");
    	};
    };
    </script>
    </head>
    <body>
    <iframe onload="onLoadHandler()"></iframe>
    </body>
    </html>
    hth

  • Users who have thanked subhailc for this post:

    itsallkizza (11-28-2008)


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •