Document.write() перезапись документа?

Это:

function myFunction()
{
    document.write("sup");
}

вызывается в html как:

<div id="myDiv">
    <script>myFunction();</script>
</div>t

добавляет строку sup в элемент div myDiv. Именно этого я и хочу. Однако это:

function loadFile(uri)
{
    var r = new XMLHttpRequest();
    document.write("trying to open: " + uri);
    r.open('GET', uri, true);
    r.send(null);
    r.onreadystatechange = function()
    {
        if (r.readyState == 4)
        {
            myFunction();
        }
    }
}

function myFunction()
{
    document.write("sup");
}

называется так:

<div id="myDiv">
    <script>loadFile("filename.txt");</script>
</div>

похоже, переписывает весь мой html файл. То есть когда я запускаю его в Firefox, он показывает мне только строку sup (что весь контент страницы), но страница, похоже, по-прежнему загружается (значок загрузки FF все еще там анимационный, по-видимому бесконечно).

Прежде всего, это будет использоваться только локально, автономно, как быстрый и удобный способ представления данных (с использованием html + js и веб-браузера вместо текстового файла plaing). Я хочу загрузить локальный текстовый файл, а затем поместить часть его содержимого в часть html-страницы. То же, что и в моем первом примере, но сначала загрузив текстовый файл.

Ответы

Ответ 1

Проблема заключается в том, что при запуске document.write после загрузки документа он перезаписывает весь документ. Если он выполняется до этого, он не перезаписывает его.

Что вы хотите сделать, это установить innerHtml для определенного элемента, например:

document.getElementById("myDiv").innerHTML="Sup";

Ответ 2

Давайте рассмотрим, что делает браузер, когда он получает html файл.

  • Документ окна открывается для записи. Представьте, что вы открываете текстовый файл.
  • Браузер записывает содержимое в документ. На этом шаге происходит много магии - объекты создаются и html отображаются как поля.
  • Документ окна закрывает документ. Вид вроде сохранения текстового файла.

Теперь современные браузеры также предоставляют API документов, которые позволяют выполнять именно эти задачи с помощью javascript.

Вы можете открыть документ для записи с помощью document.open(). Вы также можете начать запись контента в документ с помощью document.write(). Наконец, вы можете закрыть документ для записи с помощью document.close(). Поскольку перед записью всегда нужно открыть документ для записи, вызов document.write() всегда приводит к неявному document.open().

Interspersing document.write() вызовы по всему телу html - это обычно используемый метод, используемый для динамического вставки содержимого строки в html-страницу.

Например, если вы выполняете document.write("<p>holla</p>") в теле html файла, браузер будет делать следующее после получения html файла.

  • Откройте документ для записи.
  • Начните запись содержимого html в документ.
    • JavaScript-движок выполнит document.write(), когда он встретится с ним, а затем напишет "<p>holla</p>" в эту конкретную строку в документе, точно так же, как если бы строка уже была частью html файла! Поскольку document.write() называется во время разбора html файла, он просто анализируется как часть страницы.
  • Закройте документ для записи. Полная обработка.

Если вы используете document.write(), не было бы неожиданностей. Вместо этого вы вызываете document.write() после анализируется html.

И что, по-вашему, должно произойти?

Как я уже упоминал ранее, документ должен быть открыт для записи до его написания. Теоретически мы можем либо добавить существующий контент, либо просто перезаписать его. Ну, если мы добавим к контенту, мы получим недопустимую страницу html, потому что новые значения появятся после закрытия тегов. Поэтому более разумное поведение заключается в том, чтобы перезаписать контент и что именно происходит.