Метод document.write
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.
Метод document.write – один из наиболее древних методов добавления текста к документу.
У него есть существенные ограничения, поэтому он используется редко, но по своей сути он совершенно уникален и иногда, хоть и редко, может быть полезен.
Как работает document.write
Метод document.write(str) работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.
HTML-документ ниже будет содержать 1 2 3 .
1 3 Нет никаких ограничений на содержимое document.write .
Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.
Текст внутри TD.
Также существует метод document.writeln(str) – не менее древний, который добавляет после str символ перевода строки «\n» .
Только до конца загрузки
Во время загрузки браузер читает документ и тут же строит из него DOM, по мере получения информации достраивая новые и новые узлы, и тут же отображая их. Этот процесс идёт непрерывным потоком. Вы наверняка видели это, когда заходили на сайты в качестве посетителя – браузер зачастую отображает неполный документ, добавляя его новыми узлами по мере их получения.
Методы document.write и document.writeln пишут напрямую в текст документа, до того как браузер построит из него DOM, поэтому они могут записать в документ все, что угодно, любые стили и незакрытые теги.
Браузер учтёт их при построении DOM, точно так же, как учитывает очередную порцию HTML-текста.
Технически, вызвать document.write можно в любое время, однако, когда HTML загрузился, и браузер полностью построил DOM, документ становится «закрытым». Попытка дописать что-то в закрытый документ открывает его заново. При этом все текущее содержимое удаляется.
Текущая страница, скорее всего, уже загрузилась, поэтому если вы нажмёте на эту кнопку – её содержимое удалится:
Из-за этой особенности document.write для загруженных документов не используют.
XHTML и document.write
В некоторых современных браузерах при получении страницы с заголовком Content-Type: text/xml или Content-Type: text/xhtml+xml включается «XML-режим» чтения документа. Метод document.write при этом не работает.
Это лишь одна из причин, по которой XML-режим обычно не используют.
Преимущества перед innerHTML
Метод document.write – динозавр, он существовал десятки миллионов лет назад. С тех пор, как появился и стал стандартным метод innerHTML , нужда в нём возникает редко, но некоторые преимущества всё же есть.
- Метод document.write работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом. Это естественно, ведь он не модифицирует существующий DOM, а пишет в текст страницы до его генерации.
- Метод document.write вставляет любой текст на страницу «как есть», в то время как innerHTML может вписать лишь валидный HTML (при попытке подсунуть невалидный – браузер скорректирует его).
Эти преимущества являются скорее средством оптимизации, которое нужно использовать именно там, где подобная оптимизация нужна или уместна.
Однако, document.write по своей природе уникален: он добавляет текст «в текущее место документа», без всяких хитроумных DOM. Поэтому он бывает просто-напросто удобен, из-за чего его нередко используют не по назначению.
Антипример: реклама
Например, document.write используют для вставки рекламных скриптов и различных счётчиков, когда URL скрипта необходимо генерировать динамически, добавляя в него параметры из JavaScript, например:
На заметку:
Закрывающий тег в строке разделён, чтобы браузер не увидел и не посчитал его концом скрипта.
Также используют запись:
document.write('');Здесь вместо : обратный слеш \ обычно используется для вставки спецсимволов типа \n , а если такого спецсимвола нет, в данном случае \/ не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку .
Сервер, получив запрос с такими параметрами, обрабатывает его и, учитывая переданную информацию, генерирует текст скрипта, в котором обычно есть какой-то другой document.write , рисующий на этом месте баннер.
Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.
То есть, дело даже не в самом document.write , а в том, что в страницу вставляется сторонний скрипт, а браузер устроен так, что пока он его не загрузит и не выполнит – он не будет дальше строить DOM и показывать документ.
Представим на минуту, что сервер ads.com , с которого грузится скрипт, работает медленно или вообще завис – зависнет и наша страница.
В современных браузерах у скриптов есть атрибуты async и defer , которые разрешают браузеру продолжать обработку страницы, но применить их здесь нельзя, так как рекламный скрипт захочет вызвать document.write именно на этом месте, и браузер не должен двигаться вперёд по документу.
Альтернатива – использовать другие техники вставки рекламы и счётчиков. Примеры вы можете увидеть в коде Google Analytics, Яндекс.Метрики и других.
Если это невозможно – применяют всякие хитрые оптимизации, например заменяют метод document.write своей функцией, и она уже разбирается со скриптами и баннерами.
Итого
Метод document.write (или writeln ) пишет текст прямо в HTML, как будто он там всегда был.
- Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы. Запуск после загрузки приведёт к очистке документа.
- Метод document.write очень быстр. В отличие от установки innerHTML и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована.
- Иногда document.write используют для добавления скриптов с динамическим URL. Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница – тоже. Поэтому желательно подключать внешние скрипты, используя вставку скрипта через DOM или async/defer . Современные системы рекламы и статистики так и делают.
Всё только о JavaScript
document.write(arg1[, arg2[, arg3[, . ]]]) — метод, выводящий на страницу переданные ему аргументы. Аргументов может быть любое количество, и они могут быть любых типов, при выводе они преобразуются в строки.
Также существует функция document.writeln , которая аналогична document.write , но добавляет в конце своего вывода перевод строки.
Как работает document.write
document.write выводит свои аргументы после того тега script , в котором он был вызван. К примеру код
Hello, World!
Обратите внимание: не после того тега script , в котором записано выражение document.write , а после того, в котором оно было вызвано. Следующий код
Hello, World!
Hello, World!
document.write работает только на этапе загрузки страницы, его нельзя вызывать в ответ на какое-нибудь событие. Если document.write вызвать после того, как страница загрузилась, результат во всех браузерах будет примерно одинаков — пустая страница и, возможно, тот текст, который был выведен последним document.write . Поэтому даже не пытайтесь использовать его в ответ на какие-то действия пользователя, только на этапе загрузки страницы.
Вывод скриптов
Как и любое другое содержимое, document.write может выводить и скрипты, которые тоже в свою очередь могут содержать document.write . Но нужно помнить: внедрённые в HTML скрипты не могут содержать внутри себя в явном виде строку . Нужно или разорвать этот тег на части ‘‘ , или заменить какой-нибудь символ на escape-последовательность . В скриптах, содержащихся во внешних файлах, такие манипуляции не требуются.
Если вложенные скрипты тоже, в свою очередь, содержат document.write , то всё будет выведено последовательно.
Результат на странице будет
Создаём первый скрипт.
Первый скрипт
Создаём второй скрипт.
Второй скрипт
Закончили.
Однако такая последовательность сохраняется до тех пор, пока мы не решим подключить внешние скрипты, выводящие текст на страницу. Создадим, например, файл test1.js с содержимым
document.write('Содержимое test1.js
'); И файл test2.js с содержимым
document.write('Содержимое test2.js
'); Тогда результат работы скриптов на следующей странице будет различаться в различных браузерах.
В Firefox и Safari выведется ожидаемое
Подключаем test1.js
Содержимое test1.js
Подключаем test2.js
Содержимое test2.js
Закончили подключать
А вот Opera, Chrome и Internet Explorer поведут себя в какой-то мере логично, но не последовательно.
Подключаем test1.js
Подключаем test2.js
Закончили подключать
Содержимое test1.js
Содержимое test2.js
Другими словами, если Firefox и Safari обрабатывают появляющиеся скрипты последовательно, независимо от того, внешние они или внедрёные, то Opera, Chrome и IE выполняют внешние созданные динамически скрипты только после того, как выполнится текущий блок .
Поэтому, если вы кроссбраузерно хотите динамически подключить внешний скрипт и выполнить какие-нибудь действия после того, как он отработает, то эти действия необходимо также выносить во внешний файл.
Разный результат в разных браузерах:
Одинаковый результат во всех браузерах:
Где содержимое end.js:
document.write('Закончили подключать
'); Примеры ошибочного использования
Как было сказано выше, document.write выводит текст только во время загрузки страницы. В этом и заключается основная ошибка многих начинающих JavaScript-программистов — они пытаются использовать document.write в ответ на пользовательские события, например, onclick , в результате чего получают пустую страницу.
Запомните, если вы хотите изменить содержимое блока, то нужно найти этот блок в DOM-дереве, например, по его идентификатору, и изменить у него свойство innerHTML .
document.getElementById('content').innerHTML = 'Новое содержимое'; Область применения
Области применения у document.write две: создать новый документ с нуля и сгенерировать динамический контент в том самом месте, где находится родительский элемент script . Всё остальное вариации этих двух случаев.
Генерация нового документа
Если нужно открыть новое окно или создать новый фрейм, содержимое которых не загружается с какого-то урла, а должно генерироваться динамически, то самый простой способ — это написать содержимое нового документа с помощью document.write .
var w = window.open(); w.document.open(); // Открываем документ для записи w.document.writeln(''); w.document.write(' Это динамическое окно.'); w.document.close(); // Заканчиваем формирование документа Обратите внимание на вызов метода close , пока он не вызван, браузер считает, что документ ещё не до конца загружен, и не убирает индикатор загрузки.
Вывод динамического содержимого на этапе загрузки
Под таким сложным заголовком скрывается простая вещь. Предположим мы хотим выводить на странице текущий день недели. Тогда в то место, где он должен находиться, нужно вставить следующий код.
Сегодня . Несмотря на предрассудки по отношению к document.write , это самый простой способ, в отличие от DOM-методов, и в подобных случаях он более чем уместен.
Информеры для внешних сайтов
Ещё одна область применения для document.write — предоставление кодов сторонним сайтам для вывода различных виджетов, информеров, банеров, контекстных объявлений и прочих подобных вещей. Смысл здесь в том, чтобы предоставить неискушённому пользователю код, который он сможет без лишних движений поставить в то место, где должен появляться соответствующий блок. Тогда пользователю выдаётся простой код в виде тега script и, возможно, инициализации каких-то параметров.
А в этот скрипт уже выдаётся код, который создаёт нужный html-код.
document.write('Я информер'); Document.write()
Пишет строку в поток документа, открытый с помощью document.open() (en-US) .
Примечание: Замечание: поскольку document.write пишет строку в поток документа, вызов document.write для закрытого (но загруженного) документа автоматически вызовет document.open , который очистит документ (en-US) .
Синтаксис
.write(разметка);
Параметры
Строка, содержащая текст для записи в документ.
Пример
html> head> title>write exampletitle> script> function newContent() alert("загрузка нового контента"); document.open(); document.write("Долой старое, да здравствует новое!
"); document.close(); > script> head> body onload="newContent();"> p>Какой-то оригинальный контент.p> body> html>
Замечания
Запись в документ, загруженный без вызова document.open(), автоматически вызовет document.open . По окончании записи рекомендуется вызвать document.close(), чтобы браузер завершил загрузку страницы. Записываемый текст разбирается в структурную модель документа. В примере выше элемент h1 становится узлом документа.
Если вызов document.write() производится во встроенном HTML теге , вызов document.open() не будет выполнен . Например:
script> document.write("Основной заголовок
"); script>
Примечание: document.write и document.writeln не работают в XHTML документах (выводится сообщение "Операция не поддерживается" [ NS_ERROR_DOM_NOT_SUPPORTED_ERR ] в консоли ошибок). Это случается при открытии локального файла с расширением .xhtml или для любых документов, обрабатываемых с типом MIME - application/xhtml+xml . Больше информации доступно по адресу W3C XHTML FAQ.
Примечание: document.write в отложенных или асинхронных сценариях игнорируется и выводится сообщение типа "Проигнорирован вызов document.write() из асинхронно загруженного внешнего сценария" в консоли ошибок.
Примечание: В Edge вызов document.write в iframe более одного раза приводит к ошибке SCRIPT70: Доступ запрещён.
Примечание: Начиная с версии 55, Chrome не исполняет элементы вставленные посредством document.write() в случае отсутствия кеша HTTP для пользователей 2G подключения.
Спецификации
| Specification |
|---|
| HTML Standard # dom-document-write-dev |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- element.innerHTML
- document.createElement()
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 2 дек. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.
document.write - первая программа
Лучший способ освоить программирование на JavaScript это начать программировать. Для этого вы можете использовать текстовый редактор, я буду работать в PHPStorm и весь код набирать в данной среде разработки.
Что бы вы мыслили не шаблонно и могли сами писать код, начнем обучение с самых низов, первые программы, которые рассмотрим, будут очень простые.
Откроем документ формата HTML5 , и перед закрывающим тегом head пропишем . Тем самым браузеру доем понять, что за данным тегом последует JavaScript .
Напишем программу, которая будет выводить сообщение на экран при помощи функции alert('уроки по javascript’);
alert ('уроки по javascript');
рис 1
Функция alert() – это команда, вызывающая окно оповещения и отображающее сообщение, находящееся в скобках. Пока не обращаем внимание на пунктуацию (скобки, кавычки, точки с запятой). Все постепенно мы с Вами это разберем, для какой цели они нужны.
Запускаем данную страничку в браузере, видим диалоговое окно с нашей надписью. Если окно не появилось, возможно, где то сделали опечатки или ошибку, перепроверьте весь код и повторно загрузите страницу.
Кликнем по кнопке ОК, что бы закрыть окно. Когда оно исчезнет, в браузере загрузится веб-страница.
Хотя это простая программа, она демонстрирует важную концепцию: браузер выполняет программу на JS одновременно с чтением кода. В этом примере функция alert() сработала до того, как браузер отобразил полностью страницу, поскольку код скрипта находится перед элементом body .
Подобная команда будет иметь значение, когда вы начинаете писать программы, манипулирующие HTML кодом веб-страницы.
Следующий вариант рассмотрим, как вывести напрямую сообщение на странице.
Обычно script прописывается внутри раздела заголовка, однако мы можем разместить программу в теле элемента body . Напишем какой ни будь текст, к примеру
Обучение JS
и разберем как вывести код при помощи JS.
Основы по обучению JS
Мир Ява скрипт устроен подобно нашему, в нем есть объекты, у объектов свои свойства, и есть методы, при помощи которых можем на них воздействовать. К примеру, у нас есть объект машин, у машины есть свойство скорость, и мы можем при помощи метода нажатия на педаль воздействовать на скорость машины.
В JS языке самый главный объект называется document в нем содержатся все объекты, элементы веб-страницы отображаемые на экране.
У этого объекта есть свои свойства и методы при помощи, которых мы можем воздействовать на данный объект. Первый метод который с вами разберем это метод Write . При помощи данного метода мы можем записывать на страницу новую веб-информацию.
Если мы хотим вывести текстовое содержание на странице, нам необходимо открыть в скобках кавычки двойные, либо одинарные и в нутрии их пропишем произвольный текст. Сохраним и посмотрим что получилось.
document.write() – это команда JS, которая буквально отображает то, что вы помещаете между открывающей и закрывающей скобками. И тут вы должны усвоить, что символы помещаете между кавычками, интерпретатор JS будет выводить как обычный текст. Также при помощи данного метода document.write() мы можем отображать и HTML код.
До этого мы написали просто текст, заключим его в параграф и JS сделаем ссылкой. HTML код будет обработан, обновив страницу, увидим в ней изменения.
У Вас возможно появился вопрос, а как же тогда вывести текст если в нем используются вторые кавычки, ведь за кавычками интерпретатор текст не поймет и скрипт работать не будет. Тут есть несколько вариантов, мы можем указать в нутрии кавычки, кавычки двойные, или если нам нужно заменить двойные и вывести одинарные. Другой вариант, экранировать кавычки, то есть перед ними ставим флешь тем самым интерпретатору даем понять, что текст не закончен, а продолжается далее.
Этот сценарий показывает, как вы можете задействовать JS для добавления контента на веб-страницу.
Данный метод мы будем использовать на протяжении всего обучающего курса, с ним будем очень часто работать, по этому, если сейчас что-то не понятно мы еще не раз к нему вернемся.
Возможно, написанные сценария оставили несколько неопределенных ожиданий от языка JS. Не волнуйтесь, вначале важно понять основу, далее вы сможете делать сложные и интересные вещи при помощи JS и самое главное писать свой код и мыслить не шаблонно.