Відкриття нового вікна

Опис методу window.open ()

Метод window.open () відкриває нове вікно браузера або вкладку, як якщо б у меню браузера вибрати пункт Відкрити нове вікно або Відкрити нову вкладку. У це вікно завантажується документ відповідно до вказаних параметрів. Даний метод повертає посилання на об'єкт window відкритого вікна або null. якщо вікно не відкрилося.

Нове вікно відкривається відразу при виклику window.open () і спочатку воно порожнє. Завантаження ресурсу починається до тих пір, поки не виконається весь поточний скриптова блок.

Якщо вікно з вказаним ім'ям вже відкрито, тоді завантаження документа виконається в цей же вікно. У цьому випадку метод поверне посилання на дане вікно, а передаються параметри вікна проігнорує. Якщо і URL - порожній рядок, тоді з вікном взагалі нічого не відбудеться. Щоб при кожному виклику window.open () відкривалося нове вікно, в якості імені вікна можна вказати спеціальне значення _blank.

Завжди те саме вікно
Завжди нове вікно

Якщо при відкритті вікна його параметри не зазначені (третій агрумент методу window.open () опущений або передана порожній рядок), тоді зовнішній вигляд нового вікна буде таким же, як у вихідного (з усіма панелями інструментів), або документ завантажиться в новій вкладці вихідного вікна браузера. Якщо ж вказати принаймні один параметр, то всі інші параметри (крім titlebar і close. Які встановлені за замовчуванням) вважаються скасованими.

Якщо параметр повинен приймати числове значення, то воно вказується після знаку = (дорівнює), наприклад width = 640.

Якщо опція може мати тільки два стани (включена / відключена), тоді є три способи для її включення. приклади:

Для відключення опцій їм необхідно присвоїти значення no або 0. За замовчуванням всі опції, крім titlebar і close. відключені. Тому не має сенсу відключати інші опції, крім цих двох.

Відкрити нове вікно

В наведеному вище прикладі для відкривається вікна будуть використовуватися опції scrollbars. titlebar і close. а також встановлено розмір області документа 320x320 пікселів.

Якщо в параметрах відкривається вікна не вказані його розміри, тоді використовуються розміри вихідного вікна.

Якщо в параметрах не вказано положення вікна, тоді воно розміщується на 22 пікселя нижче і 22 пікселя правіше вихідного.

Якщо в параметрах вікна не вказані ні розміри, ні положення вікна, а вихідне вікно розгорнуто на весь екран, нове вікно теж розгортається на весь екран.

У деяких браузерах користувач може сам встановити параметри відкриваються вікон, які не можна змінити опціями методу window.open ().

параметри вікна

Розміри і положення

left Відстань від лівої межі екрану до вікна. Вікно не може бути виведено за областю екрану. top Відстань від верхньої межі екрану до вікна. Вікно не може бути виведено за областю екрану. height Висота області вмісту документа в пікселях, включаючи горизонтальну смугу прокрутки. Не може бути менше 100. width Ширина області вмісту документа в пікселях, включаючи вертикальну смугу прокрутки. Не може бути менше 100.

функціональність

Використання на практиці

Найчастіше метод window.open () застосовується для відкриття посилань в новому вікні (саме вікні, а не вкладці). Це робиться дуже просто:

Наведена функція завантажує ресурс в новому вікні і завжди фокусується на ньому, навіть якщо вікно вже було відкрито.

Методи moveTo () і resizeTo () використовуються на випадок, якщо параметри вікна top. left. height або width не підтримуються браузером. Це збільшує ймовірність кросбраузерності відображення, але не гарантує, так як moveTo () і resizeTo () теж можуть не підтримуватися.

Корисні поради

Уникайте використання window.open ()

Більшість браузерів дозволяють відкривати посилання в новій вкладці і, найчастіше, цього буває достатньо для web-розробника.

Використання window.open () небажано з наступних причин:

Швидкість відкриття вкладки набагато вище, ніж швидкість відкриття нового вікна, що є кращим для користувача.
Чим більше відкритих вікон, тим складніше навігація між ними. Навігація по вкладках зручніше і зрозуміліше.
У нових вікнах можуть бути відсутні різні меню, панелі інструментів, смуги прокрутки і т.д. Відкриваючи ресурс в новій вкладці, про це можна не турбуватися.
Відкриття нового вікна збільшує навантаження на операційну систему користувача.

Позначте посилання, що створюють нові вікна

Користувач може не помітити, що відкрилося нове вікно. Це може дезорієнтувати його (відсутність кнопки Назад і т.п.), що є небажаним моментом. Якщо попередньо позначити посилання, яка повинна відкритися в новому вікні, тоді користувач буде готовий до цього.

Наведіть курсор: Пошук Yandex.

Також, іконку можна використовувати окремо для відкриття посилання в новому вікні, а на саму посилання обробник не вішати. приклад:

Пошук Google

Якщо натиснути на саму посилання, вона відкриється у відповідності з настройками браузера. Клацнувши на іконку точно відкриється нове вікно.

Вказуйте реальний URL в атрибуті href

Завжди використовуйте атрибут target

Уникайте використання _blank

Завжди використовуйте конкретні імена відкриваються вікон. Це дозволить повторно використовувати вже відкриті вікна, що збільшить швидкість відкриття сторінки і заощадить системні ресурси.

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

У будь-якому випадку, хорошим вважається такий код, що не суперечить остаточного вибору користувача. Правильний код повинен розширювати можливості браузера і надавати користувачеві більш широкий вибір для відкриття посилань.