Книга: JavaScript. Подробное руководство, 6-е издание

15.10.2. Метод document.write()

15.10.2. Метод document.write()

Метод document.write() был одним из первых методов, реализованных еще в вебброузере Netscape 2. Он появился еще до создания модели DOM и представлял единственный способ отображения динамически изменяемого текста в документе. В современных сценариях надобность в этом методе отпала, но вы наверняка встретите его в существующем программном коде.

Метод document.write() объединяет свои строковые аргументы и вставляет получившуюся строку в документ, в точку вызова метода. По завершении выполнения сценария броузер выполнит синтаксический анализ сгенерированного вывода и отобразит его. Например, следующий фрагмент использует метод write() для динамического вывода информации в статический HTML-документ:

<script>
  document.write("<p>3arоловок документа: " + document.title);
  document.write("<br>URL: " + document.URL);
  document.write("<br>Ссылающийся на него документ: " + document, referrer);
  document.write("<br>изменен: " + document.lastModified);
  document.write("<br>Открыт: " + new Date());
</script>

Важно понимать, что метод write() можно использовать для вывода разметки HTML только в процессе синтаксического анализа документа. То есть вызывать метод document.write() из программного кода верхнего уровня в теге <script> можно только в случае, если выполнение сценария является частью процесса анализа документа. Если поместить вызов document.write() в определение функции и затем вызвать эту функцию из обработчика события, результат окажется неожиданным - этот вызов уничтожит текущий документ и все содержащиеся в нем сценарии! (Почему это происходит, будет описано чуть ниже.) По тем же причинам нельзя использовать document.write() в сценариях с установленными атрибутами defer или async.

Пример 13.3 в главе 13 использует метод document.write() указанным способом чтобы сгенерировать более сложный вывод.

Метод write() можно использовать для создания полностью новых документов в других окнах и фреймах. (Однако при работе с другими окнами и фреймами необходимо позаботиться о том, чтобы не нарушать политику общего происхождения.) Первый вызов метода write() другого документа полностью уничтожит имеющееся содержимое этого документа. Метод write() можно вызывать многократно, тем самым добавляя новое содержимое в документ. Содержимое, передаваемое методу write(), может буферизоваться (и не отображаться), пока не будет выполнен завершающий вызов метода close() объекта документа, сообщающий парсеру, что работа с документом окончена и он может выполнить разбор документа и отобразить его.

Следует отметить, что объект Document поддерживает также метод writeln(), который идентичен методу write(), за исключением того, что он добавляет символ перевода строки после вывода своих аргументов. Это может пригодиться, например, при выводе форматированного текста внутри элемента <рге>.

Метод document.write() редко используется в современных сценариях: свойство innerHTML и другие приемы, поддерживаемые моделью DOM, обеспечивают более удачные способы добавления содержимого в документ. С другой стороны, некоторые алгоритмы лучше укладываются в схему потокового ввода/вывода, реализуемую методом write(). Если вы создаете сценарий, который динамически генерирует и выводит текст в процессе своего выполнения, вам, возможно, будет интересно ознакомиться с примером 15.10, в котором свойство innerHTML указанного элемента обертывается простыми методами write() и close().

Пример 15.10. Интерфейс потоков ввода-вывода к свойству innerHTML

// Определить простейший интерфейс "потоков ввода/вывода” для свойства innerHTML элемента
function ElementStream(elt) {
  if (typeof elt === "string”) elt = document.getElementByld(elt);
    this.elt = elt; this.buffer = "”;
}
// Объединяет все аргументы и добавляет в буфер
ElementStream.prototype.write = function() {
  this.buffer += Array.prototype.join.call(arguments,
};
// To же, что и write(), но добавляет символ перевода строки
ElementStream.prototype.writeln = function() {
  this.buffer += Array.prototype.join.call(arguments, "") + "n";
};
// Переносит содержимое буфера в элемент и очищает буфер.
ElementStream.prototype.close = function() {
  this.elt.innerHTML = this.buffer; this.buffer = "";
};

Оглавление книги