Append within Append, Iframe within Append in Jquery

Question

I've looked at Insert content into iFrame and their fiddle at http://jsfiddle.net/8VP4y/3/ to come out with the following codes which i'm having problem.

i've created a jsfiddle for my problem below.

https://jsfiddle.net/cy87j70t/2/

   $( document ).ready(function() {

       $('#card2').html( '<iframe id="myFrame"></iframe>' );

       var myFrame = $("#myFrame").contents().find('body');
       var myFrame2 = $("#myFrame2").contents().find('body');

        myFrame.append('<p>OH NO TOKEN IS FOR myFrame Original ');
        myFrame2.append('<p>OH NO TOKEN IS FOR myFrame 2 ');

    });

AND the HTML looks like this;

<div id='card2'>

</div>
<iframe id='myFrame2'>

</iframe>

I'm trying to create a iframe using javascript, then writing to the iframe with content from JSONP (i've ommitted that part for easy debug);

I'm not sure why it's not writing to the iframe, is it because the iframe is created by javascript?

I've tried append, html, after, prepend but nothing seems to allow me to write to the iframe

it prints in myFrame2 which is created in HTML but doesn't print into myFrame which is created by javascript. — Someone Special, Apr 23 '16 at 17:01
Oh ya, i just checked using safari and it's displaying. it seems like in Firefox it appears for split of a second but disappear after. Anything im doing that's not compatible with firefox? — Someone Special, Apr 23 '16 at 17:05

score 2 · Accepted Answer · answered Apr 23 '16 at 18:01

2

No, it's not a bug.

Updated jsfiddle

The right way is:

$(function () {
  $('#card2').html('<iframe id="myFrame"></iframe>');

  // add the src attribute so that the load event will take place in every browser..
  $("#myFrame").attr('src', 'about:blank');

  // wait for the iframe is loaded
  $("#myFrame").on('load', function(e) {
    var myFrame = $("#myFrame").contents().find('body');
    myFrame.append('<p>11111111OH NO TOKEN IS FOR myFrame Original</p>');
  });



  var myFrame2 = $("#myFrame2").contents().find('body');
  myFrame2.append('<p>2222222222  OH NO TOKEN IS FOR myFrame 2</p>');
});

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>

<div id='card2'>

</div>
<iframe id='myFrame2'>

</iframe>

answered Apr 23 '16 at 18:01

gaetanoM

41,594
6
42
61

Thank you so much, i think the frame onload did the trick for firefox. but it's funny how when u remove **$("#myFrame").attr('src', 'about:blank');** it will no longer work on Safari but will work on firefox but it was working fine without src on safari on my original fiddle – Someone Special Apr 23 '16 at 18:16
1

@DaveTeu The problem is: iframe is a container, so if you set the src attr the event load is triggered and you can continue. I tested it on win 8.1 with: ie11, FF & Chrome last version. – gaetanoM Apr 23 '16 at 18:16
1

Thank you very much. After understanding the logic i found out $('#myFrame')[0].contentWindow.location.reload(true); works too if i don't want the about:blank in my codes. 6 hours on this bug Zzz thank u and out. – Someone Special Apr 23 '16 at 18:31
I tested chrome safari etc on mobile. Strangely... FireFox on mobile doesn't work with this solution. It works with [JSFIDDLE Original Code](https://jsfiddle.net/cy87j70t/) without the attribute call but doesn't work with our latest solution [JSFIDDLE - Your Codes](https://jsfiddle.net/cy87j70t/3/) – Someone Special Apr 23 '16 at 21:44
@DaveTeu The mobile world is evolving day by day and it's different from desktop. Thanks for sharing info. – gaetanoM Apr 23 '16 at 21:48

Append within Append, Iframe within Append in Jquery

1 Answers1

Linked