Вопросы Теги

document.write не работает, т. е. работает в хром [дубликат] 

<html>
    <head>
        <title>HTML Document</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    </head>

    <body>
        <div id="hover-id">
            Hello World
        </div>

        <script>
            jQuery(document).ready(function($){
                $(document).on('mouseover', '#hover-id', function(){
                    $(this).css('color','yellowgreen');
                });

                $(document).on('mouseout', '#hover-id', function(){
                    $(this).css('color','black');
                });
            });
        </script>
    </body>
</html>
337
задан Taryn 22 March 2017 в 17:21
поделиться

15 ответов

Некоторые из более серьезных проблем:

  • document.write (в дальнейшем DW) не работает в XHTML
  • DW напрямую не изменяет DOM, предотвращая дальнейшие манипуляция (попытка найти доказательства этого, но в лучшем случае ситуационная)
  • DW, выполненный после завершения загрузки страницы, перезапишет страницу или напишет новую страницу или нет work
  • DW выполняет там, где встречается: он не может вводить в заданную узловую точку
  • DW эффективно пишет сериализованный текст, который не является тем, как DOM работает концептуально, и является простым способом создайте ошибки (.innerHTML имеет ту же проблему)

Намного лучше использовать безопасные и DOM-дружественные методы [DOM-манипулирования DOM]

223
ответ дан annakata 18 August 2018 в 16:45
поделиться
  • 1
    -1, он абсолютно изменяет DOM. Все остальное в порядке. Хотя я понимаю стремление зависеть от структуры и методов, которые могут удержать вас от вреда, это может быть случай выброса ребенка с водой для ванн. – cgp 29 April 2009 в 16:50
  • 2
    FireBug не является истинным представлением DOM. Это попытка mozilla анализировать HTML в DOM. Вы можете полностью сломать HTML-образ в представлении DOM Firebug. – FlySwat 29 April 2009 в 17:17
  • 3
    DOM - это структура данных, используемая для визуализации страницы, и как таковая - альфа и омега того, что пользователь видит на странице. Вы правы, что HTML! = DOM, но несущественно, что DOM изменен DW. Если DW не изменил DOM, вы не увидите экран - это верно для всех браузеров и всегда будет до тех пор, пока DOM - это то, что используется для визуализации страницы. – cgp 29 April 2009 в 17:41
  • 4
    "DW выполняет, где встречается" - не всегда является недостатком, действительно, это можно считать преимуществом для определенных вещей, например, добавлением элементов сценария (фактически, о единственном, что я использовал бы DW for, и даже тогда я бы подумал дважды). – nnnnnn 25 December 2011 в 14:16
  • 5
    @RicardoRivaldo Да, они делают, если document.write вызывается после того, как документ закончил загрузку – Izkata 19 September 2013 в 03:37

Он перезаписывает контент на странице, что является наиболее очевидной причиной, но я бы не назвал его «плохим».

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

Тем не менее, вы не используете DOM при использовании document.write - вы просто сбрасываете текст в документ так, чтобы Я бы сказал, что это плохая форма.

6
ответ дан aleemb 18 August 2018 в 16:45
поделиться
  • 1
    Одно уточнение: document.write вставляет содержимое на страницу, оно не перезаписывает их. – Peter Dolberg 29 April 2009 в 16:45
  • 2
    @Peter, он перезаписывает содержимое, если вы вызываете его после загрузки документа. Я предполагаю, что это то, что означает aleemb. – Matthew Crumley 29 April 2009 в 18:09
  • 3
    – Lèse majesté 26 December 2012 в 10:25
  • Простая причина, по которой document.write является плохой практикой, заключается в том, что вы не можете придумать сценарий, в котором вы не можете найти лучшую альтернативу.
  • Еще одна причина заключается в том, что вы имеете дело со строками
  • Он добавляет только документы.
  • Он не имеет ничего общего, например, MVC (Model-View- Controller) .
  • Гораздо более мощным представляется динамический контент с помощью ajax + jQuery или angularJS .
