open() - метод объекта window позволяет открыть ссылки в новом или всплывающем окне или новой вкладке.
window.open(url, target, windowFeatures)
url необязательный - относительный или полный путь до страницы в формате строки - заключается в одинарные или двойные кавычки. Если оставить строку пустой '' или пропустить параметр, откроется пустая страница.
target необязательный - можно указать имя нового окна - window.name, если метод найдет окно с таким же именем, тогда URL откроется в нем, если нет, то откроется новое. Также параметр может принимать те же значения, что и атрибут target тега <a>, с отличием, что по умолчанию идет _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')
Большинство браузеров блокируют всплывающие окна, которые были вызваны не в результате действий пользователя.
<button id="btn">Открыть страницу</button>
<script>
let btnBuy = document.querySelector('#btn')
btnBuy.addEventListener('click', () => {
open('https://learnjs.ru/redaktory-koda/', 'codeEditor')
})
</script>
В данном случае ссылка откроется при клике на кнопку без проблем.
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('<h1>Практикуйтесь в написании кода каждый день</h1>')
Здесь мы записали ссылку в переменную newWindow, а затем с помощью write() вывели в новом окне наш текст.
Получить ссылку из нового окна на родителя можно с помощью свойства opener
let myWindow = window.open('','newPopUp','width=200,height=200,left=400,top=200')
myWindow.document.write('<button id="btn">Кликни на меня</button>')
let getButton = myWindow.document.querySelector('#btn')
getButton.addEventListener('click', () => {
myWindow.opener.document.write('<h1>Текст на исходной страницы заменен</h1>')
})
let newWindow = window.open('https://learnjs.ru', 'LearnJS', 'width=500,height=500')
setTimeout(() => newWindow.close(), 3000)
Код откроет всплывающее окно, а через 3 секунды его закроет.
let newWindow = window.open('', 'newPopUp', 'width=500,height=500')
newWindow.document.write('<h1>Закрой меня</h1>')
let timerId = setInterval(() => {
if(newWindow.closed) {
alert('Pop-up закрыт')
clearInterval(timerId)
}
}, 1000)
Свойство closed содержит значение true - окно закрыто или false - окно открыто. В нашем примере мы сначала открываем pop-up и далее запускаем проверку - закрыто ли окно. Когда пользователь его закроет, тогда сработает alert('Pop-up закрыт').
Для выполнения задачи есть метод focus()
<button id="btn">Открыть страницу</button>
<script>
let btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
let myWindow = window.open('','newWindow','popup, width=300,height=300,top=400,left=400')
myWindow.document.write('<input id="new-input"></input>')
getInput = myWindow.document.querySelector('#new-input')
getInput.focus()
})
</script>
Здесь мы передали фокус на поле ввода.
Для того, чтобы убрать фокус есть метод blur()
<button id="btn">Открыть страницу</button>
<script>
let btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
let myWindow = window.open('','newWindow','popup, width=300,height=300,top=400,left=400')
myWindow.document.write('<input id="new-input"></input>')
getInput = myWindow.document.querySelector('#new-input')
setInterval(() => {
getInput.blur()
}, 100)
})
</script>
Здесь мы наоборот каждый 0,1 секунду убираем фокус с поля ввода в новом окне. Придется постараться, чтобы туда что-то напечатать.
newWindow.moveBy(x,y) - переместить окно в пикселях, x - вправо, y - вниз. Возможны отрицательные значения.
newWindow.moveTo(x,y) - переместить в заданную координату.
newWindow.resizeBy(width,height) - изменить размер окна на указанную величину. Возможны отрицательные значения.
newWindow.resizeTo(width,height) - изменить размер окна на заданное значение.
<button id="btn">Открыть страницу</button>
<script>
let btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
let myWindow = window.open('','newWindow','popup, width=200,height=200')
setTimeout(() => {
myWindow.moveBy(400,400)
myWindow.resizeBy(200,200)
}, 2000)
})
</script>
Методы будут работать, если окно создано вследствие взаимодействия пользователя с элементами страницы. Если окно создается без участия юзера, чаще всего браузеры будут блокировать такие изменения.
newWindow.scrollBy(x,y) - прокрутка окна в пикселях, x - вперед, y - назад. Возможны отрицательные значения.
newWindow.scrollTo(x,y) - прокрутить окно к указанным координатам.
element.scrollIntoView(top) - прокрутить окно так, чтобы был полностью виден указанный элемент. Если значение top равно true или не задано, тогда верх элемента совпадает с верхом экрана, если false, тогда низ с низом.
onresize - изменение размера окна
onscroll - прокрутка окна
onload - страница загружена
onfocus - фокус установлен
onblur - фокус потерян
<button id="btn">Открыть страницу</button>
<script>
let btn = document.querySelector('#btn')
btn.addEventListener('click', () => {
let myWindow = window.open('','newWindow','width=500,height=500,left=400,top=300')
myWindow.document.write('<input id="new-input"></input>')
getInput = myWindow.document.querySelector('#new-input')
setInterval(() => {
getInput.onfocus = () => {
myWindow.document.write('<p>Пора учить JavaScript</p>')
}
}, 100);
})
</script>
По клику создаем 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) - прокрутка окна.