Can't write to dynamic iframe using jQuery

Question

My goal is to dynamically create an iframe and write ad JavaScript into it using jQuery (e.g. Google AdSense script). My code works on Chrome, but fails intermittently in Firefox i.e. sometimes the ad script runs and renders the ad, and other times it doesn't. When it doesn't work, the script code itself shows up in the iframe.

My guess is these intermittent failures occur because the iframe is not ready by the time I write to it. I have tried various iterations of iframe_html (my name for the function which is supposed to wait for the iframe to be ready), but no luck. Any help appreciated!

PS: I have read various threads (e.g. jQuery .ready in a dynamically inserted iframe). Just letting everyone know that I've done my research on this, but I'm stuck :)

Iteration 1:

function iframe_html(html){
 $('<iframe name ="myiframe" id="myiframe"/>').appendTo('#maindiv');
 $('#myiframe').load(
   function(){
    $('#myiframe').ready( function(){
     var d = $("#myiframe")[0].contentWindow.document;
     d.open();
     d.close();
     d.write(html);
     });
   }
 );
};

Iteration 2:

function iframe_html(html){
 $('<iframe id="myiframe"/>').appendTo('#maindiv').ready(
   function(){
    $("#myiframe").contents().get(0).write(html);
   }
 ); 
};

try setting src on the iframe to about:blank?

Kevin Peno
– Kevin Peno

2009-11-02 23:58:23 +00:00
Commented Nov 2, 2009 at 23:58 — Kevin Peno
– Kevin Peno, Commented Nov 2, 2009 at 23:58
did you ever solve this issue?

timeitquery
– timeitquery

2010-11-11 00:33:17 +00:00
Commented Nov 11, 2010 at 0:33 — timeitquery
– timeitquery, Commented Nov 11, 2010 at 0:33

Brian Grinstead · Accepted Answer · 2009-11-05 22:24:42Z

Honestly, the easiest and most reliable way I have found when dealing with the load events on iframes uses the "onload" attribute in the actual iframe tag. I have never had much of a problem with setting the content once the "onload" event fires. Here is an example:

<html>
    <head>
        <script type='text/javascript' src='jquery-1.3.2.js'></script>
        <script type='text/javascript'>
            $(function() {
                var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html' onload='iframe_load()'></iframe>");
                $("body").append($iframe);
            });
            function iframe_load() {
                var doc = $("#myiframe").contents()[0];
                $(doc.body).html("hi");
            }
        </script>
    </head>
    <body></body>
</html>

The problem with this is that you have to use attribute tags and global function declarations. If you absolutely CAN'T have one of these things, I haven't had problems with this (although it doesn't look much different than your attempts, so I'm not sure):

<html>
    <head>
        <script type='text/javascript' src='jquery-1.3.2.js'></script>
        <script type='text/javascript'>
            $(function() {
                var $iframe = $("<iframe id='myiframe' name='myiframe' src='iframe.html'></iframe>");
                $iframe.load(iframe_load);
                $("body").append($iframe);
            });
            function iframe_load() {
                var doc = $("#myiframe").contents()[0];
                $(doc.body).html("hi");
            }
        </script>
    </head>
    <body></body>
</html>

This is one of the most frustrating parts of the DOM and JavaScript - my condolences are with you. If neither of these work, then open up Firebug and tell me what the error message is.

Cool Solution!! +1, Can you add a function that will detect when dynamic data completes loading in iframe after $(doc.body).html("hi!") ?

Community · Accepted Answer · 2017-05-23 10:27:36Z

-1

false.html:

<html>
<head><title></title></head>
<body></body>
</html>

JS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

function iframe_html(html)
{
 var id = "myiframe_" + ((new Date()).getTime());

 $('<iframe src="false.html" name ="'+id+'" id="'+id+'" />').appendTo('#maindiv');

 var loadIFrame = function()
 {
      var elIF = window.document.frames[id];
      if (elIF.window.document.readyState!="complete") 
      {
        setTimeout(loadIFrame, 100);
        return false;
      }

      $(elIF.window.document).find("body").html(html);
 }

  loadIFrame();


};
$(function(){

    iframe_html("<div>hola</div>");

}); 
</script>
</head>
<body>
<div id="maindiv"></div>
</body>
</html>

then please see this link

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Nov 2, 2009 at 23:54

andres descalzo

15k14 gold badges66 silver badges119 bronze badges

2 Comments

Fremont Troll Over a year ago

That did not work. I have the same problem as before, which is that the ad script does not execute intermittently.

andres descalzo Over a year ago

I modify the example, look after the link to see the compatibility of window.document.frames[x].

Collectives™ on Stack Overflow

Can't write to dynamic iframe using jQuery

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related