1
ответ дан Anders Lindén 18 August 2018 в 16:45
поделиться
  • 1
    Что касается вашей первой пули, как вы собираетесь решить, что @sunwukung описывает в своем ответе выше? Я согласен с тем, что может решить его с помощью DOM-манипуляций, но по мере того как DOM-манипуляции идут, трудно избежать FUOC порой без document.write. – bert bruynooghe 19 May 2017 в 16:29
  • 2
    Является ли проблема FUOC проблемой? – Anders Lindén 18 August 2018 в 07:56

Я думаю, самая большая проблема в том, что любые элементы, написанные с помощью document.write, добавляются в конец элементов страницы. Это редко желаемый эффект с современными макетами страниц и AJAX. (вы должны иметь в виду, что элементы в DOM являются временными, и когда запуск скрипта может повлиять на его поведение).

Гораздо лучше установить элемент-заполнитель на странице, а затем манипулировать его innerHTML.

-3
ответ дан BnWasteland 18 August 2018 в 16:45
поделиться
  • 1
    Это неправда. document.write не добавляет контент в конец страницы, как добавление. Они написаны на месте. – Peter Bailey 29 April 2009 в 16:35
  • 2
    @Peter Bailey, я знаю, что это старая нить, но на самом деле это не следует игнорировать. независимо от того, добавляется оно или нет, зависит от того, выполняется ли document.write () во время загрузки страницы. Если он вызывается из функции после загрузки страницы, первый document.write () заменит весь объект, и последующие вызовы будут добавлены к нему. – Octopus 17 December 2014 в 06:53
  • 3
    @Octopus Да, но это обстоятельство. Он добавляет в этом сценарии только потому, что есть свежий документ. По-прежнему неточно утверждать, что document.write () добавляет. & Quot; Да, это старый ответ и старый downvote, но я все еще поддерживаю это. – Peter Bailey 18 December 2014 в 15:03
  • 4
    Все нормально. Я говорил неточно. Я бы давно это редактировал, но есть намного лучший ответ выше. Я хотел бы указать, что «записано на месте». одинаково неточно. – BnWasteland 18 December 2014 в 21:40

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

. С помощью document.write вызывается скрипт с перекрестным запуском Parser. Это может быть заблокировано браузером, если устройство имеет плохую сетевую связь.

Ссылки:

2
ответ дан Flimm 18 August 2018 в 16:45
поделиться

Другое законное использование document.write происходит из примера HTML5 Boilerplate index.html . 

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.6.3.min.js"><\/script>')</script>

Я также видел тот же метод для использования функции json2.js JSON анализирует / строит полипол (, необходимый IE7 и ниже ). 

<script>window.JSON || document.write('<script src="json2.js"><\/script>')</script>
42
ответ дан Guilherme Garnier 18 August 2018 в 16:45
поделиться

Можно рассматривать document.write () (и .innerHTML) как оценку строки исходного кода. Это может быть очень удобно для многих приложений. Например, если вы получаете HTML-код в виде строки из какого-то источника, это удобно просто «оценить».

В контексте Lisp манипуляции с DOM будут похожи на манипулирование структурой списка, например. создайте список (оранжевый), выполнив: 

(cons 'orange '())

И document.write () будет похож на оценку строки, например. создайте список, оценив строку исходного кода следующим образом: 

(eval-string "(cons 'orange '())")

Lisp также обладает очень полезной способностью создавать код с использованием манипулирования списком (например, с использованием стиля DOM для создания дерева разбора JS) , Это означает, что вы можете создать структуру списка, используя «стиль DOM», а не «стиль строки», а затем запустить этот код, например. например: 

