JavaScript метод document.open()

Определение и применение

JavaScript метод .open() объекта document позволяет открыть поток для записи документа (данные могут быть переданы с помощью методов write() или writeln() объекта document).

Если документ существует, то этот метод очистит его содержимое (автоматический вызов метода .open() объекта document происходит когда метод write(), или writeln() вызываются после загрузки страницы, это поведение определено в HTML Standard).

Не путайте этот метод с одноименным методом объекта window, который позволяет открыть новое окно браузера, оставив текущий документ в том же состоянии. Для того, чтобы завершить запись в документ (закрыть поток открытый с помощью метода .open() объекта document) необходимо воспользоваться методом close() объекта document.

Вариант с тремя аргументами document.open(url, name, features) перенаправляется к window.open() и возвращает окно или null. Вариант записи в текущий документ возвращает сам Document и удаляет его прежние узлы и обработчики событий.

Поддержка браузерами

Спецификация: multipage

Поддерживается во всех основных браузерах с 2020 года.

Показать браузеры
Совместимостьapi.Document.open
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
open✓45✓12✓69✓51✓11✓45✓79✓47✓11✓5.0✓45✓11

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

JavaScript синтаксис

JavaScript
document.open();
// Историческая форма с двумя аргументами: оба игнорируются.
document.open("text/html", "replace");

Спецификация

HTML Standard.

Значения параметров

Параметры document.open()
Параметр Описание
MIMEtype Исторический необязательный аргумент; современная спецификация его игнорирует.
replace Исторический необязательный аргумент; современная спецификация его игнорирует.

Пример использования

Пример создания документа в новом окне

Статический листинг: пример открывает новое окно через window.open(), а учебный раннер не открывает окна. Скопируйте код в отдельный HTML-документ, чтобы запустить его.

Исходный код для изучения. Запуск на этой странице недоступен.

index.html
HTML
<button data-migration-click-0="">Нажми меня</button>
main.js
JavaScript
function myFunc() {
    let newWindow = window.open(),
        newWindowDocument = newWindow.document

    newWindowDocument.open('text/html', 'replace')
    newWindowDocument.write('<html><head><title>My document</title></head><body>')
    newWindowDocument.write('<h1>Hello</h1>')
    newWindowDocument.write('<pre>')

    newWindowDocument.write('1')
    newWindowDocument.write('2')
    newWindowDocument.write('3<br>')

    newWindowDocument.writeln('1')
    newWindowDocument.writeln('2')
    newWindowDocument.writeln('3')

    newWindowDocument.write('</pre>')
    newWindowDocument.write('</body></html>')
    newWindowDocument.close()
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с использованием JavaScript метода .open() объекта window открывает новое окно браузера, а с помощью метода .open() объекта document открывает поток для записи этого документа. В этот документ с помощью методов write() и writeln() записываем в поток необходимые строки текста.

Основное отличие методов write() и writeln() заключается в том, что метод writeln() дополнительно добавляет символ новой строки. Это полезно, например, при работе с HTML элементом <pre>, который сохраняет как пробелы, так и разрывы строк.

После того как мы записали в документ необходимое текстовое содержимое, мы с помощью метода close() объекта document закрываем поток открытый с помощью метода .open() объекта document.

Обратите внимание, что мы дополнительно передали в метод .open() объекта document два аргумента: "text/html" и "replace". Это исторический синтаксис: раньше первый аргумент задавал тип документа, а второй — замену записи в истории браузера. Современная спецификация игнорирует оба аргумента, поэтому вызов document.open() без аргументов работает так же.

Результат нашего примера:

Пример создания документа в новом окне
Пример создания документа в новом окне