Объект window в JavaScript и его методы

В этом руководстве вы узнаете об объекте window JavaScript, который является глобальным объектом JavaScript в браузере, управляет окнами, раскрывает функциональные возможности браузера, и его методах.

Глобальным объектом JavaScript в браузере является объект window. Это означает, что все переменные и функции, объявленные глобально с помощью ключевого слова var, становятся свойствами и методами объекта window. Например:

var counter = 1;
var showCounter =() => console.log(counter);

console.log(window.counter);
window.showCounter();

Выход:

1
counter 1

Поскольку переменная counter и showCounter() объявлены глобально с помощью ключевого слова var, они автоматически добавляются к объекту window. Если вы не хотите загрязнять объект window, вы можете использовать ключевое слово let для объявления переменных и функций.

Функциональные возможности браузера

Объект window предоставляет веб-странице функциональные возможности веб-браузера.

1) Размер окна

Объект имеет четыре свойства, связанные с размером окна:

• innerWidth и innerHeight возвращают размер области просмотра страницы внутри окна браузера (не включая границы и панели инструментов).
• outerWidth и outerHeight возвращают размер самого окна браузера.

Кроме того, свойства document.documentElement.clientWidth и document.documentElement.clientHeight указывают ширину и высоту области просмотра страницы. Чтобы получить размер окна, используйте следующий фрагмент кода:

const width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

const height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;    

2) Новое окно

Чтобы открыть новое окно или вкладку, вы используете метод window.open() :

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

Метод window.open() принимает три аргумента: URL-адрес для загрузки, цель окна и строку характеристик окна.

Третий аргумент — это разделенная командами строка настроек, определяющая отображаемую информацию для нового окна, такую как ширина, высота, строка меню и изменяемый размер.

Метод window.open() возвращает объект WindowProxy, который является тонкой оболочкой объекта window. Если новое окно не может быть открыто, возвращается значение null.

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

let url = 'http://localhost/js/about.html';
let jsWindow = window.open(url,'about');

Код открывает страницу about.html в новой вкладке. Если вы укажете height и width окна, он откроет URL-адрес в новом отдельном окне вместо новой вкладки:

let features = 'height=600,width=800',
    url = 'http://localhost/js/about.html';

let jsWindow = window.open(url, 'about', features);

Чтобы загрузить другой URL-адрес в существующее окно, вы передаете существующее имя окна в метод window.open(). В следующем примере веб-страница contact.html загружается в окно contact :

window.open('http://localhost/js/contact.html','about');

Следующий код открывает новое окно, которое загружает веб-страницу about.html а затем через 3 секунды загружает веб-страницу contact.html в том же окне:

let features = 'height=600,width=800',
    url = 'http://localhost/js/about.html';

let jsWindow = window.open(url, 'about', features);

setTimeout(() => {
    window.open('http://localhost/js/contact.html', 'about')
}, 3000);

3) Изменение размера окна

Чтобы изменить размер окна, используйте метод resizeTo() объекта window :

window.resizeTo(width,height);

В следующем примере открывается новое окно, которое загружает страницу http://localhost/js/about.html и изменяет размер окна до (600,300) через 3 секунды:

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=800');

setTimeout(() => {
    jsWindow.resizeTo(600, 300);
}, 3000);

Метод window.resizeBy() позволяет изменить размер текущего окна на указанную величину:

window.resizeBy(deltaX,deltaY);

Например:

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

// shrink the window, or resize the window 
// to 500x500
setTimeout(() => {
    jsWindow.resizeTo(-100, -100);
}, 3000);

4) Перемещение окон

Чтобы переместить окно в указанную координату, вы используете метод moveTo() :

window.moveTo(x, y);

В этом методе x и y являются горизонтальными и вертикальными координатами, в которые нужно переместиться. Следующий пример открывает новое окно и перемещает его в (0,0) через 3 секунды:

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.moveTo(500, 500);
}, 3000);

Точно так же вы можете переместить текущее окно на указанную величину:

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.moveBy(100, -100);
}, 3000);

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

Чтобы закрыть окно, используйте метод window.open() :

window.open()

В следующем примере открывается новое окно и закрывается через 3 секунды:

let jsWindow = window.open(
    'http://localhost/js/about.html',
    'about',
    'height=600,width=600');

setTimeout(() => {
    jsWindow.close();
}, 3000);

6) Свойство window.opener

Вновь созданное окно может ссылаться на окно, которое его открыло, через свойство window.opener. Это позволяет обмениваться данными между двумя окнами.

Заключение

• window — это глобальный объект в веб-браузере.
• Объект window в Джаваскрипт раскрывает функциональные возможности веб-браузера.
• Объект окна предоставляет методы для управления окном, такие как open(), resize(), resizeBy(), moveTo(), moveBy() и close().