(eval '(cons 'orange '()))

Если вы используете инструменты кодирования, такие как простые живые редакторы, очень удобно иметь возможность быстро оценивать строку, например, используя document.write () или .innerHTML. Lisp идеален в этом смысле, но вы можете делать очень классные вещи также в JS, и многие люди делают это, например http://jsbin.com/

1
ответ дан Mikael Kindborg 18 August 2018 в 16:45
поделиться

Сверху моей головы:

  1. document.write необходимо использовать в загрузке страницы или загрузке тела. Поэтому, если вы хотите использовать скрипт в любое другое время для обновления содержимого вашей страницы, document.write практически бесполезен.
  2. Технически document.write будет обновлять HTML-страницы, а не XHTML / XML. IE, похоже, довольно прощает этот факт, но других браузеров не будет.

http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite

119
ответ дан Ry- 18 August 2018 в 16:45
поделиться
  • 1
    IE прощает, потому что он не поддерживает XHTML. Если / когда они это сделают, document.write, вероятно, перестанет работать (конечно, только в XHTML). – Matthew Crumley 29 April 2009 в 18:12
  • 2
    document.write делает действительно ужасные вещи для синтаксических анализаторов html и является только «чрезвычайно совместимым». в простых случаях. – olliej 29 April 2009 в 20:24
  • 3
    Как вставка тега аналитики? То есть, в конце концов, часть первоначального вопроса. И чрезвычайно совместимым я имею в виду только поддержку браузера raw.write для браузера. – Peter Bailey 29 April 2009 в 20:28
  • 4
    Все, что работает с последними версиями Chrome / IE / Safari / Opera / FireFox, считается совместимым. – Pacerier 12 October 2014 в 09:22
  • 5
    Переопределение событий onload? И для чего addEventListener? – m93a 13 February 2015 в 20:48
  • 6
    XHTML не имеет значения в Интернете. Даже страницы со строгим типом XHTML на самом деле не рассматриваются как XML в этом отношении, разработчики браузеров не доверяют авторам страниц , что много. – RobG 27 October 2015 в 01:37
  • 7
    Chrome не будет запускать document.write вызовы, которые вставляют скрипт при выполнении определенных условий. – Flimm 12 July 2017 в 15:21

На основе анализа, выполненного Google-Chrome Dev Tools Lighthouse Audit

1
ответ дан Sudip Bhandari 18 August 2018 в 16:45
поделиться

Он может блокировать вашу страницу

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

Это фактически означает, что вы должны вызывать ее из встроенного блока сценария. И это не позволит браузеру обрабатывать части страница, следующая за ней. Сценарии и изображения не будут загружены до завершения записи.

36
ответ дан T J 18 August 2018 в 16:45
поделиться

Pro:

  • Это самый простой способ встроить встроенный контент из внешнего (в ваш хост / домен) скрипта.
  • Вы можете перезаписать весь контент в кадр / IFrame. Я использовал эту технику для элементов меню / навигации до того, как были доступны более современные методы Ajax (1998-2002).

Con:

  • Он сериализует механизм рендеринга для паузы до загрузки указанного внешнего скрипта, который может занимать гораздо больше времени, чем внутренний скрипт.
  • Обычно он используется таким образом, что скрипт помещается внутри содержимого, которое считается плохой формой.
28
ответ дан Tracker1 18 August 2018 в 16:45
поделиться
  • 1
    Есть больше минусов, чем это. Например, Google Chrome откажется запускать document.write, создавая тэг <script> при определенных обстоятельствах. [Д0] developers.google.com/web/updates/2016/08/… – Flimm 12 July 2017 в 15:14

Недостатки document.write в основном зависят от этих трех факторов:

a) Реализация

document.write () в основном используется для записи содержимого на экран, как только поскольку это содержание необходимо. Это означает, что это происходит где угодно, либо в файле JavaScript, либо внутри тега сценария в HTML-файле. Поскольку тег скрипта размещается в любом месте такого HTML-файла, неплохо иметь документы document.write () внутри блоков сценариев, которые переплетены с HTML внутри веб-страницы.

b) Рендеринг

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

c) Невозможное манипулирование

После того, как оно написано, оно выполняется и продолжается. Мы не можем вернуться, чтобы манипулировать им, не вдаваясь в DOM.

1
ответ дан user3167857 18 August 2018 в 16:45
поделиться

Он разбивает страницы с помощью рендеринга XML (например, страницы XHTML).

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

Вероятно: в некоторых браузерах отключена функция document.write () в режиме рендеринга XML.

Худший: в некоторых браузерах будет возникать ошибка XML при использовании функции document.write ().

7
ответ дан Vincent Robert 18 August 2018 в 16:45
поделиться
119
ответ дан Ry- 7 September 2018 в 01:38
поделиться
120
ответ дан Ry- 30 October 2018 в 05:53
поделиться
Другие вопросы по тегам:

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