为什么我的 iframe 将 html 内容视为文本答案

【问题标题】：Why my iframe treats html content as text为什么我的 iframe 将 html 内容视为文本
【发布时间】：2020-08-05 12:31:21
【问题描述】：

为什么iframe 将我的 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>

【问题讨论】：

@terrymorse，像这样的完整 html 内容<p id="pclick">Click me to see Alert</p><script>document.querySelector('#pclick').on('click',function(){ alert('clicked me'); })</script>
这不是 iframe 的工作原理。
@terrymorse，然后stackoverflow、jsfiddle、codepen的代码sn-p如何工作，它与iframe一起工作
我指的是这个网站来创建我自己的 jsfiddle websanova.com/posts/jquery/… 它的演示在这里 jsnova.websanova.com
我将在答案中提供参考。

标签： javascript jquery iframe

【解决方案1】：

我不是专家，但我知道您在阅读文档后无法通过文本传递 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>

【讨论】：

【解决方案2】：

此代码正在尝试将 HTML 内容添加到 iframe：

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

但是，不支持将文本节点或 HTML 元素添加到 iframe。来自HTML5 spec for iframe：

4.8.5 iframe 元素

内容模型：
什么都没有

这就是Nothing 在这种情况下的含义：

当元素的内容模型为空时，该元素不得包含文本节点（元素间空白除外）和元素节点。

鉴于不支持向 iframe 添加内容，使用不同的方法可能是个好主意。

【讨论】：

【解决方案3】：

Semed，您的代码工作正常。确保您的脚本是在 jquery 插入之后编写的。

$('#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}`);
});

【讨论】：

你能给我一个sn-p，here或jsfiddle