document write img src

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

Более новая информация по этой теме находится на странице 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 символ перевода строки »
» .

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

Во время загрузки браузер читает документ и тут же строит из него 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 при этом не работает.

Читайте также:  in transit hub scan что значит

Это лишь одна из причин, по которой XML-режим обычно не используют.

Преимущества перед innerHTML

Метод document.write – динозавр, он существовал десятки миллионов лет назад. С тех пор, как появился и стал стандартным метод innerHTML , нужда в нём возникает редко, но некоторые преимущества всё же есть.

Метод document.write работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом.

Это естественно, ведь он не модифицирует существующий DOM, а пишет в текст страницы до его генерации.

Метод document.write вставляет любой текст на страницу «как есть», в то время как innerHTML может вписать лишь валидный HTML (при попытке подсунуть невалидный – браузер скорректирует его).

Эти преимущества являются скорее средством оптимизации, которое нужно использовать именно там, где подобная оптимизация нужна или уместна.

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

Антипример: реклама

Например, document.write используют для вставки рекламных скриптов и различных счётчиков, когда URL скрипта необходимо генерировать динамически, добавляя в него параметры из JavaScript, например:

Закрывающий тег в строке разделён, чтобы браузер не увидел и не посчитал его концом скрипта.

Также используют запись:

document.write(‘ : обратный слеш обычно используется для вставки спецсимволов типа
, а если такого спецсимвола нет, в данном случае / не является спецсимволом, то будет проигнорирован. Так что получается такой альтернативный способ безопасно вставить строку .

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

Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.

То есть, дело даже не в самом document.write , а в том, что в страницу вставляется сторонний скрипт, а браузер устроен так, что пока он его не загрузит и не выполнит – он не будет дальше строить DOM и показывать документ.

Представим на минуту, что сервер ads.com , с которого грузится скрипт, работает медленно или вообще завис – зависнет и наша страница.

Читайте также:  dishonored как узнать версию

В современных браузерах у скриптов есть атрибуты async и defer , которые разрешают браузеру продолжать обработку страницы, но применить их здесь нельзя, так как рекламный скрипт захочет вызвать document.write именно на этом месте, и браузер не должен двигаться вперёд по документу.

Альтернатива – использовать другие техники вставки рекламы и счётчиков. Примеры вы можете увидеть в коде Google Analytics, Яндекс.Метрики и других.

Если это невозможно – применяют всякие хитрые оптимизации, например заменяют метод document.write своей функцией, и она уже разбирается со скриптами и баннерами.

Итого

Метод document.write (или writeln ) пишет текст прямо в HTML, как будто он там всегда был.

Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы.

Запуск после загрузки приведёт к очистке документа.

Метод document.write очень быстр.

В отличие от установки innerHTML и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована.

Иногда document.write используют для добавления скриптов с динамическим URL.

Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница – тоже.

Поэтому желательно подключать внешние скрипты, используя вставку скрипта через DOM или async/defer . Современные системы рекламы и статистики так и делают.

Определение и применение

JavaScript метод .write() объекта document записывает в поток документа строку текста. Чтобы открыть поток для записи документа необходимо воспользоваться методом open() объекта document .

Для завершения записи документа (закрыть поток открытый с помощью метода .open() объекта document ) необходимо воспользоваться методом close() объекта document .

Данные в поток могут быть переданы также с помощью метода writeln(). Основное отличие методов .write() и writeln() заключается в том, что метод writeln() дополнительно добавляет символ новой строки.

Имейте ввиду, что если документ существует, то метод open() очистит его содержимое (автоматический вызов метода open() объекта document происходит когда методы .write(), или writeln() вызываются после загрузки страницы, но это не определено в спецификации W3C ).

Методы .write() и writeln() объекта document не работают в документах XHTML, и игнорируются в асинхронных и отложенных (deferred) скриптах.

Читайте также:  assassins creed odyssey за кого лучше играть

Поддержка браузерами

Метод Chrome Firefox Opera Safari IExplorer Edge
document .write() Да Да Да Да Да Да

JavaScript синтаксис:

Спецификация

Значения параметров

Параметр Описание
exp1, exp2, . expN Текстовое содержимое, которое будет добавлено в поток. Допускается указать несколько аргументов через запятую, данные в аргументах будут добавлены в документ в порядке их нахождения. Необязательный параметр.

Пример использования

В этом примере с использованием атрибута событий onclick при нажатии на кнопку (HTML элемент ) вызываем функцию myFunc() , которая с использованием JavaScript метода .open() объекта window открывает новое окно браузера, а с помощью метода .open() объекта document открывает поток для записи этого документа. В этот документ с помощью методов .write() и writeln() записываем в поток необходимые строки текста.

Основное отличие методов .write() и writeln() заключается в том, что метод writeln() дополнительно добавляет символ новой строки. Это полезно, например, при работе с HTML элементом

, который сохраняет как пробелы, так и разрывы строк.

После того как мы записали в документ необходимое текстовое содержимое, мы с помощью метода close() объекта document закрываем поток открытый с помощью метода .open() объекта document .

Обратите внимание, что мы дополнительно передали в метод .open() объекта document два аргумента, первый определяет тип документа (» text/html » — HTML документ по умолчанию), а второй аргумент соответствует значению » replace «, которое указывает, что пользователь, если перейдет в открытом окне на новую страницу не сможет обратно на неё вернуться (кнопка браузера «назад» будет не активна).

Результат нашего примера:

document write img src Пример создания документа в новом окне JavaScript Document

I get a syntax error with this code.

«Insert a command that writes this text img src=’imgNumber.png’ alt=» /> where imgNumber is the value of the imgNumber variable.»

1 Answer 1

I recommend you to read about Javascript strings, you got a syntax error because of the double quotes following alt=» , you need to either escape them or use separate strings and concatenate them (all in the reference link)

Оцените статью
Все о Windows 10
Добавить комментарий