Document write что это
Метод document.write
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/modifying-document.
Метод document.write – один из наиболее древних методов добавления текста к документу.
У него есть существенные ограничения, поэтому он используется редко, но по своей сути он совершенно уникален и иногда, хоть и редко, может быть полезен.
Как работает document.write
Метод document.write(str) работает только пока HTML-страница находится в процессе загрузки. Он дописывает текст в текущее место HTML ещё до того, как браузер построит из него DOM.
Строка просто пишется в HTML-документ без проверки структуры тегов, как будто она всегда там была.
Только до конца загрузки
Во время загрузки браузер читает документ и тут же строит из него 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 работает быстрее, фактически это самый быстрый способ добавить на страницу текст, сгенерированный скриптом.
Это естественно, ведь он не модифицирует существующий DOM, а пишет в текст страницы до его генерации.
Метод document.write вставляет любой текст на страницу «как есть», в то время как innerHTML может вписать лишь валидный HTML (при попытке подсунуть невалидный – браузер скорректирует его).
Эти преимущества являются скорее средством оптимизации, которое нужно использовать именно там, где подобная оптимизация нужна или уместна.
Однако, document.write по своей природе уникален: он добавляет текст «в текущее место документа», без всяких хитроумных DOM. Поэтому он бывает просто-напросто удобен, из-за чего его нередко используют не по назначению.
Антипример: реклама
Например, document.write используют для вставки рекламных скриптов и различных счётчиков, когда URL скрипта необходимо генерировать динамически, добавляя в него параметры из JavaScript, например:
Закрывающий тег в строке разделён, чтобы браузер не увидел и не посчитал его концом скрипта.
Также используют запись:
Проблема здесь в том, что загрузка такого скрипта блокирует отрисовку всей страницы.
Альтернатива – использовать другие техники вставки рекламы и счётчиков. Примеры вы можете увидеть в коде Google Analytics, Яндекс.Метрики и других.
Если это невозможно – применяют всякие хитрые оптимизации, например заменяют метод document.write своей функцией, и она уже разбирается со скриптами и баннерами.
Итого
Метод document.write (или writeln ) пишет текст прямо в HTML, как будто он там всегда был.
Этот метод редко используется, так как работает только из скриптов, выполняемых в процессе загрузки страницы.
Запуск после загрузки приведёт к очистке документа.
Метод document.write очень быстр.
В отличие от установки innerHTML и DOM-методов, он не изменяет существующий документ, а работает на стадии текста, до того как DOM-структура сформирована.
Иногда document.write используют для добавления скриптов с динамическим URL.
Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница – тоже.
Возможно ли заменить document.write?
Много лет использую такой код спойлера часли html для низкого разрешения экрана:
Затем идёт html, который виден во всех разрешениях экрана.
А после идёт закрытие спойлера:
Но pagespeed постоянно ругается на document.write.
Можно ли вообще выводить html при определенном разрешении как-то более изысканно? Но чтобы сильно не перегружать кодом страницу. Или придется так и мириться с document.write в коде страницы?
Средний 4 комментария
4. После размещения вопроса пользователю запрещается осуществлять:
4.1. Дублирование вопроса, который уже размещался на страницах Сервиса. В том числе и в случае, если вопрос был удалён модератором, или на вопрос не был дан ответ (т.е. категорически запрещается дублирование вопроса с целью повторного привлечения к нему внимания).
4.2. Редактирование вопроса с целью его искажения или замены бессвязным текстом. На работу с каждым вопросом тратят время другие пользователи ресурса: модераторы (на его редактирование) и пользователи (на его прочтение и подготовку ответа). Соответственно, при удалении вопроса, потраченное ими время будет обесценено.
Вставляйте свой спойлер как обычный html. И добавьте скрипт под ним, который посмотрина на ширину экрана и откроет спойлер если нужно.
Или на бэкэнде, смотрите на юзер-агент и добавляйте атрибут open
Можно оборачивать элемент в ваши теги, и убирать их тоже можно:
snippet
Что будет, если я на десктопе c шириной экрана 2560px открою страницу в окне браузера шириной 600px?
Что будет, если я на десктопе открою страницу в окне браузера шириной 600px, а уже после загрузки страницы распахну окно на все 2560px?
Да, когда при просмотре страницы телефон меняют с вертикального на горизонтальный, вот такая нелепость до перезагрузки остается, но приходится с этим мириться.
media пользую, но спойлер они не создают и не убирают.
Document.write без перехода на новую страницу
Подскажите, как использовать метод document.write, оставаясь при этом на старой странице?
Я беру слово из html файла (которое ввёл пользователь в input type=»text») и мне нужно его вывести на этой же странице. Но не с помощью textarea, alert() и т.д., а именно как в методе document.write. Возможно ли это? И если да, как это реализовать?
Передача Get запроса без перехода на страницу
Добрый день. Являюсь совсем начинающим. Прошу помочь в следующем. Имеется ESP8266, на котором.
Запись по кнопке без перехода на новую страницу
Как реализовать запись по кнопке, без перехода на пустую страницу или в этой странице подключить.
Сообщения php без перехода на новую страницу
Доброго времени суток, помогите разобраться как реализовать что бы, при выскакивание сообщения, не.
Отображение связанного меню без перехода на новую страницу
Не совсем та ветка наверное, но надеюсь на доброту модераторов 🙂 Сейчас на Джумле есть три.
Передача параметров сценарию из onChange без перехода на новую страницу
При выборе даты переходит на новую страницу, а нужно чтобы данные обновлялись без перехода.
Action=»» без перехода на новую страницу
Здравствуйте! Нужна ваша помощь. Есть файл index.php, в котором есть форма и div, куда я вывожу.
Создание перехода на новую страницу
Добрый день! Интересует, такой элементарный, как мне кажется, момент. Как создать переход на новую.
cin без перехода на новую строку
Как сделать, чтобы после считывания cin курсор не переводился на новую строку, а оставался на.
Какие есть альтернативы document.write?
10 ответов
В качестве рекомендуемой альтернативы document.write вы можете использовать манипуляции с DOM, чтобы напрямую запросить и добавить элементы узла в DOM.
Я не уверен, что это будет работать точно, но я думал о
Это решило проблему с сообщениями об ошибках для меня.
Метод insertAdjacentHTML() интерфейса Element анализирует указанный текст как HTML или XML и вставляет результирующие узлы в дерево DOM в указанной позиции :
Свойство Document.currentScript возвращает элемент
Вопрос зависит от того, что вы на самом деле пытаетесь сделать.
К моменту завершения этот скрипт создает более 3000 узлов DOM, в основном ячеек таблицы. На 7-летнем ПК, на котором установлен Firefox в Vista, это небольшое упражнение занимает менее 2 секунд, используя document.write из локального исходного файла размером 12 КБ и три 1-пиксельных GIF-файла, которые повторно используются около 2000 раз. Страница просто появляется полностью сформированной, готовой обрабатывать события.
Использование insertAdjacentHTML не является прямой заменой, поскольку браузер закрывает теги, которые, как требует скрипт, остается открытым, и вдвое дольше создает в конечном итоге искаженную страницу. Запись всех фрагментов в строку и последующая передача ее insertAdjacentHTML занимает еще больше времени, но, по крайней мере, вы получаете страницу, как задумано. Другие варианты (например, ручное восстановление DOM по одному узлу за раз) настолько нелепы, что я даже не собираюсь туда идти.
Приятно знать, что существуют альтернативные методы после загрузки, но следует понимать, что они предназначены для совершенно другой цели; а именно изменение DOM после его создания и выделения памяти для него. Использование этих методов по своей природе более ресурсоемко, если ваш сценарий предназначен для написания HTML-кода, из которого браузер в первую очередь создает DOM.
Просто напишите это, и пусть браузер и переводчик сделают всю работу. Вот для чего они здесь.
JavaScript using document write
2 Answers 2
Ok, let’s go through the changes I made here. First off, blocks of script only need an opening tag. You don’t need to create a new script block for every line.
Next, when assigning a value to a variable, only use one equals sign. == is a comparison operator.
Next, any HTML you are writing to the page from inside a script tag, needs to be in quotes: ‘
‘
When you’re testing code like that, modern browsers come with a JavaScript console that shows you if there are errors in your code. Usually you just open up your test page and press F12 to see what’s going on.
In your case, the first problem comes from the way you’re defining x, y, and z. Instead of setting them equal to something, you’re asking if they are equal. So, var x = 23 says that x now refers to 23, while x == 23 returns a true or false statement for whether x does equal 23 or not.
You’ve got another issue with defining z. var is used to define a variable to a certain scope (in this case global scope). It’s not used when calling that variable after it’s already defined. Later, when you’re declaring the variables again, you don’t need to use var because you are just re-assigning those variables.
One last issue you have is not enclosing your HTML in quotation marks. JavaScript sees the HTML <> tags and gets confused.