为什么我的iframe把html内容当作文本?

问题描述:

为什么会这样?iframe 将我的html内容视为文本内容。

问题:我想把整个html内容和它的标签一起渲染,而不是作为文本内容。 我想把整个html和它的标签一起渲染,而不是作为一个文本。

我的代码:

$('#resultBtn').off('click');
 $('#resultBtn').on('click',function(){
 
 var html = '<p id="pclick">Click me to see Alert</p>'
  var javascript = `document.querySelector('#pclick').on('click',function(){
     alert('clicked me');
 })`;
  var bodyContent = html +`<script>${javascript}<\/script>`;


$("#result_iframe").contents().find("body").html(`${bodyContent}`);

});
#result_iframe{
   width: 400px;
   height: 200px;
   background:#eaeaed;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <button id="resultBtn">see Result</button>


<iframe id="result_iframe" frameborder="0"></iframe>

解决方法:

我不是专家,但我知道你不能在阅读文档后在文本中传递JS。在这里的编辑器中,它不工作,我不知道为什么,但在测试文件中它工作。试试这个(JS en parent)。

  <button id="resultBtn">see Result</button>
   <iframe id="result_iframe" frameborder="0"></iframe>
   <script>
     var button = document.getElementById("resultBtn");
     var iframe = document.getElementById("result_iframe");

     button.onclick = function(){
       iframe.contentDocument.body.innerHTML = "<p onclick='window.parent.showAlert()'>Click Me</p>"
     }
     function showAlert(){
       alert("Hi");
     }
   </script>

未经允许不得转载:芯片验证自学网-IC设计入门自学网站 » 为什么我的iframe把html内容当作文本?

赞 (0) 打赏

觉得文章有用就打赏一下文章作者

微信扫一扫打赏