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

Обновлено: 06.01.2025

Всплывающее окно («попап» – от англ. Popup window) – один из древнейших способов показать пользователю ещё один документ.

… и откроется новое окно с указанным URL. Большинство современных браузеров по умолчанию будут открывать новую вкладку вместо отдельного окна.

Попапы существуют с доисторических времён. Они были придуманы для отображения нового контента поверх открытого главного окна. Но с тех пор появились другие способы сделать это: JavaScript может загрузить содержимое вызовом fetch и показать его в тут же созданном <div> , так что попапы используются не каждый день.

Кроме того, попапы не очень хороши для мобильных устройств, которые не умеют показывать несколько окон одновременно.

Однако, для некоторых задач попапы ещё используются, например для OAuth-авторизации (вход через Google/Facebook/…), так как:

Блокировка попапов

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

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

Таким образом браузеры могут защитить пользователя от появления нежелательных попапов, при этом не отключая попапы полностью.

Что, если попап должен открываться в результате onclick , но не сразу, а только после выполнения setTimeout ? Здесь все не так-то просто.

Попап откроется в Chrome, но будет заблокирован в Firefox.

Но если мы уменьшим тайм-аут до одной секунды, то попап откроется и в Firefox:

Мы получили два разных результата из-за того, что Firefox «допускает» таймаут в 2000 мс или менее, но все, что свыше этого – не вызывает его доверия, т.к. предполагается, что в таком случае открытие окна происходит без ведома пользователя. Именно поэтому попап из первого примера будет заблокирован, а из второго – нет.

Полный синтаксис window.open

Синтаксис открытия нового окна: window.open(url, name, params) :

url URL для загрузки в новом окне. name Имя нового окна. У каждого окна есть свойство window.name , в котором можно задавать, какое окно использовать для попапа. Таким образом, если уже существует окно с заданным именем – указанный в параметрах URL откроется в нем, в противном случае откроется новое окно. params Строка параметров для нового окна. Содержит настройки, разделённые запятыми. Важно помнить, что в данной строке не должно быть пробелов. Например width=200,height=100 .

Параметры в строке params :

