Почему не работает document write

Метод document.write

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.

Метод document.write – один из наиболее древних методов добавления текста к документу.

У него есть существенные ограничения, поэтому он используется редко, но по своей сути он совершенно уникален и иногда, хоть и редко, может быть полезен.

Как работает document.write

Метод document.write(str) работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.

HTML-документ ниже будет содержать 1 2 3 .

Нет никаких ограничений на содержимое document.write .

Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.

Также существует метод document.writeln(str) – не менее древний, который добавляет после str символ перевода строки «\n» .

Только до конца загрузки

Во время загрузки браузер читает документ и тут же строит из него DOM, по мере получения информации достраивая новые и новые узлы, и тут же отображая их. Этот процесс идёт непрерывным потоком. Вы наверняка видели это, когда заходили на сайты в качестве посетителя – браузер зачастую отображает неполный документ, добавляя его новыми узлами по мере их получения.

Методы document.write и document.writeln пишут напрямую в текст документа, до того как браузер построит из него DOM, поэтому они могут записать в документ все, что угодно, любые стили и незакрытые теги.

Браузер учтёт их при построении DOM, точно так же, как учитывает очередную порцию HTML-текста.

Технически, вызвать document.write можно в любое время, однако, когда HTML загрузился, и браузер полностью построил DOM, документ становится «закрытым». Попытка дописать что-то в закрытый документ открывает его заново. При этом все текущее содержимое удаляется.

Текущая страница, скорее всего, уже загрузилась, поэтому если вы нажмёте на эту кнопку – её содержимое удалится:

Из-за этой особенности 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

document.write(arg1[, arg2[, arg3[, . ]]]) — метод, выводящий на страницу переданные ему аргументы. Аргументов может быть любое количество, и они могут быть любых типов, при выводе они преобразуются в строки.

Также существует функция document.writeln , которая аналогична document.write , но добавляет в конце своего вывода перевод строки.

Как работает document.write

document.write выводит свои аргументы после того тега script , в котором он был вызван. К примеру код

Обратите внимание: не после того тега script , в котором записано выражение document.write , а после того, в котором оно было вызвано. Следующий код

document.write работает только на этапе загрузки страницы, его нельзя вызывать в ответ на какое-нибудь событие. Если document.write вызвать после того, как страница загрузилась, результат во всех браузерах будет примерно одинаков — пустая страница и, возможно, тот текст, который был выведен последним document.write . Поэтому даже не пытайтесь использовать его в ответ на какие-то действия пользователя, только на этапе загрузки страницы.

Вывод скриптов

Как и любое другое содержимое, document.write может выводить и скрипты, которые тоже в свою очередь могут содержать document.write . Но нужно помнить: внедрённые в HTML скрипты не могут содержать внутри себя в явном виде строку . Нужно или разорвать этот тег на части ‘ ‘ , или заменить какой-нибудь символ на escape-последовательность . В скриптах, содержащихся во внешних файлах, такие манипуляции не требуются.

Если вложенные скрипты тоже, в свою очередь, содержат document.write , то всё будет выведено последовательно.

Результат на странице будет

Создаём первый скрипт.
Первый скрипт
Создаём второй скрипт.
Второй скрипт
Закончили.

Однако такая последовательность сохраняется до тех пор, пока мы не решим подключить внешние скрипты, выводящие текст на страницу. Создадим, например, файл test1.js с содержимым

И файл 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 выполняют внешние созданные динамически скрипты только после того, как выполнится текущий блок

Источник

JavaScript не запускается в любом браузере и включен — заменил document.write для предупреждения и все равно не работал

Я пытаюсь сделать этот, по-видимому, простой фрагмент, в котором единственный var ‘numero’ должен возвращать случайное число, как если бы это был кубик, поэтому диапазон должен идти от 1 до 6, и он работает, но он работает только тогда, когда я вставляю весь код JavaScript внутри HTML как script :

Хотя, я получаю много, что я не должен использовать document.write(); потому что это плохая практика (она заставляет ее работать медленно или что-то еще? Я все еще читаю свой путь к ней), и я попытался применить решения, которые я видел в других вопросах, но они настолько специфичны, что я чувствовал, что буду «перепутались, потому что их трудно было реализовать с такими конкретными элементами. Итак, пожалуйста, что я мог использовать вместо document.write в этом случае?

