Javascript закрыть свое окно браузера

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

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

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

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('') let getButton = myWindow.document.querySelector('#btn') getButton.addEventListener('click', () => < myWindow.opener.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 - научим с нуля

Источник

Как закрыть окно браузера с помощью JavaScript

Чтобы закрыть окно или вкладку браузера, которая была открыта с помощью JavaScript, используйте метод window.close(). Например, приведенный ниже код закроет текущую вкладку.

Метод window.close() будет работать только при следующих условиях:

1. Вкладки должны быть открыты с помощью JavaScript. Например, с помощью open().
2. В браузере Firefox вкладка, которую вы хотите закрыть, не должны быть открыты с помощью значений параметра strWindowFeatures «noopener» или «noreferrer». Например, если окно было открыто с помощью open("index.html", "_blank", "noopener"), то функция window.close() не сработает.

Как закрыть окно браузера с помощью JavaScript - демонстрация

Обратите внимание на следующие особенности приведенного ниже примера:

• Кнопка «Open demo» откроет вкладку с этой статьей. При этом браузер автоматически прокрутит страницу до начала раздела с демонстрацией.
• Кнопка «Close current window» отображается как в текущей вкладке, так и во вновь открытой. Но она будет работать только в последней.
• Если вы нажмете кнопку «Open demo» пару раз, то откроете несколько вкладок браузера с этой статьей. При этом кнопка «Close current window» должна работать во всех вкладках браузера. Но кроме оригинальной, которую вы открыли вручную.

Исходный код

Open demo in a new window/tab Close current window if possible 

Это стандартный HTML-код к с добавлением обработчиков onclick, которые вызываются, когда кто-то нажимает на кнопки.

JavaScript-функция tsw_open_demo_window()вызывается при нажатии кнопки «Открыть демонстрацию».

function tsw_open_demo_window()

Я использовал относительный URL-адрес, так как в примере открывается эта же страница. Но вы можете использовать абсолютный адрес (включая «http://» или «https://»).

Кнопка «Close current window» не выполняет никаких других действий, кроме вызова window.close(). Поэтому я поместил JavaScript-код непосредственно в ее атрибут onclick.

Вадим Дворников автор-переводчик статьи « How to Close a Browser Tab/Window with JavaScript »

Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, отклики, подписки, дизлайки, лайки низкий вам поклон!

Источник

Window: close() method

The Window.close() method closes the current window, or the window on which it was called.

This method can only be called on windows that were opened by a script using the Window.open() method, or on top-level windows that have a single history entry. If the window doesn't match these requirements, an error similar to this one appears in the console: Scripts may not close windows that were not opened by script.

Note also that close() has no effect when called on Window objects returned by HTMLIFrameElement.contentWindow .

Syntax

Parameters

Return value

Examples

Closing a window opened with window.open()

This example shows a method which opens a window and a second one which closes the window; this demonstrates how to use Window.close() to close a window opened by calling window.open() .

//Global variable to store a reference to the opened window let openedWindow; function openWindow()  openedWindow = window.open("moreinfo.htm"); > function closeOpenedWindow()  openedWindow.close(); > 

Specifications

Browser compatibility

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on Apr 8, 2023 by MDN contributors.

Your blueprint for a better internet.

Источник