Предварительный просмотр HTML-документа с помощью jquery

Question

Пытаюсь выучить jquery. Наткнулся на этот код про предварительный просмотр ввода textarea через 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 () для предварительного просмотра ввода textarea и разметки html? Не поймите меня неправильно, это работает, просто не понимаю, почему бы просто не использовать метод .html (). В чем разница между обоими методами?

Answer 1

.html () возвращает содержимое тега html.Поэтому, если вы вызовете его в теге div, он вернет все, что находится между <div></div>Функция .attr возвращает значение атрибута, такого как атрибут src для img, атрибут href для привязки.Атрибут srcdoc в iframe странный, так как этот атрибут принимает html.То, что вы делаете в своем примере, эквивалентно следующему на простом JS:

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

Технически ничего нет внутри <iframe></iframe>, а скорее в атрибуте srcdoc <iframe srcdoc="some html"></iframe>.Поэтому вам нужно позвонить .attr .

Дополнительная информация: MDN

Answer 2

У iframe есть собственное окно, которое изолировано от окна родительской страницы и не является стандартным элементом содержимого.

У него есть собственный документ, тело и т. Д.

Чтобы установить html(), вы должны сначала войти в это окно, чтобы работать с его внутренним документом.

srcdoc - это просто быстрый путь к настройке содержимого в документе iframe