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

Open window with html content

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

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 .
Читайте также:  Python virtual environment vs code

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

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

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

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

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 , тогда низ с низом.

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

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 - научим с нуля

Источник

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