Question

尝试学习jquery。遍历了有关预览通过iframe输入的文本区域的代码。

HTML

<div class="content">
  <textarea></textarea>
  <iframe></iframe>
</div>

JQuery

$(function () {
  'use strict';
  $(document).ready( function () {
    $('div.content textarea').keyup( function () {
      $('iframe').attr('srcdoc', $(this).val());
    });
  });
});

我认为html元素需要使用 .html（）而不是 .attr（）来预览文本区域输入和html标记？不要误会我的意思，它有效，只是不明白为什么不只使用.html（）方法。两种方法有什么区别？

Answer 1

iframe具有自己的窗口，该窗口与父页面窗口隔离，并且不是标准内容元素。

它也有自己的文档，正文等。

要在其中设置html()，必须首先进入该窗口以使用其内部文档。

srcdoc只是在iframe文档中设置内容的快捷方式

Answer 2

.html（）返回html标记内的内容。因此，如果您在div标签上调用它，它将返回<div></div>之间的任何内容。 .attr 函数返回属性的值，例如src上的img属性，锚点上的href属性。 iframe的srcdoc属性很奇怪，因为该属性接受html。您在示例中所做的与普通JS中的以下操作等效：

document.getElementById("exampleFrame").srcdoc = "<div>html inside iframe</div>";

从技术上讲，<iframe></iframe>内什么都没有，而是<iframe srcdoc="some html"></iframe>的srcdoc属性中没有。因此，为什么需要调用 .attr 。

更多信息：MDN

使用jQuery预览HTML文档

2 个答案: