javascript - 为什么我的 iframe 将 html 内容视为文本

Question

为什么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>

标签： javascriptjqueryiframe

Answer 1

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

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

iframe但是，不支持向 an 添加文本节点或 HTML 元素。来自iframe 的 HTML5 规范：

4.8.5 iframe 元素

内容模型：
    无

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

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

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