Not able to append html inside dynamically loaded iframe

Question

Index.html

 <li>
       <a href="#" id="run">Run</a>
 </li>
    <iframe id="outputContentLoadContainer" src="" style="border:none"></iframe>

output.html

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
p{
   color: blue;
} 
</style>
</head>
<body>
<div id="container">
 <p>hi I am new html.</p>
</div>
</body>
</html>

JS:

   $("#run").click(function(e) {    
            $("#outputContentLoadContainer").attr("src","index_output.html");
        $("#outputContentLoadContainer").contents().find("body").append('<p>Test</p>');     

  });

On click of Run I am appending <p>Test</p> to body of iframe html but it's only showing <p>hi I am new html.</p> why?

use $("#run").on('click',function(e) instead of $("#run").click(function(e) — Alok Deshwal
– Alok Deshwal, Commented Oct 23, 2015 at 12:28
@AlokDeshwal they are the same thing, click() is simply a shortcut for on('click'... — charlietfl
– charlietfl, Commented Oct 23, 2015 at 12:34
@ charlietfl 2 No I think they are not same thing where ever i know .on method in jquery is used to bind the event where your html is created dynamically — Alok Deshwal
– Alok Deshwal, Commented Oct 23, 2015 at 12:36
@AlokDeshwal the signature you provided does not do any delegation. That element must exist the way you have written it ... and yesclick() uses on() internally so they are the same in this situation — charlietfl
– charlietfl, Commented Oct 23, 2015 at 12:39
@ charlietfl 29 Will you please check the following link stackoverflow.com/questions/9122078/… — Alok Deshwal
– Alok Deshwal, Commented Oct 23, 2015 at 13:10

charlietfl · Accepted Answer · 2015-10-23 13:07:33Z

1

Issue is no different than using document.ready to allow the dom to load before running code... you need to let the iframe load also.

Think of it as an asynchronous operation .. there is time involved in getting the new page and time needed to render it

Try:

 $("#outputContentLoadContainer").on('load', function(){    
     $(this).contents().find("body").append('<p>Test</p>');
});

$("#run").click(function(e) {    
      $("#outputContentLoadContainer").attr("src","index_output.html");
});

DEMO

edited Oct 23, 2015 at 13:07

answered Oct 23, 2015 at 12:33

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joy Biswas · Accepted Answer · 2015-10-23 13:03:38Z

0

Jquery selector takes in a second param as a document Object in your example it would be $('#outputContentLoadContainer').document

Inserting a P tag

$('body', $('#outputContentLoadContainer').document).on('load',function(){
     $(this).append('<p>My Text in Dynamic iframe</p>');
});

edited Oct 23, 2015 at 13:03

answered Oct 23, 2015 at 12:58

Joy Biswas

6,5531 gold badge27 silver badges50 bronze badges

Collectives™ on Stack Overflow

Not able to append html inside dynamically loaded iframe

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related