为啥我的 iframe 将 html 内容视为文本

Posted 2023-05-09

【中文标题】为啥我的 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，然后***、jsfiddle、codepen的代码sn-p如何工作，它与iframe一起工作

我指的是这个网站来创建我自己的 jsfiddle websanova.com/posts/jquery/… 它的演示在这里 jsnova.websanova.com

我将在答案中提供参考。

【参考方案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