Javascript работа с windows

На этом уроке мы познакомимся с различными методами объекта window, которые позволяют открывать и закрывать окна, определять закрыто ли окно, а также получать его внутреннее имя и др.

Методы объекта window: open(), close(), print(), focus() и blur()

В этом разделе мы рассмотрим следующие методы объекта window:

• open() — предназначен для открытия окон (вкладок);
• close() — предназначен для закрытия окон. В основном используется для закрытия окон открытых методом open();
• print() — предназначен для печати содержимого окна;
• focus() — предназначен для передачи фокусу указанному окну;
• blur() — предназначен для удаления фокуса с указанного окна.

Открытие нового окна или вкладки

В JavaScript открыть новое окно или вкладку из существующего документа можно с помощью метода «window.open».

Синтаксис:

window.open([url] [, windowName] [,windowFeature]);

Картинка с сайта: itchief.ru

Параметры:

• url – адрес ресурса, который необходимо загрузить в это окно или вкладку (если в качестве url указать пустую строку, то туда будет загружена пустая страница «about:blank»);
• windowName – имя окна;
• windowFeature – необязательный параметр для настройки свойств окна (они указываются в формате «свойство=значение» через запятую и без пробелов).

Настройки окна windowFeature:

• left и top – положение левого верхнего угла окна относительно экрана (значения этих свойств должны быть больше или равны 0);
• height и width — размеры окна (его высота и ширина); основная масса браузеров имеет ограничения на минимальные значения этих свойств (в большинстве случаев – это не меньше 100);
• menubar – во включённом состоянии отображает строку меню;
• toolbar – включает показ кнопок панели инструментов («Назад», «Вперёд», «Обновить» «Остановить») и панель закладок (если она отображается в родительском окне);
• location – определяет нужно ли показывать адресную строку;
• resizable — свойство, которое позволяет включить (yes) или выключить (no) возможность изменения размеров окна;
• scrollbars – предназначено для включения (yes) или выключения (no) полос прокрутки;
• status – определяет нужно ли отображать строку состояния или нет.

Настройки menubar, toolbar, location, resizable, scrollbars, status является логическими, если их нужно включить, то устанавливаем значение true, в противном случае – false.

Рассмотрим следующий примеры:

1. Открыть пустую страницу about:blank в новом окне. Данное окно должно иметь ширину и высоту, равную 250рх:

window.open("","","width=250,height=250");

2. Открыть веб-страницу «http://itchief.ru/» в текущем окне:

window.open("http://itchief.ru/", "_self");

3. Открыть новое окно, имеющее определённые свойства (top=100, left=100, width=400, height=500, scrollbars=yes, resizabie=yes):

window.open("http://itchief.ru", "_blank", "top=100, left=100, width=400, height=500, scrollbars=yes, resizable=yes");

Как взаимодействовать с окном после его открытия

Метод open() позволяет не только открыть окно, но и получить ссылку на данное окно. Данная ссылка позволяет взаимодействовать с этим окном посредством вызова определённых свойств и методов. Т.е. мы можем с помощью JavaScript кода, расположенного в одном окне управлять другим окном.

Картинка с сайта: itchief.ru

Например, для того чтобы обратиться к объекту document открытого окна:

Картинка с сайта: itchief.ru

Открыть пустое новое окно и вывести в ней некоторый текст:

var myWindow = window.open("", "", "width=250, height=250");
myWindow.document.write("<p>Некоторый текст</p>");

Примечание: Взаимодействовать Вы можете только с теми окнами, которые сами открыли, с другими окнами Вы работать не можете.

Метод close()

Он предназначен для закрытия окна. Данный метод не имеет параметров. Он обычно используется для закрытия окон созданных методом open(). В противном случае, когда Вы попытаетесь закрыть окно (вкладку), открытое самим пользователем (не из JavaScript), то браузер из-за соображений безопасности запросит у пользователя подтверждение на выполнение этого действия.

Например, создадим кнопки для открытия и закрытия окна с именем myWindow:

