Открытие окон и методы window

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

Более новая информация по этой теме находится на странице 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.open with headers

Can I control the HTTP headers sent by window.open (cross browser)?

If not, can I somehow window.open a page that then issues my request with custom headers inside its popped-up window?

I need some cunning hacks.

5 Answers 5

Can I control the HTTP headers sent by window.open (cross browser)?

If not, can I somehow window.open a page that then issues my request with custom headers inside its popped-up window?

• You can request a URL that triggers a server side program which makes the request with arbitrary headers and then returns the response
• You can run JavaScript (probably saying goodbye to Progressive Enhancement) that uses XHR to make the request with arbitrary headers (assuming the URL fits within the Same Origin Policy) and then process the result in JS.

It might help if you described the problem instead of asking if possible solutions would work.

If you are in control of server side, it might be possible to set header value in query string and send it like that? That way you could parse it from query string if it’s not found in the headers.

Just an idea. And you asked for a cunning hack 🙂

As the best anwser have writed using XMLHttpResponse except window.open , and I make the abstracts-anwser as a instance.

The main Js file is download.js Download-JS

You can’t directly add custom headers with window.open() in popup window but to work that we have two possible solutions

1. Write Ajax method to call that particular URL with headers in a separate HTML file and use that HTML as url in window.open() here is abc.html

here CORS policy can block the request if CORS is not enabled in requested URL.

1. You can request a URL that triggers a server-side program which makes the request with custom headers and then returns the response redirecting to that particular url.

Suppose in Java Servlet(/requestURL) we’ll make this request

call servlet in window.open(‘/requestURL’)

Use POST instead

Although it is easy to construct a GET query using window.open() , it’s a bad idea (see below). One workaround is to create a form that submits a POST request. Like so:

Of course you will need something on the server side to handle this; as others have suggested you could create a «proxy» script that sends headers on your behalf and returns the results.

Problems with GET

• Query strings get stored in browser history,
• can be shoulder-surfed
• copy-pasted,
• and often you don’t want it to be easy to «refresh» the same transaction.

Форум

Справочник

window.open

Синтаксис

Аргументы

Описание, примеры

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

Если параметр strUrl — пустая строка, то в окно будет загружен пустой ресурс about:blank.

В любом случае, загрузка осуществляется асинхронно. Создается пустое окно, загрузка ресурса в которое начнется уже после завершения исполнения текущего блока кода.

Связь между окнами

Метод open возвращает ссылку на новое окно, которая служит для обращения к нему и вызову его методов, если это соответствует ограничениям безопасности Same Origin.

Если окно с именем winName уже существует, то вместо открытия нового окна, strUrl загружается в существующее, ссылка на которое возвращается. При этом строка параметров не применяется.

В случае, когда окно открыть не удалось, например, оно заблокировано штатными Popup-blocker’ами Firefox/IE — вызов open вернет null.
Проверяйте его, если не хотите лишних ошибок в своих скриптах.

Указание пустого strUrl для существующего имени окна — удобный способ получить ссылку на это окно без его перезагрузки.

Если вы хотите открывать новое окно при каждом вызове open() — используйте для winName специальное значение ‘_blank’.

Строка параметров

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

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

Если строка параметров указана, то не перечисленные в ней параметры будут отключены(кроме titlebar/close). Поэтому включите в ней свойства, которые нужны.

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

Если не указана позиция нового окна, то оно откроется со сдвигом в 20-30 пикселей (зависит от браузера) от последнего открытого окна.
Такой сдвиг позволяет посетителю заметить, что открылось новое окно.
Если текущее окно максимизировано, то сдвига не будет: новое тоже будет максимизировано.

Основные кроссбраузерные параметры

Параметры, касающиеся элементов управления окна, могут быть жестко установлены в конфигурации браузера. В этом случае их указание в параметрах open() не даст нужного эффекта.

left/top Расстояние от левой/верхней границы окна операционной системы до границы нового окна. Новое окно не может быть создано за границами экрана height/width Высота/ширина в пикселях внутренности нового окна, включая полосы прокрутки, если они есть. Минимальное значение: 100 menubar Если этот параметр установлен в yes, то в новом окне будет меню. toolbar Если этот параметр установлен в yes, то в новом окне будет навигация (кнопки назад, вперед и т.п.) и панель вкладок location Если этот параметр установлен в yes, то в новом окне будет адресная строка directories Если этот параметр установлен в yes, то в новом окне будут закладки/избранное status Если этот параметр установлен в yes, то в новом окне будет строка состояния resizable Если этот параметр установлен в yes, то пользователь сможет изменить размеры нового окна. Рекомендуется всегда устанавливать этот параметр. scrollbars Если этот параметр установлен в yes, то новое окно при необходимости сможет показывать полосы прокрутки

Форум

Справочник

window.opener

окно, открывшее текущее вызовом window.open

Описание, примеры

Если окно было открыто из другого окна, то оно сохраняет ссылку на него в свойстве window.opener .

Если такого окна нет, то window.opener = null .

Словил непонятный особенность в FF3.6.
Через window.open открываю новое окно. В нем обращаюсь к opener, а он равен undefined. Методом перебора вариантов определил, что в дочернем окне нужно добавить document.domain=document.domain, хотя на других страницах работает без этого. Обе страници из одного домена. Так и не понял почему так.

Видимо, страницы все же были с разных поддоменов.

спасибо за совет. у меня без этой штуки
document.domain=document.domain
были глюки во всех броузерах (FF, IE, Chrome) когда настраивал обработку логина на сайт через аккаунт myspace. (надо было из дочернее окно, где логин происходил, закрыть, а главное перенаправить на ссылку на профиль пользователя)

добавил эту строчку — все ок стало. без этого во всех броузерах ошибки доступа были.

Промучившись с проблемой, я решил использовать обработку ошибок:

try <
window.opener.document.location=url;
>
catch (e) <
alert(e.name + ‘:’ + e.message);
>
в надежде прояснить в чем дело. Сразу же все заработало, и никакой ошибки не появилось. Какой-то это глюк Firefox/

Нужно обратиться к элементу по его ID, причем элемент на самой странице, а скрипт — в iframe. Как это сделать? Я не совсем понял.

Обнаружил, что свойство opener доступно не только при открывании нового окна через window.open, но и при простом открывании его по ссылке типа:

Работает в Фаерфоксе и Хроме, в других не проверял.

Inject an opened window with script

This question asks for a way to open a new window using window.open and then inject it with a script. It was not possible because of cross-domain security issues.

However, my problem is that I want to do the exact same thing, except from the same domain to the same domain. Is this possible?

Note that .write does not solve this problem because it wipes all the html from the page first.

3 Answers 3

You can do something like this:

This also seems to work:

And if for some reason you want to use eval:

What this does (Explanation for the first bit of code. All examples are quite similar):

• Opens the new window
• Gets a reference to the new window’s document
• Creates a script element
• Places all the code you want to ‘inject’ into a function
• Changes the script’s innerHTML to load said function when the window loads, with the window.onload event (you can also use addEventListener ). I used toString() for convenience, so you don’t have to concatenate a bunch of strings. toString basically returns the whole injectThis function as a string.
• Appends the script to the new window’s document.body , it won’t actually append it to the document that is loaded, it appends it before it loads (to an empty body), and that’s why you have to use window.onload , so that your script can manipulate the new document.

It’s probably a good idea to use window.addEventListener(‘load’, injectThis.toString()); instead of window.onload , in case you already have a script within your new page that uses the window.onload event (it’d overwrite the injection script).

Note that you can do anything inside of the injectThis function: append DIVs, do DOM queries, add even more scripts, etc.