Главная » Языки программирования

Html javascript открыть новое окно

На чтение 8 мин
Содержание
  1. window.open()
  2. Синтаксис
  3. Открыть страницу в новой вкладке
  4. Pop-up с заданными размерами
  5. Взаимодействие с новым окном
  6. Получить доступ к странице из нового окна
  7. Закрыть окно с помощью close()
  8. Проверить закрыто ли окно — свойство closed
  9. Передать фокус — focus()
  10. Убрать фокус - blur()
  11. Изменить размеры или переместить окно
  12. Прокрутка окна
  13. Популярные события
  14. Итого
  15. window.open()
  16. Кратко
  17. Простой пример
  18. Как пишется
  19. Значения:
  20. Примеры использования
  21. Возможности
  22. Особенности применения

window.open()

open() — метод объекта window позволяет открыть ссылки в новом или всплывающем окне или новой вкладке.

Синтаксис

 window.open(url, target, windowFeatures)

url необязательный — относительный или полный путь до страницы в формате строки — заключается в одинарные или двойные кавычки. Если оставить строку пустой » или пропустить параметр, откроется пустая страница.

target необязательный — можно указать имя нового окна — window.name , если метод найдет окно с таким же именем, тогда URL откроется в нем, если нет, то откроется новое. Также параметр может принимать те же значения, что и атрибут target тега , с отличием, что по умолчанию идет _blank :

  • _blank — страница будет загружена в новом окне браузера;
  • _self — страница загрузиться в том же самом окне;
  • _parent — загрузиться в родительской странице текущего элемента. Например если действие происходит во фрейме, ссылка откроется на странице куда он вставлен. Если родительской нет, то работает, как _self .
  • _top — страница откроется в окне высшего уровня, какая бы вложенность элементов не была. Если родителя нет, то ведёт себя как _self .

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

  • width или innerWidth — ширина содержимого, в том числе полоса прокрутки, минимум 100px;
  • height или innerHeight — высота содержимого, в том числе полоса прокрутки, минимум 100px;
  • left или screenX — расстояние в пикселях от левой части рабочей области пользователя;
  • top или screenY — расстояние в пикселях от верхней части рабочей области пользователя.
  • popup — при true ссылка откроется в новом окне.
  • noopener — параметр предотвращает доступ новому окну к исходной странице и возвращает null . Все значения второго параметра метода open() , кроме _top , _self и _parent обрабатываются, как _blank .
  • noreferrer — блокирует передачу информации о исходной странице и устанавливает noopener=true .

Открыть страницу в новой вкладке

 open('https://learnjs.ru/journal/knigi-javascript/', 'BooksJS')

Большинство браузеров блокируют всплывающие окна, которые были вызваны не в результате действий пользователя.

В данном случае ссылка откроется при клике на кнопку без проблем.

Читайте также:  Document

Pop-up с заданными размерами

 window.open('https://learnjs.ru/', 'LearnJS', 'width=500,height=500,left=650,top=200')

Для удобства третий параметр можно записать в переменную и при вызове метода open() , использовать уже его.

 let paramsPopUp = `width=500,height=500,left=650,top=200` window.open('https://learnjs.ru/', 'LearnJS', paramsPopUp)

Взаимодействие с новым окном

