Метод document.write — один из наиболее древних методов добавления текста к документу.
У него есть существенные ограничения, поэтому он используется редко, но бывает полезен.
Как работает document.write
Метод document.write(str) корректно работает только пока HTML еще не догружен.
Он дописывает текст в текущее место HTML.
HTML-документ ниже будет содержать 1 2 3.
<body> 1 <script> document.write(2); </script> 3 </body>
Нет никаких ограничений на содержимое document.write.
Строка просто пишется в документ, без проверки структуры тегов, как будто она всегда там была.
Например, можно вывести таблицу, с временно незакрытыми тегами:
<script>
document.write('<style> td { color: #F40 } </style>');
</script>
<table>
<tr>
<script> document.write('<td>') </script>
Текст внутри TD.
<script> document.write('</td>') </script>
</tr>
</table>
Также существует метод document.writeln(str) — не менее древний, который добавляет после str символ перевода строки '\n'.
После конца загрузки
И document.write и document.writeln выводят текст в еще не готовый документ, который еще называют открытым.
Когда страница закончила загружаться, документ становится закрытым. Попытка дописать что-то в закрытый документ открывает его заново. При этом все текущее содержимое удаляется.
Текущая страница, скорее всего, уже загрузилась, поэтому если вы нажмёте эту на кнопку — произойдёт то, что описано выше:
Иначе говоря, после того как документ загружен, document.write(str) очистит его и добавит str. Это редко нужно.
Для изменения загруженного документа используют методы DOM, работающие с элементами.
document.writeПри работе в XML-режиме метод document.write не работает. Это одна из причин, по которым XML-режим редко используют.
Преимущества перед innerHTML
В большинстве случаев, для модификаций DOM подходит innerHTML.
Но document.write работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом.
Кроме того, для document.write не нужен элемент — он пишет в том месте, где вызван. Это проще.
Реклама
Например, его используют для вставки рекламных скриптов и различных счетчиков:
<script>
var url = 'http://ads.com/buyme?rand='+Math.random();
document.write('<script src="'+url+'"></scr'+'ipt>');
</script>
- Здесь скрипт генерирует URL динамически, чтобы можно было добавлять к URL какую-либо информацию, доступную из JS. Например, добавляют разрешение экрана посетителя.
- Случайное значение добавляется для того, чтобы предотвратить кеширование.
-
Закрывающий тег
</script>в строке разделен, чтобы браузер не увидел</script>и не посчитал его концом скрипта.Также используют запись:
document.write('<script src="'+url+'"><\/script>');Здесь<\/script>вместо</script>, символ ‘/’ при экранировании не меняется.
Загрузка такого скрипта блокирует отрисовку всей страницы.
Браузер не имеет права отобразить часть страницы после скрипта, до того как загрузит и выполнит скрипт. Если сайт рекламы по каким-то причинам работает медленно или вообще завис — зависнет и такая страница.
Альтернатива: вставка через DOM
Есть более гибкий способ, который не блокирует страницу. Используйте DOM: создайте элемент SCRIPT и добавьте его в HEAD.
var script = document.createElement('script');
script.src = 'http://ads.com/buyme?rand='+Math.random();
// теперь добавляем скрипт в HEAD, он будет загружен и выполнен
document.documentElement.children[0].appendChild(script);
Добавление скриптов через DOM делает страницу независимой от возможных тормозов чужого сервера.
Ситуация немного сложнее, если в скрипте может выполняться ещё один document.write, но это можно обойти. Например, заменить document.write своей функцией, которая пишет текст в строку, а строку затем добавлять в нужное место через методы DOM.
Напишите код, который подключает внешний скрипт рекламы, передавая ему разрешение экрана, взятое из window.screen.
К серверу должен идти запрос вида "http://ads.com/load.js?x=1024&y=768&r=12345", где x,y — разрешение экрана, а r=12345 — некоторый случайный параметр, чтобы браузер не взял скрипт из кеша.
Сделайте два варианта. Один с document.write, другой — с созданием элемента через DOM.
- Вариант с
document.write:var x = screen.width; var y = screen.height; var src = 'http://ads.com/load.js?x='+x+'&y='+y+'&r='+Math.random(); document.write('<script src="'+src+'"></sc'+'ript>');Обратите внимание: закрывающий
</script>нужно разбить на две части, иначе браузер подумает что это конец скрипта и выдаст ошибку. - Вариант с DOM:
var x = screen.width; var y = screen.height; var src = 'http://ads.com/load.js?x='+x+'&y='+y+'&r='+Math.random(); var script = document.createElement('script'); script.src = src; document.documentElement.children[0].appendChild(script);
Итого
Метод document.write (или writeln) пишет текст прямо в HTML, как будто он там всегда был.
- Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы. Запуск после загрузки приведёт к очистке документа.
- Метод
document.writeочень быстр. В отличие от установкиinnerHTMLи DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована. - Иногда
document.writeиспользуют для добавления скриптов. Это работает так же, как и простая вставка<script src="...">, но вsrcможно динамически прописать что угодно, в том числе добавить информацию из nagivator, screen.
Пока внешний скрипт не загрузится, браузер не сможет продолжить отображение страницы. Поэтому желательно подключать внешние скрипты, используя вставку скрипта через DOM. Тогда, если внешний сервер затормозит — страница не будет «висеть» в ожидании его ответа, а нормально покажется.
Комментарии
- Приветствуются комментарии, содержащие дополнения и вопросы по статье, и ответы на них.
- Если ваш комментарий касается задачи -- откройте её в отдельном окне и напишите там.
- Комментарии без смысла, с рекламой или не о статье вообще - удаляются.