- window.open()
- Кратко
- Простой пример
- Как пишется
- Значения:
- Примеры использования
- Возможности
- Особенности применения
- HTML target Attribute
- Definition and Usage
- Browser Support
- Syntax
- Attribute Values
- COLOR PICKER
- Report Error
- Thank You For Helping Us!
- Window open()
- See Also:
- Syntax
- Parameters
- Deprecated
- Warning
- Return Value
- More Examples
- Browser Support
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 ( ) решает за пользователя, как именно открыть ссылку. Улучшится ли пользовательский опыт, если чтению контента будут мешать неожиданно всплывающие окна или переходы на новую вкладку (вместо открытия их в фоновом режиме)? Вряд ли.
- инлайновые значения вызывают неожиданное поведение ссылки при взаимодействии с ней (и не только). Важно и то, что они также передают неправильную семантику скринридерам.
HTML target Attribute
The target attribute specifies where to open the linked document:
Definition and Usage
The target attribute specifies where to open the linked document.
Browser Support
Syntax
Attribute Values
Value | Description |
---|---|
_blank | Opens the linked document in a new window or tab |
_self | Opens the linked document in the same frame as it was clicked (this is default) |
_parent | Opens the linked document in the parent frame |
_top | Opens the linked document in the full body of the window |
framename | Opens the linked document in the named iframe |
❮ HTML tag
COLOR PICKER
Report Error
If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:
Thank You For Helping Us!
Your message has been sent to W3Schools.
Top Tutorials
Top References
Top Examples
Get Certified
W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.
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 |