open() возвращает ссылку на новое окно, тем самым позволяя манипулировать им с помощью вызова определенных методов и получения значений свойств.

 let newWindow = window.open('', 'createWindow', 'popup') newWindow.document.write('
Практикуйтесь в написании кода каждый день
')

Здесь мы записали ссылку в переменную newWindow , а затем с помощью write() вывели в новом окне наш текст.

Получить доступ к странице из нового окна

Получить ссылку из нового окна на родителя можно с помощью свойства opener

 let myWindow = window.open('','newPopUp','width=200,height=200,left=400,top=200') myWindow.document.write('

Закрыть окно с помощью close()

 let newWindow = window.open('https://learnjs.ru', 'LearnJS', 'width=500,height=500') setTimeout(() => newWindow.close(), 3000)

Код откроет всплывающее окно, а через 3 секунды его закроет.

Проверить закрыто ли окно — свойство closed

 let newWindow = window.open('', 'newPopUp', 'width=500,height=500') newWindow.document.write('
Закрой меня
') let timerId = setInterval(() => < if(newWindow.closed) < alert('Pop-up закрыт') clearInterval(timerId) >>, 1000)

Свойство closed содержит значение true — окно закрыто или false — окно открыто. В нашем примере мы сначала открываем pop-up и далее запускаем проверку — закрыто ли окно. Когда пользователь его закроет, тогда сработает alert(‘Pop-up закрыт’) .

Передать фокус — focus()

Для выполнения задачи есть метод focus()

Здесь мы передали фокус на поле ввода.

Убрать фокус - blur()

Для того, чтобы убрать фокус есть метод blur()

Здесь мы наоборот каждый 0,1 секунду убираем фокус с поля ввода в новом окне. Придется постараться, чтобы туда что-то напечатать.

Изменить размеры или переместить окно

newWindow.moveBy(x,y) - переместить окно в пикселях, x - вправо, y - вниз. Возможны отрицательные значения.

newWindow.moveTo(x,y) - переместить в заданную координату.

newWindow.resizeBy(width,height) - изменить размер окна на указанную величину. Возможны отрицательные значения.

newWindow.resizeTo(width,height) - изменить размер окна на заданное значение.

Методы будут работать, если окно создано вследствие взаимодействия пользователя с элементами страницы. Если окно создается без участия юзера, чаще всего браузеры будут блокировать такие изменения.

Прокрутка окна

newWindow.scrollBy(x,y) - прокрутка окна в пикселях, x - вперед, y - назад. Возможны отрицательные значения.

newWindow.scrollTo(x,y) - прокрутить окно к указанным координатам.

element.scrollIntoView(top) - прокрутить окно так, чтобы был полностью виден указанный элемент. Если значение top равно true или не задано, тогда верх элемента совпадает с верхом экрана, если false , тогда низ с низом.

Читайте также:  Connect java and mysql

Популярные события

onresize - изменение размера окна

onload - страница загружена

onfocus - фокус установлен

По клику создаем pop-up, а далее отслеживаем, когда input получит фокус. При достижении события добавляем в наше всплывающее окно заветное Пора учить JavaScript.

Итого

1. Метод open() позволяет открывать всплывающие окна и новые вкладки, а также получать ссылки на них, тем самым давая возможность манипулировать ими.

2. Не только родитель имеет доступ к новому окну, но и новое окно может получить доступ к исходному с помощью свойства opener .

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

4. Создавая новое окно с помощью метода open() , можно указать через параметры его размер, а также как и где оно будет открыто.

5. Полезные методы для взаимодействия в новым окном:

  • close() - закрыть окно;
  • focus() - передать фокус;
  • blur() - убрать фокус;
  • moveBy(x,y) , moveTo(x,y) , resizeBy(width,height) , resizeTo(width,height) - изменение размеров и перемещение;
  • scrollBy(x,y) , scrollTo(x,y) , scrollIntoView(top) - прокрутка окна.

Skypro - научим с нуля

Источник

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 - здесь можно указать расстояние от левой верхней части (или рабочей области) экрана пользователя, на котором откроется окно.

Читайте также:  Python argument parser add argument

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 ( ) есть несколько недостатков:

  1. многие браузеры блокируют попапы.
  2. open ( ) решает за пользователя, как именно открыть ссылку. Улучшится ли пользовательский опыт, если чтению контента будут мешать неожиданно всплывающие окна или переходы на новую вкладку (вместо открытия их в фоновом режиме)? Вряд ли.
  3. инлайновые значения вызывают неожиданное поведение ссылки при взаимодействии с ней (и не только). Важно и то, что они также передают неправильную семантику скринридерам.

Источник

Оцените статью
© 2023 Программирование