window.open()
Открывает ссылку в новом окне, в новой вкладке или в iframe.
Время чтения: меньше 5 мин
Это незавершённая статья. Вы можете помочь её закончить! Почитайте о том, как контрибьютить в Доку.
Кратко
Скопировать ссылку «Кратко» Скопировано
Метод open ( ) объекта window позволяет открывать ссылки в новом окне, в новой вкладке или в iframe.
Простой пример
Скопировать ссылку «Простой пример» Скопировано
window.open('https://practicum.yandex.ru/');window.open('https://practicum.yandex.ru/');
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Метод open ( ) имеет три опциональных параметра:
window.open(url, target, windowFeatures);window.open(url, target, windowFeatures);
url – строка, которая содержит относительный или абсолютный URL.
target – строка, которая указывает где откроется новое окно. Он может принимать те же значения, что и атрибут target тега : имя окна или одно из ключевых слов _self , _blank , _parent , _top .
window Features – строка, которая позволяет детально описать, как будет выглядеть новое окно. Опции в строке указываются через запятую в формате name = value , для булевых типов значение можно опустить.
Вызвать метод без параметров тоже можно, по умолчанию будет открыта чистая вкладка about : blank .
Значения:
Скопировать ссылку «Значения:» Скопировано
width or inner Width / height or inner Height — определит ширину и высоту содержимого окна включая полосы прокрутки. Минимальное возможное значения — 100px.
left or screen X / top or screen Y — здесь можно указать расстояние от левой верхней части (или рабочей области) экрана пользователя, на котором откроется окно.
popup — открывает ссылку в новом окне
menubar — отвечает за отображение строки меню
toolbar — управляет показом кнопок панели инструментов и панели закладок
location — отвечает за показ адресной строки
resizable — позволяет включить/выключить возможность пользователям изменять размеры окна
scrollbars — отображение полос прокрутки
status — отображение строки состояния
noopener — помогает повысить безопасность сайта, так как предотвращает доступ открываемого ресурса к текущей странице (через сеанс браузера).
При использовании noopener значения второго параметра метода open ( ) (кроме _top , _self , _parent ), будут обработаны как _blank
noreferrer — предотвращает передачу информации об исходном ресурсе на целевой. При установке этого значения как true noopener также становится true .
Примеры использования
Скопировать ссылку «Примеры использования» Скопировано
window.open("https://ya.ru/", "_self"); // ссылка откроется в текущем окне window.open("https://ya.ru/", "yandex", "popup"); // ссылка откроется в новом окне, которое примет имя "yandex" window.open("https://ya.ru/", "_blank", "top=100, left=100, width=400, height=500"); // ссылка откроется в новом окне, величина отступов и размеры окна будут соответствовать указаннымwindow.open("https://ya.ru/", "_self"); // ссылка откроется в текущем окне window.open("https://ya.ru/", "yandex", "popup"); // ссылка откроется в новом окне, которое примет имя "yandex" window.open("https://ya.ru/", "_blank", "top=100, left=100, width=400, height=500"); // ссылка откроется в новом окне, величина отступов и размеры окна будут соответствовать указанным
Возможности
Скопировать ссылку «Возможности» Скопировано
Использование метода open ( ) позволяет получить ссылку на новое окно и взаимодействовать с ним, например:
const newWindow = window.open("", "new window", "popup");newWindow.document.write("Hello, World!
");// откроется новое окно с текстом "Hello, World!"const newWindow = window.open("", "new window", "popup"); newWindow.document.write("Hello, World!
"); // откроется новое окно с текстом "Hello, World!"
Особенности применения
Скопировать ссылку «Особенности применения» Скопировано
Авторы MDN рекомендуют использовать метод open ( ) в крайних случаях и (никогда!) не прибегать к встроенному (inline) использованию window . open ( ) .
a href='#' onclick='window.open(`any url`)'> У метода open ( ) есть несколько недостатков:
- многие браузеры блокируют попапы.
- open ( ) решает за пользователя, как именно открыть ссылку. Улучшится ли пользовательский опыт, если чтению контента будут мешать неожиданно всплывающие окна или переходы на новую вкладку (вместо открытия их в фоновом режиме)? Вряд ли.
- инлайновые значения вызывают неожиданное поведение ссылки при взаимодействии с ней (и не только). Важно и то, что они также передают неправильную семантику скринридерам.
Window open()
The open() method opens a new browser window, or a new tab, depending on your browser settings and the parameter values.
See Also:
Syntax
Parameters
Deprecated
- true — URL replaces the current document in the history list
- false — URL creates a new entry in the history list
Warning
Chrome throws an exception when using this parameter.
Return Value
More Examples
Open an about:blank page in a new window/tab:
Open a new window called «MsgWindow», and write some text into it:
var myWindow = window.open(«», «MsgWindow», «width=200,height=100»);
myWindow.document.write(«
This is ‘MsgWindow’. I am 200px wide and 100px tall!
«);
Replace the current window with a new window:
var myWindow = window.open(«», «_self»);
myWindow.document.write(«
I replaced the current window.
«);
Open a new window and control its appearance:
window.open(«https://www.w3schools.com», «_blank», «toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400»);
Open a new window. Use close() to close the new window:
function openWin() <
myWindow = window.open(«», «myWindow», «width=200,height=100»); // Opens a new window
>
function closeWin() myWindow.close(); // Closes the new window
>
Open a new window. Use the name property to return the name of the new window:
var myWindow = window.open(«», «MsgWindow», «width=200,height=100»);
myWindow.document.write(«
This window’s name is: » + myWindow.name + «
«);
Using the opener property to return a reference to the window that created the new window:
var myWindow = window.open(«», «myWindow», «width=200,height=100»); // Opens a new window
myWindow.document.write(«
This is ‘myWindow’
«); // Text in the new window
myWindow.opener.document.write(«
This is the source window!
«); // Text in the window that created the new window
Browser Support
open() is supported in all browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | Yes |