МОЙ БОЛЬШОЙ ВОПРОС Почему код ниже НЕ работает?

Моя первая попытка состояла в том, чтобы связать файл JavaScript из HTML, как в:

ЭТО НЕ РАБОТАЕТ В ЛЮБОЙ БРАУЗЕРЕ — Я проверял, включен ли JavaScript, я перезапустил настройки, пробовал Chrome, Edge, Internet Explorer, он работает только в режиме Split/Live кода внутри DreamWeaver CC 2017, который бесполезен, но я знаю, что работает код, который только что возвращается: это главное.

Я даже заменил document.write предупреждением, чтобы проверить его больше, и он НЕ работал, если я не запустил его внутри DreamWeaver или редактора кода здесь.

Я сошел с ума, пытаясь найти решение, но решил реализовать весь JavaScript в HTML. Должно быть решение для этого или более подходящего способа, поскольку мне нужно, чтобы это было напечатано в документе.

TO CLARIFY: — JavaScript работает только тогда, когда он полностью внутри HTML, как скрипт, — я не хочу печатать много чисел или цикл. Только один. — Как я могу напечатать что-то из JavaScript в документе без необходимости писать все на HTML? Любая помощь со всем этим, пожалуйста? Заранее спасибо 😉

Источник

Почему не document.write?

Почему это обычно не считается хорошей практикой для использования document.write в JavaScript Я знаю, что это не самый элегантный или лучший способ сделать это, но есть ли в этом какие-то реальные ошибки? Это когда-нибудь хорошо? И в каком случае это будет лучше, чем inner.HTML

Я понимаю, что он будет переписывать документ, если используется после загрузки. Тем не менее, я должен использовать innerHTML даже если я пытаюсь переписать документ? Если так, то почему?

Я знаю, что некоторые спрашивали, смотрел ли я вообще на связанные вопросы, прежде чем писать; Я сделал. Но я не нашел ничего удовлетворительного.

6 ответов

При правильном использовании это нормально, но очень ограниченного использования.

Вы не можете использовать его в XHTML, но я бы порекомендовал не использовать XHTML в любом случае, если у вас нет действительно веской причины для этого.

Проблема возникает, когда вы звоните document.write после завершения начальной загрузки страницы. Во время загрузки страницы все в порядке, но потом это вызывает неявное document.open , который очищает документ от окна и начинает заново.

С помощью document.write также означает, что вы не можете по требованию загрузить свои скрипты или использовать async или же defer атрибуты ваших элементов скрипта.

Наконец, я обычно рекомендую помещать ваш JavaScript в отдельный (один) файл JavaScript в самом конце документа (непосредственно перед закрытием

Источник

Javascript Document.write не работает

Я пытаюсь динамически заполнить div на основе внутреннего текста. Может ли кто-нибудь сказать мне, почему это не работает?

3 ответа

Почему метод document.write не работает? Вот мой код:

Затем поместите обработчик событий в элемент тела:

EDIT : А вот версия для нескольких дивов:

Сохраните этот код JS в файле и включите его в раздел HTML head.

По трем причинам:

Вы запускаете код, когда документ завершен, тогда document.write либо заменит весь документ (как неявно называется document.open ), либо будет проигнорирован, в зависимости от браузера. Вы не можете писать в документ, если он уже был проанализирован.

Контекст метода ( this ) — это не элемент, внутри которого находится тег сценария, а объект, в котором происходит событие, в данном случае объект window .

Свойство innerText работает только в Internet Explorer.

Поместите тег скрипта за пределы div , иначе он может помешать вашей проверке. Вы можете использовать свойство innerHTML для получения и установки содержимого:

у меня есть страница html, на которой отображается изображение. предполагается, что он задерживается, переключается на видео, а затем после воспроизведения видео снова переключается на изображение. это javascript, который я использую:

Document.write выводит строку на чистую страницу.

Вы должны использовать append/prependChild или innerHTML .

Похожие вопросы:

Итак, я делаю это для летнего класса, и мне нужно получить этот калькулятор ковра, чтобы отобразить результат в виде выполнить document.write, чтобы отобразить результаты на новой странице html.

Я написал букмарклет, который вводит внешний javascript непосредственно перед закрывающим тегом body. Введенный скрипт содержит две строки : document.write(); alert(hello); Тревога работает.

Следующий код работает : Но это не сработает: .

Источник