Javascript открыть ссылку в новом окне

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/popup-windows.

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

В этой статье мы рассмотрим открытие окон и ряд тонких моментов, которые с этим связаны.

…При запуске откроется новое окно с указанным URL.

Большинство браузеров по умолчанию создают новую вкладку вместо отдельного окна, но чуть далее мы увидим, что можно и «заказать» именно окно.

Блокировщик всплывающих окон

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

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

Как же браузер понимает – посетитель вызвал открытие окна или нет?

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

А если код был на странице и выполнился автоматически при её загрузке – у него этого флага не будет. Попапы будут заблокированы.

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

Функция возвращает ссылку на объект window нового окна, либо null , если окно было заблокировано браузером.

url URL для загрузки в новое окно. name Имя нового окна. Может быть использовано в параметре target в формах. Если позднее вызвать window.open() с тем же именем, то браузеры (кроме IE) заменяют существующее окно на новое. params Строка с конфигурацией для нового окна. Состоит из параметров, перечисленных через запятую. Пробелов в ней быть не должно.

Значения параметров params .

  1. Настройки расположения окна:

left/top (число)

Координаты верхнего левого угла относительно экрана. Ограничение: новое окно не может быть позиционированно за пределами экрана.

Ширина/высота нового окна. Минимальные значения ограничены, так что невозможно создать невидимое окно с нулевыми размерами.

Если координаты и размеры не указаны, то обычно браузер открывает не окно, а новую вкладку.

  1. Свойства окна:

menubar (yes/no) Скрыть или показать строку меню браузера. toolbar (yes/no) Показать или скрыть панель навигации браузера (кнопки назад, вперёд, обновить страницу и остальные) в новом окне. location (yes/no) Показать/скрыть поле URL-адреса в новом окне. По умолчанию Firefox и IE не позволяют скрывать строку адреса. status (yes/no) Показать или скрыть строку состояния. С другой стороны, браузер может в принудительном порядке показать строку состояния. resizable (yes/no) Позволяет отключить возможность изменять размеры нового окна. Значение no обычно неудобно посетителям. scrollbars (yes/no) Разрешает убрать полосы прокрутки для нового окна. Значение no обычно неудобно посетителям.

  1. Ещё есть небольшое количество не кросс-браузерных свойств, которые обычно не используются. Вы можете узнать о них в документации, например MDN: window.open.
Читайте также:  Чем можно порезать металл

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

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

Доступ к новому окну

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

В примере ниже мы заполняем новое окно содержимым целиком из JavaScript:

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

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

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

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

Метод open() .

  • В первом параметре указывается URL страницы, которую необходимо загрузить в это окно. Если значение данного параметра не задавать, то в окне будет отображена пустая страница ( about:blank ).
  • Во втором параметре метода open указывается значение атрибута target или имя окна. Поддерживаются следующие значения:
  • _blank – URL загружается в новое окно (вкладку). Это значение используется по умолчанию;
  • _parent – URL загружается в родительский фрейм. Если его нет, то URL загружается в текущее окно (вкладку);
  • _self – URL загружается в текущее окно;
  • _top – отменяет все фреймы и загружает URL в текущее окно (вкладку) браузера. Если его нет, то URL загружается в текущее окно (вкладку);
  • В качестве параметра Вы также можете указать имя открываемого окна. Данное имя является внутренним и может использоваться веб-разработчиками для вызова функций и методов этого окна.
  • Третий параметр предназначен для указания набора свойств окна, которые вводятся через запятую. Поддерживаются следующие основные свойства окна:
    • left , top – координаты (в пикселях) левого верхнего угла окна браузера относительно левого верхнего угла экрана. Значения этих свойств должны быть положительными или равными 0;
    • height , width — высота и ширина рабочей области окна браузера. При указании значений необходимо учитывать, что ширина и высота окна браузера не может быть меньше 100 пикселей;
    • resizable — логическое свойство окна, которое предназначено для включения или выключения возможности изменения размеров окна браузера. Данное свойство принимает следующие значения: yes или 1 , и no или 0 ;
    • scrollbars – логическое свойство окна, которое предназначено для включения или выключения отображение полос прокрутки для содержимого окна браузера. Данное свойство принимает следующие значения: yes или 1 , и no или 0 ;
    • status – логическое свойство окна, которое предназначено для включения или выключения отображения статусной строки браузера. Данное свойство принимает следующие значения: yes или 1 , и no или 0 .
    • Читайте также:  Netinst debian что это

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

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

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

      3. Открыть новое окно, имеющее определённые свойства (top=100, left=100, w >

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

      Метод 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 . А если окно с таким именем существует, то новое окно не открывается, а перезагружается страница по указанной ссылке а этом окне. По умолчанию окна а браузере не имеют внутреннего имени.

      Читайте также:  Роутер на 200 метров

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

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

      Свойство opener

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

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

      Свойство closed

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

      Как открыть все ссылки в блоке #blok_1 и #blok_3 в новой вкладке на js , так чтобы не добавлять никакой код в сами ссылки ?

      2 ответа 2

      Для этих целей существуют события и функция window.open() . Событие соответственно на click . Функция window.open(url, target, params) принимает два параметра, урл новой страницы и ‘target’, это имя новой страницы, обычно для окрытия новой вкладки используют _blank и параметры для новой вкладки, их значения можно посмотреть на MDN.

      Можно сделать это двумя способами.

      Первый – создать функцию, принимающую объект DOM, в котором надо переходить по ссылкам в новом окне, придется вызвать эту функцию для каждого блока, в котором должно быть такое поведение:

      1. создаем обработчик события на саму обертку (в нашем случае это будут #blok_1 и #blok_3 ). На случай, если ссылки могут появиться внутри блока динамически. Можно повесить событие непосредственно на ссылки, дело от этого не изменится;
      2. фильтровать будет только ссылки по их селектору: a:not([href^="#"]) или a[href^="http://"] и a[href^="https://"] ; хочется же, чтобы переход был именно по ссылке, а не по якорю.
      3. в обработчике остановим обработку события по-умолчанию, чтобы переход внутри страницы не был совершен (надо смотреть, чтобы это не повредило общей логики работы сайта) и совершим переход с помощью window.open() ;
      4. соответственно работать с этой функцией так: inNewWindow(document.getElementById(‘blok_1’)) .

      Второй немного лучше, но придется дописать атрибут к элементам.

      1. допишем к элементам, по которым должен быть переход на новую страницу, пучстой data-атрибут, например, data-newwindow ;
      2. выберем все элементы с таким атрибутом и повесим на них такой же обработчик, как и в первом варианте.
      3. тогда придется всего лишь дописать вот это с скрипт:

      Добавить комментарий

      Ваш адрес email не будет опубликован. Обязательные поля помечены *

      Adblock detector