чем заменить document write
Какие есть альтернативы document.write?
10 ответов
В качестве рекомендуемой альтернативы document.write вы можете использовать DOM-манипуляцию для прямого запроса и добавления элементов node в DOM.
Причина, по которой ваш HTML заменяется, вызвана злой функцией JavaScript: document.write() .
Это определенно «плохая форма». Он работает только с веб-страницами, если вы используете его при загрузке страницы; и если вы используете его во время выполнения, он заменит весь документ на вход. И если вы применяете его как строгую структуру XHTML, это даже не правильный код.
проблема:
Я верю, что document.write() заставляет браузер иметь снижение производительности (исправьте меня, если я ошибаюсь).
пример:
Этот пример записывает вывод в документ HTML после, который загрузила страница. Смотрите document.write() злые силы очищают весь документ, когда вы нажимаете кнопку «Истребить»:
альтернативы:
Пример: document.getElementById(‘output1’).innerHTML = ‘Some text!’;
Пример: var para = document.createElement(‘p’); para.appendChild(document.createTextNode(‘Hello, ‘));
Вот код, который должен заменить document.write на месте:
document.currentScript.insertAdjacentHTML(‘beforebegin’, ‘this is the document.write alternative’);
К моменту завершения этого script создается более 3000 узлов DOM, в основном ячеек таблицы. На 7-летнем ПК, на котором работает Firefox на Vista, это небольшое упражнение занимает менее 2 секунд, используя document.write из локального исходного файла 12kb и три 1px GIF, которые повторно используются примерно 2000 раз. Страница просто появляется полностью сформированная, готовая обрабатывать события.
Использование insertAdjacentHTML не является прямой заменой, так как браузер закрывает теги, которые требует script, и занимает в два раза больше времени, чтобы в конечном итоге создать поврежденную страницу. Запись всех фрагментов в строку, а затем передача ее на insertAdjacentHTML занимает еще больше времени, но, по крайней мере, вы создаете страницу как созданную. Другие варианты (например, ручное восстановление DOM one node за раз) настолько смешны, что я даже не собираюсь туда.
Приятно знать, что существуют альтернативные методы пост-нагрузки, но следует понимать, что они предназначены для другой цели целиком; а именно изменение DOM после его создания и выделение памяти. Для использования этих методов более интенсивно использовать ресурсы, если ваш script предназначен для написания HTML-кода, с которого браузер создает DOM в первую очередь.
Просто напишите это и дайте браузеру и интерпретатору выполнить эту работу. Это то, для чего они существуют.
Возможно ли заменить 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?
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.
Просто напишите это, и пусть браузер и переводчик сделают всю работу. Вот для чего они здесь.
Возможно ли заменить 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
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице 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.
Рекомендуется избегать этого, так как браузер остановится на месте добавления скрипта и будет ждать его загрузки. Если скрипт будет тормозить, то и страница – тоже.