window.open()

Содержание

• Синтаксис
• Открыть страницу в новой вкладке
• Pop-up с заданными размерами
• Взаимодействие с новым окном
• Получить доступ к странице из нового окна
• Закрыть окно с помощью close()
• Проверить закрыто ли окно - свойство closed
• Передать фокус - focus()
• Убрать фокус - blur()
• Изменить размеры или переместить окно
• Прокрутка окна
• Популярные события
• Итого

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>
    

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

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('<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>')
    })      
    

Закрыть окно с помощью 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('<h1>Закрой меня</h1>')
    let timerId = setInterval(() => {
        if(newWindow.closed) {
            alert('Pop-up закрыт')
            clearInterval(timerId)
        }
    }, 1000)  
    

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

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

Для выполнения задачи есть метод 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()

Для того, чтобы убрать фокус есть метод 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) - прокрутка окна.