<script>
//создать переменную, в которой будем хранить ссылку на объект window открытого окна
var myWindow;
function myWindowOpen {
  myWindow = window.open("http://www.yandex.ru", “myWindow", "width=250, height=250");
}
function myWindowClose {
  if (myWindow) {
    myWindow.close();
    myWindow = null;
  }
}
</script>

<button onClick="myWindowOpen()">Oткрыть oкно</button>
<button onClick="myWindowClose()">Закрыть окно</button>

Метод print()

Он предназначен для печати содержимого окна. Данный метод не имеет параметров.

<script>
function myPrint() {
  window.print();
}
</script>

<button onclick="myPrint()">Печать страницы</button>

Метод focus()

Он предназначен для передачи фокусу указанному окну. Данный метод не имеет параметров.

Метод blur()

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

<script>
function myWindowOpen() {
  var myWindow = window.open("", "", "width=200,height=100");
}
function myWindowFocus() {
  myWindow.focus();
}
function myWindowBlur() {
  myWindow.blur();
}
</script>

<button onclick="myWindowOpen()">Открыть окно</button>
<button onclick="myWindowFocus()">Передать фокус окну</button>
<button onclick="myWindowBlur()">Переместить окно на задний план</button>

Свойства объекта window: name, opener, closed

В этом разделе рассмотрим следующие свойства объекта window:

• name — предназначено для получения или установления внутреннего имени окна;
• opener — позволяет получить в текущем окне, ссылку на окно (объект window), с которого было открыто данное окно;
• closed — свойство логического типа, которое возвращает: true, если окно закрыто и false, если окно открыто.

Свойство name

Данное свойство очень часто используется для изменения внутреннего имени окна, после того как оно уже открыто. Кроме этого, свойство name может вернуть текущее значение внутреннего имени окна.

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

Данное имя в основном используется в гиперссылках и формах для указания окна, в котором необходимо открыть страницу. Например, для указания внутреннего имя окна в гиперссылке используется атрибут target, Если элемент а имеет атрибут target="searchWindow", то при нажатии на данную ссылку браузер сначала пытается найти окно с таким внутренним именем (searchWindow), если окна с таким внутренним именем не существует, то он открывает новое окно и присваивает ему имя searchWindow. А если окно с таким именем существует, то новое окно не открывается, а перезагружается страница по указанной ссылке а этом окне. По умолчанию окна а браузере не имеют внутреннего имени.

Примеры:

Например, откроем страницу «http://www.google.com/» в окне, имеющем имя myWindow:

<!-- Изменим имя текущего окна на "myWindow" -->
window.name = "myWindow";
<!-- Откроем URL, указанный в атрибуте href, в окне, имеющей имя "myWindow" -->
<а href="http://www.google.com/" target="myWindow"></a>

Например, откроем окно с помощью метода open() и выведем в нём его имя:

<!-- Откроем окно и зададим ему внутреннее имя "myTest" -->
var wnd = window.open("","myTest","width=200, height=300");
<!-- выведем с помощью метода write объекта document внутреннее имя окна -->
wnd.document.write("<p>Это окно имеет имя:" + wnd.name +".</р>");

Свойство opener

Данное свойство позволяет получить в окне, ссылку на исходное окно (объект window), т.е. на окно из которого было открыто данное окно.

Например, у Вас есть исходное окно (1), в котором Вы с помощью метода ореn() открываете другое окно (2). В этом окне (2) Вы можете с помощью свойства opener получить окно (1).

Картинка с сайта: itchief.ru

<script>
function openMyWindow()
{
  <!-- Открываем пустое окно, имеющее ширину и высоту, равные 200рх -->
  var myWindow=window.open("","","width=200,height=200");
  <!--— Выводим в открывшееся окно заголовок h1 -->
  myWindow.document.write("<h1>Oткрытое окно (2)</h1>");
  <!-- В окне myWindow (2), с помощью свойства opener получаем исходное окно (1), в котором посредством метода write объекта document выводим заголовок h1 —>
  myWindow.opener.document.write("<hl>Это исходное окно(1), с помощью которого мы открыли окно (2)</h1>");
}
</script>

<a href="javascript:openMyWindow()">Открыть окно</а>

Свойство closed

Свойство closed возвращает логическое значение, указывающее закрыто окно или нет.

Пример:

<button onclick="openWindow()">Oткрыть окно</button>
<button onclick="closeWindow()">3акрыть окно</button>
<button onclick="stateWindow()">Cocтояние окна</button>

<script>
var myTestWindow;
function openWindow() {
  myTestWindow = window.open ("","" ,"left=200,top=250,width=250,height=250");
}
function closeWindow() {
  if (myTestWindow) {
    myTestWindow.close();
  }
}
function stateWindow() {
  if (!myTestWindow) {
    alert("Окно не открыто");
  }
  else {
    if (myTestWindow.closed)
      alert ("Окно закрыто");
    else
      alert ("Окно открыто");
  }
}
</script>

Открытие, закрытие и позиционирование окон

Последнее обновление: 01.11.2023

Язык JavaScript позволят программно управлять окнами веб-браузера. Для этого объект window
предоставляет ряд методов. Так, метод open() открывает определенный ресурс
в новом окне или вкладке браузера. Стоит учитывать, что подобное действие лучше выполнять по действию пользователя, например, по нажатию на кнопку, потому что
в ином случае браузеры могут заблокировать подобные окна. Например, определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<button onclick="openWindow()">Click</button>
<script>
function openWindow(){
  window.open("https://microsoft.com");
}
</script>
</body>
</html>

Здесь на веб-странице определена кнопка — элемент button. У кнопки установлен атрибут onclick, который указывает на функцию javascript,
которая будет выполняться по нажатию этой кнопки.

В коде javascript определена функция openWindow(), которая выполняется по нажатию на кнопку. В этой функции выполняется функция window.open(),
в которую в качестве первого параметра передается адрес — в данном случае «https://microsoft.com». И по нажатию на кнопку будет открываться в новой вкладке страницы «https://microsoft.com».

Картинка с сайта: metanit.com

Метод open() принимает ряд параметров:

open();
open(url);
open(url, target);
open(url, target, windowFeatures);

В качестве первого параметра — url передается путь к ресурсу.

Второй параметр — target передается путь к ресурсу. Распространенные значения:

• _self: страница открывается в текущей вкладке

• _blank: страница открывается в новой вкладке или в отдельном окне

Например, открытие адреса в той же вкладке:

window.open("https://metanit.com", "_self");

Третий параметр позволяет установить набор стилевых характеристик окна. Каждая стилевая характеристика определяется в виде наборов name=value, где name — название стилевой характеристики, а
value — ее значение. Друг от друга стилевые характеристики отделены запятой.

В частности, можно использовать следующие характеристики:

• popup: указывает, будет ли открываться страница в отдельном всплывающем окне. Для этого может принимать такие
  значения, как yes, 1 или true. Например:

  window.open("https://metanit.com", "_blank", "popup=yes");

  

  Картинка с сайта: metanit.com

• width / innerWidth: ширина окна в пикселях. Например, width=640

• height / innerHeight: высота окна в пикселях. Например, height=480

• left / screenX: координата X относительно начала экрана в пикселях. Например, left=0

• top / screenY: координата Y относительно начала экрана в пикселях. Например, top=0

• location: указывает, будет ли отображаться адресная строка. Например, location=yes

• menubar: указывает, будет ли отображаться панель меню. Например, menubar=yes

• scrollbars: указывает, будет ли окно иметь полосы прокрутки. Например, scrollbars=yes

• status: указывает, будет ли отображаться строка состояния. Например, status=yes

• toolbar: указывает, будет ли отображаться панель инструментов. Например, toolbar=yes

Последние пять параметров в качестве значений могут принимать yes и no, вместо которых также можно использовать
1 и 0 соответственно

Пример применения нескольких параметров:

window.open("https://metanit.com", "_blank", "width=600,height=400,left=500,top=200");

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

Также стоит отметить, что через свойство opener окна можно получить ссылку на главное окно, из которого было открыто текущее.

Закрытие окна

С помощью метода close() можно закрыть окно. Например:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<button onclick="openWindow()">Open</button>
<button onclick="closeWindow()">Close</button>
<script>
let metanitWindow = null;

function openWindow(){
    if(!metanitWindow || metanitWindow.closed){  // если окно не открыто
        metanitWindow = window.open("https://metanit.com", "_blank", "width=600,height=400,left=500,top=200,popup=yes");
   }
}
function closeWindow(){
    metanitWindow?.close(); // если окно открыто, то закрываем его
    metanitWindow = null;
}
</script>
</body>
</html>

Здесь определены две кнопки для открытия и закрытия окна. Ссылка на само окно помещается в переменную metanitWindow, которая изначально равна null.
По нажатию на первую кнопку вызывается функция openWindow(). В этой функции проверяем, что metanitWindow не равен null и что окно не закрыто
(metanitWindow.closed не равно false).
Вторая проверка необходима на случай, если окно будет закрыто нажатием на крестик в самом окне (в этом случае closed=true). И если окно не открыто, открываем его.

По нажатию на вторую кнопку у объекта metanitWindow вызываем метод close и устанавливаем переменную в null.

Управление позицией и размером окна

Для управления/изменения позиции и размера окна объект window предоставляет ряд методов:

• moveBy(): перемещает текущее окно браузера по горизонтали и вертикали на указанное количество пикселей. Первый параметр определяет перемещение по горизонтали, второй параметр — перемещение по вертикали в пикселях.

• moveTo(): перемещает текущее окно браузера по горизонтали и вертикали в указанное положение. Первый параметр определяет положение по горизонтали, второй параметр — положение по вертикали в пикселях.

• resizeBy(): масштабирует текущее окно браузера по горизонтали и вертикали на указанное количество пикселей. Первый параметр определяет значение масштабирования по горизонтали, второй параметр — значение масштабирования по вертикали.

• resizeTo(): масштабирует текущее окно браузера по горизонтали и вертикали до заданного размера. Первый параметр определяет ширину, второй параметр — высоту.

• scroll(): прокручивает содержимое окна до указанной позиции. Первый параметр указывает положение по горизонтали, второй параметр — положение по вертикали.

• scrollBy(): прокручивает содержимое окна на указанный коэффициент. Первый параметр определяет коэффициент прокрутки по горизонтали, второй параметр определяет коэффициент прокрутки по вертикали.

• scrollTo(): прокручивает содержимое окна до указанной позиции. Первый параметр указывает положение по горизонтали, второй параметр — положение по вертикали.

Примеры управления позицией и размерами окна:

// сдвигаем окно браузера на 200 пикселей по горизонтали и на 100 пикселей по вертикали
window.moveBy(200, 100);
// Помещаем окно браузера на позицию с координатами (200, 150)
window.moveTo(200, 150);
// Увеличиваем окно браузера на 200 пиксей в ширину и 100 пикселей в высоту
window.resizeBy(200, 100);
// Сжимаем окно браузера на 200 пиксей в ширину и 100 пикселей в высоту
window.resizeBy(-200, -100);
// Прокручиваем контент окна на 100 пикселей по горизонтали и 200 пикселей по вертикали
window.scrollBy(100, 200);
// Прокручиваем содержимое браузера до позиции (100, 200)
window.scrollTo(100, 200);

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

Например, с помощью метода moveTo() переместитм окно на новую позицию:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<button onclick="openWindow()">Open</button>
<button onclick="moveWindow()">Move</button>
<script>
let testWindow = null;

// открываем окно
function openWindow(){
    testWindow = window.open("test.html", "_blank", "width=600,height=400,left=200,top=200");
}
// сдвигаем окно
function moveWindow(){
    testWindow.moveTo(500,400);
}
</script>
</body>
</html>

В данном случае по нажатию на кнопку Open открываем окно, а по нажатию на кнопку Move перемещаем его на позицию с координатами x=500, y=400 относительно
левого верхнего угла экрана.

Last Updated :
31 Jul, 2024

In JavaScript, the Window object represents the browser window that contains a DOM document.

The Window object offers various properties and methods that enable interaction with the browser environment, including manipulating the document, handling events, managing timers, displaying dialog boxes, and more.

Window Object Properties

The Window object in JavaScript has numerous properties that provide access to various aspects of the browser environment and the window itself. Here are some commonly used properties:

Window Object Properties Examples

Example 1: We will use the console property in this example to show how it works.

JavaScript

// This is console property
console.log(window.location)

Output:

Location {ancestorOrigins: DOMStringList, href: 'chrome://new-tab-page/', origin: 'chrome://new-tab-page', protocol: 'chrome:', host: 'new-tab-page', …}

Window Object Methods:

Methods in JavaScript are functions associated with objects. They perform operations or calculate values. Here are some methods of the Window object:

Syntax:

window.MethodName()

NOTE: Depending on the attributes, a parameter could have any value, including a string, number, object, and more.

Here is a list of some of the methods of the window object:

Window Object Method Example

Example 1: We’ll use the window.alert method in this example to show how it works:

JavaScript

// This is window.alert method
console.log(window.alert("GeeksforGeeks"))

Output:

Картинка с сайта: www.geeksforgeeks.org

Example 2: In this example, we’ll use the setInterval() Method:

HTML

<!DOCTYPE html>
<html>

<body>
    <h2>The setInterval() Method</h2>
    <p id="demo"></p>

    <script>
        const element = document.getElementById("demo");
        setInterval(function () {
            element.innerHTML += "GeeksforGeeks</br>"
        }, 500);
    </script>
</body>

</html>

Output:

Картинка с сайта: www.geeksforgeeks.org

Conclusion

The Window object in JavaScript represents the browser window or frame. It offers properties like innerHeight, innerWidth, and screen, as well as methods like alert(), confirm(), and open(), enabling interaction and control over the window and document.