CODEWITHSUNDEEP
jqueryiframe
Akki619
Akki619

Reputation: 2432

Not able to append html inside dynamically loaded iframe

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?

Upvotes: 1

Views: 1300

Answers (2)

charlietfl
charlietfl

Reputation: 171669

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

Upvotes: 1

Joy Biswas
Joy Biswas

Reputation: 6527

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>');
});

Upvotes: 0

Related Questions