• Позиция окна:
  • left/top (числа) – координаты верхнего левого угла нового окна на экране. Существует ограничение: новое окно не может быть позиционировано вне видимой области экрана.
  • width/height (числа) – ширина и высота нового окна. Существуют ограничения на минимальную высоту и ширину, которые делают невозможным создание невидимого окна.
  • menubar (yes/no) – позволяет отобразить или скрыть меню браузера в новом окне.
  • toolbar (yes/no) – позволяет отобразить или скрыть панель навигации браузера (кнопки вперёд, назад, перезагрузки страницы) нового окна.
  • location (yes/no) – позволяет отобразить или скрыть адресную строку нового окна. Firefox и IE не позволяют скрывать эту панель по умолчанию.
  • status (yes/no) – позволяет отобразить или скрыть строку состояния. Как и с адресной строкой, большинство браузеров будут принудительно показывать её.
  • resizable (yes/no) – позволяет отключить возможность изменения размера нового окна. Не рекомендуется.
  • scrollbars (yes/no) – позволяет отключить полосы прокрутки для нового окна. Не рекомендуется.

  Помимо этого существует некоторое количество не кроссбраузерных значений, которые обычно не используются. Найти примеры таких свойств можно по ссылке.

  Пример: минималистичное окно

  Давайте откроем окно с минимальным набором настроек, просто чтобы посмотреть, какие из них браузер позволит отключить:

  В этом примере большинство настроек заблокированы и само окно находится за пределами видимой области экрана. Посмотрим, что получится в результате. Большинство браузеров «исправит» странные значения – как, например, нулевые width/height и отрицательные left/top . Например, Chrome установит высоту и ширину такого окна равной высоте и ширине экрана, так что попап будет занимать весь экран.

  Давайте исправим значения и зададим нормальные координаты ( left и top ) и значения размеров окна ( width и height ):

  Большинство браузеров выведет окно с заданными нами настройками.

  Правила для опущенных параметров:

  • Если третий аргумент при вызове open отсутствует или он пустой, будут использованы настройки окна по умолчанию.
  • Если строка параметров передана, но некоторые параметры yes/no пропущены, то считается, что указано no , так что соответствующие возможности будут отключены, если на это нет ограничений со стороны браузера. Поэтому при задании параметров убедитесь, что вы явно указали все необходимые yes.
  • Если координаты left/top не заданы, браузер попытается открыть новое окно рядом с предыдущим открытым окном.
  • Если не заданы размеры окна width/height , браузер откроет новое окно с теми же размерами, что и предыдущее открытое окно.

  Доступ к попапу из основного окна

  Вызов open возвращает ссылку на новое окно. Эта ссылка может быть использована для управления свойствами окна, например, изменения положения и др.

  Например, здесь мы генерируем содержимое попапа из JavaScript:

  А здесь содержимое окна модифицируется после загрузки:

  Обратите внимание: сразу после window.open новое окно ещё не загружено. Это демонстрируется в строке (*) . Так что нужно ждать onload , чтобы его изменить. Или же поставить обработчик DOMContentLoaded на newWin.document .

  Окна имеют свободный доступ к содержимому друг друга только если они с одного источника (у них совпадают домен, протокол и порт (protocol://domain:port).

  Доступ к открывшему окну из попапа

  Попап также может обратиться к открывшему его окну по ссылке window.opener . Она равна null для всех окон, кроме попапов.

  Если вы запустите код ниже, то он заменит содержимое открывшего (текущего) окна на «Тест»:

  Так что связь между окнами двусторонняя: главное окно и попап имеют ссылки друг на друга.

  Закрытие попапа

  Чтобы закрыть окно: win.close()

  Для проверки, закрыто ли окно: win.closed .

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

  Если окно закрыто, то его свойство closed имеет значение true . Таким образом можно легко проверить, закрыт ли попап (или главное окно) или все ещё открыт. Пользователь может закрыть его в любой момент, и наш код должен учитывать эту возможность.

  Этот код откроет и затем закроет окно:

  Прокрутка и изменение размеров

  Методы для передвижения и изменения размеров окна:

  win.moveBy(x,y) Переместить окно относительно текущей позиции на x пикселей вправо и y пикселей вниз. Допустимы отрицательные значения (для перемещения окна влево и вверх). win.moveTo(x,y) Переместить окно на координаты экрана (x,y) . win.resizeBy(width,height) Изменить размер окна на указанные значения width/height относительно текущего размера. Допустимы отрицательные значения. win.resizeTo(width,height) Изменить размер окна до указанных значений.

  Также существует событие window.onresize .

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

  Методами JavaScript нельзя свернуть или развернуть («максимизировать») окно на весь экран. За это отвечают функции уровня операционной системы, и они скрыты от фронтенд-разработчиков.

  Методы перемещения и изменения размера окна не работают для свернутых и развёрнутых на весь экран окон.

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

  Мы уже говорили о прокрутке окна в главе Размеры и прокрутка окна.

  win.scrollBy(x,y) Прокрутить окно на x пикселей вправо и y пикселей вниз относительно текущей прокрутки. Допустимы отрицательные значения. win.scrollTo(x,y) Прокрутить окно до заданных координат (x,y) . elem.scrollIntoView(top = true) Прокрутить окно так, чтобы elem для elem.scrollIntoView(false) появился вверху (по умолчанию) или внизу.

  Также существует событие window.onscroll .

  Установка и потеря фокуса

  Теоретически, установить попап в фокус можно с помощью метода window.focus() , а убрать из фокуса – с помощью window.blur() . Также существуют события focus/blur , которые позволяют отследить, когда фокус переводится на какое-то другое окно.

  Раньше на «плохих» сайтах эти методы могли становиться средством манипуляции. Например:

  Когда пользователь пытается перевести фокус на другое окно, этот код возвращает фокус назад. Таким образом, фокус как бы «блокируется» в попапе, который не нужен пользователю.

  Из-за этого в браузерах и появились ограничения, которые препятствуют такого рода поведению фокуса. Эти ограничения нужны для защиты пользователя от назойливой рекламы и «плохих» страниц, и их работа различается в зависимости от конкретного браузера.

  Например, мобильный браузер обычно полностью игнорирует такие вызовы метода window.focus() . Также фокусировка не работает, когда попап открыт в отдельной вкладке (в отличие от открытия в отдельном окне).

  Но все-таки иногда методы фокусировки бывают полезны. Например:

  • Когда мы открываем попап, может быть хорошей идеей запустить для него newWindow.focus() . Для некоторых комбинаций браузера и операционной системы это устранит неоднозначность – заметит ли пользователь это новое окно.
  • Если нужно отследить, когда посетитель использует веб-приложение, можно отслеживать window.onfocus/onblur . Это позволит ставить на паузу и продолжать выполнение анимаций и других интерактивных действий на странице. При этом важно помнить, что blur означает, что окно больше не в фокусе, но пользователь может по-прежнему видеть его.

  Итого

  Всплывающие окна используются нечасто. Ведь загрузить новую информацию можно динамически, а показать – в элементе <div> , расположенным над страницей ( z-index ). Ещё одна альтернатива – тег <iframe> .

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

  Для взаимодействия с пользователем в объекте window определен ряд методов, которые позволяют создавать диалоговые окна.

  
  

  И метод prompt() позволяет с помощью диалогового окна запрашивать у пользователя какие-либо данные. Данный метод возвращает введенное пользователем значение:

  Если пользователь откажется вводить значение и нажмет на кнопку отмены, то метод возвратит значение null.

  
  

  Открытие, закрытие и позиционирование окон

  Объект window также предоставляет ряд методов для управления окнами браузера. Так, метод open() открывает определенный ресурс в новом окне браузера:

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

  Мы можем установить следующие стилевые характеристики:

  width : ширина окна в пикселях. Например, width=640

  height : высота окна в пикселях. Например, height=480

  left : координата X относительно начала экрана в пикселях. Например, left=0

  top : координата Y относительно начала экрана в пикселях. Например, top=0

  titlebar : будет ли окно иметь строку с заголовком. Например, titlebar=no

  menubar : будет ли окно иметь панель меню. Например, menubar=yes

  toolbar : будет ли окно иметь панели инструментов. Например, toolbar=yes

  location : будет ли окно иметь адресную строку. Например, location=no

  scrollbars : допускается ли наличие полос прокрутки. Например, scrollbars=yes

  status : наличие статусной строки. Например, status=yes

  resizable : может ли окно изменять размеры. Например, resizable=no

  С помощью метода close() можно закрыть окно. Например, откроем новое окно и через 10 секунд закроем его:

  Метод moveTo() позволяет переместить окно на новую позицию:

  В данном случае окно перемещается на позицию с координатами x=50, y=50 относительно левого верхнего угла экрана.

  Методы объекта window: open(), close(), print(), focus() и blur()

  В этом разделе мы рассмотрим следующие методы объекта window :

  • open() - предназначен для открытия окон (вкладок);
  • close() - предназначен для закрытия окон. В основном используется для закрытия окон открытых методом open() ;
  • print() - предназначен для печати содержимого окна;
  • focus() - предназначен для передачи фокусу указанному окну;
  • blur() - предназначен для удаления фокуса с указанного окна.

  Открытие нового окна или вкладки

  В JavaScript открыть новое окно или вкладку из существующего документа можно с помощью метода « window.open ».

  
  

  • url – адрес ресурса, который необходимо загрузить в это окно или вкладку (если в качестве url указать пустую строку, то туда будет загружена пустая страница «about:blank»);
  • windowName – имя окна;
  • windowFeature – необязательный параметр для настройки свойств окна (они указываются в формате «свойство=значение» через запятую и без пробелов).

  Настройки окна windowFeature :

  Настройки menubar , toolbar , location , resizable , scrollbars , status является логическими, если их нужно включить, то устанавливаем значение true , в противном случае – false .

  Рассмотрим следующий примеры:

  1. Открыть пустую страницу about:blank в новом окне. Данное окно должно иметь ширину и высоту, равную 250рх:

  2. Открыть веб-страницу "http://itchief.ru/" в текущем окне:

  3. Открыть новое окно, имеющее определённые свойства (top=100, left=100, width=400, height=500, scrollbars=yes, resizabie=yes):

  Как взаимодействовать с окном после его открытия

  Метод open() позволяет не только открыть окно, но и получить ссылку на данное окно. Данная ссылка позволяет взаимодействовать с этим окном посредством вызова определённых свойств и методов. Т.е. мы можем с помощью JavaScript кода, расположенного в одном окне управлять другим окном.

  
  

  Например, для того чтобы обратиться к объекту document открытого окна:

  
  

  Открыть пустое новое окно и вывести в ней некоторый текст:

  Примечание: Взаимодействовать Вы можете только с теми окнами, которые сами открыли, с другими окнами Вы работать не можете.

  Метод close()

  Он предназначен для закрытия окна. Данный метод не имеет параметров. Он обычно используется для закрытия окон созданных методом open() . В противном случае, когда Вы попытаетесь закрыть окно (вкладку), открытое самим пользователем (не из JavaScript), то браузер из-за соображений безопасности запросит у пользователя подтверждение на выполнение этого действия.

  Например, cоздадим кнопки для открытия и закрытия окна с именем myWindow :

  Метод print()

  Он предназначен для печати содержимого окна. Данный метод не имеет параметров.

  Метод focus()

  Он предназначен для передачи фокусу указанному окну. Данный метод не имеет параметров.

  Метод blur()

  Он предназначен, чтобы убрать фокус с указанного окна, т.е. перемещает его на задний план. Данный метод не имеет параметров.

  Свойства объекта window: name, opener, closed

  В этом разделе рассмотрим следующие свойства объекта window :

  • name — предназначено для получения или установления внутреннего имени окна;
  • opener - позволяет получить в текущем окне, ссылку на окно (объект window ), с которого было открыто данное окно;
  • closed - свойство логического типа, которое возвращает: true , если окно закрыто и false , если окно открыто.

  Свойство name

  Данное свойство очень часто используется для изменения внутреннего имени окна, после того как оно уже открыто. Кроме этого, свойство name может вернуть текущее значение внутреннего имени окна.

  Внутреннее имя окна, это не строка, заключённая между открывающим и закрывающим тегом title - это имя окна которое предназначено для разработчика. Т.е. данное имя невидимо для пользователя.

  Данное имя в основном используется в гиперссылках и формах для указания окна, в котором необходимо открыть страницу. Например, для указания внутреннего имя окна в гиперссылке используется атрибут target , Если элемент а имеет атрибут target="searchWindow" , то при нажатии на данную ссылку браузер сначала пытается найти окно с таким внутренним именем ( searchWindow ), если окна с таким внутренним именем не существует, то он открывает новое окно и присваивает ему имя searchWindow . А если окно с таким именем существует, то новое окно не открывается, а перезагружается страница по указанной ссылке а этом окне. По умолчанию окна а браузере не имеют внутреннего имени.

  Например, откроем страницу "http://www.google.com/" в окне, имеющем имя myWindow :

  Например, откроем окно с помощью метода open() и выведем в нём его имя:

  Свойство opener

  Данное свойство позволяет получить в окне, ссылку на исходное окно (объект window ), т.е. на окно из которого было открыто данное окно.

  Например, у Вас есть исходное окно (1), в котором Вы с помощью метода ореn() открываете другое окно (2). В этом окне (2) Вы можете с помощью свойства opener получить окно (1).

  
  

  Свойство closed

  Свойство closed возвращает логическое значение, указывающее закрыто окно или нет.

  В этой теме познакомимся с методами глобального объекта window, предназначенными для перемещения окна (moveTo и moveBy), изменения его размера (resizeTo, resizeBy) и выполнения прокрутки страницы (scrollTo и scrollBy).

  Перемещение окна

  В JavaScript имеются следующие методы объекта window для перемещения окна:

  • moveTo – абсолютное перемещение окна в указанные координаты экрана;
  • moveBy – перемещения окна на указанное количество пикселей относительно его текущего положения.

  Синтаксис метода « window.moveTo »:

  Пример, в котором переместим окно в точку (50, 75):

  
  

  Пример, в котором произведём перемещение окна в левый верхний угол экрана:

  Синтаксис метода « window.moveBy »:

  Например, сдвинем окно на 75px вправо и на 100px вниз:

  
  

  В большинстве браузеров перемещение окна доступно только при выполнении следующих условий:

  • окно (или вкладка) должно быть создано с помощью window.open ;
  • в окне не должно находиться более чем одной вкладки.

  Изменение размеров окна

  Методы объекта window для изменения размеров окна:

  • resizeTo – изменяет ширину ( outerWidth ) и высоту ( outerHeight ) окна на указанные значения;
  • resizeBy – изменяет ширину ( outerWidth ) и высоту ( outerHeight ) окна на указанные величины относительно его текущих размеров.

  В JavaScript методы resizeTo и resizeBy выполняют эти действия только посредством изменения положения правого нижнего угла (координаты верхнего левого угла при этом остаются неизменными).

  Например, изменим ширину и высоту окна так, чтобы он занимал ¼ доступного экрана:

  Например, уменьшим размеры окна (его ширину и высоту) на 50px:

  Прокрутка документа

  В JavaScript имеются следующие методы объекта window для прокрутки документа:

  • scroll ( scrollTo ) - прокручивает страницу до указанного места в абсолютном выражении;
  • scrollBy — прокручивает документ на определённое количество пикселей относительно текущей позиции.

  Синтаксис метода scroll (метод scrollTo выполняет то же самое, что scroll и не отличается по синтаксису):

  Синтаксис метода scrollBy :

  Пример, в котором создадим 3 ссылки, при нажатии на которые будем вызывать метод scroll или scrollBy с определёнными значениями:

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

    
  • Как в фотошопе выпрямить изогнутое изображение
    
  • Как закрасить текстурой в фотошопе
    
  • 1с получить первую строку табличной части
    
  • Как вставить космоснимок в автокад
    
  • Программа запуска приложений для диска разработанная google