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

  });

点击“运行”后，我将<p>Test</p>附加到iframe html的正文，但它只显示<p>hi I am new html.</p>为什么？

Answer 1

问题与使用document.ready允许在运行代码之前加载dom没有什么不同...您还需要让iframe加载。

将其视为异步操作..获取新页面所需的时间和渲染所需的时间

尝试：

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

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

的 DEMO

Answer 2

Jquery选择器在您的示例中将第二个参数作为文档对象接收$('#outputContentLoadContainer').document

插入P标签

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

无法在动态加载的iframe中附加html

2 个答案: