JavaScript метод document.open()

JavaScript Document

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

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

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

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

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

МетодChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
document.open()ДаДаДаДаДаДа

JavaScript синтаксис:

document.open()
document.open( MIMEtype, replace )

MIMEtype, replace - String

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

Document Object Model (DOM) Level 1

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

ПараметрОписание
MIMEtypeТип документа, в котором открывается поток для записи документа. Значение по умолчанию - "text/html" (новый документ будет являться HTML документом, если аргумент отсутствует, или имеет значение "text/html", иначе будет создан простой текстовый документ). Необязательный параметр.
replaceCтрока, указывающая, должен ли новый записываемый документ заменять текущий документ в списке истории. По умолчанию если не указана строка "replace" создаваемый документ не заменяет текущий документ в списке истории (вы можете вернуться на эту страницу, нажав кнопку браузера "назад").

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

<!DOCTYPE html>
<html>
	<head>
		<title>Пример создания документа в новом окне</title>
	</head>
	<body>
		<button onclick = "myFunc()">Нажми меня</button> <!-- добавляем атрибут событий onclick -->
		<script>
	function myFunc() {
	  let newWindow = window.open(), // метод позволяет открыть новое окно браузера
	      newWindowDocument = newWindow.document; // ссылаемся на объект document в новом открытом окне
	  // открываем поток для записи документа
	  newWindowDocument.open("text/html", "replace"); 
	  // используем метод write
	  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>");
	  // используем метод writeln
	  newWindowDocument.writeln("1");
	  newWindowDocument.writeln("2");
	  newWindowDocument.writeln("3");
	  // используем метод write
	  newWindowDocument.write("</pre>");
	  newWindowDocument.write("</body></html>");
	  // закрываем поток 
	  newWindowDocument.close(); 
	}
		</script>
	</body>
</html>

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

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

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

Обратите внимание, что мы дополнительно передали в метод .open() объекта document два аргумента, первый определяет тип документа ("text/html" - HTML документ по умолчанию), а второй аргумент соответствует значению "replace", которое указывает, что пользователь, если перейдет в открытом окне на новую страницу не сможет обратно на неё вернуться (кнопка браузера "назад" будет не активна).

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

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