Открытие окон и методы 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:

A new window opened in Internet Explorer displays a blank white page

Symptoms

If you open a new window in Microsoft Internet Explorer 6 or in Internet Explorer 7, the new window displays a blank white page. This symptom also occurs if an HTML page opens a new window in Internet Explorer. Additionally, you receive the following error message if you try to perform a search on the page by using the Find (on This Page) command:

An error has occurred in this dialog.
Error 49: Interface not registered

This article helps you fix the problem.

To have us fix this problem for you, go to the “Fix it for me” section. If you would rather fix this problem yourself, go to the “Let me fix it myself” section.

Fix it for me

To fix this problem automatically, click the Fix this problem link. Then click Run in the File Download dialog box, and follow the steps in this wizard.

Note This wizard may be in English only; however, the automatic fix also works for other language versions of Windows.

Note If you are not on the computer that has the problem, you can save the automatic fix to a flash drive or to a CD, and then you can run it on the computer that has the problem.

Let me fix it myself

To resolve this issue, re-register the DLL files that are related to Internet Explorer. To do this, follow these steps:

Click Start, and then click Run

Type regsvr32 urlmon.dll in the Open box, and then click
OK.

Click OK when you receive the following message:

Форум

Справочник

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, то новое окно при необходимости сможет показывать полосы прокрутки

open new popup window getting a blank page and it is opening in new tab.

We are having an issue with IE 11.0.96000.17031 and update version: 11.0.7(KB2919355) on Windows version 2012.

When we open new popup window getting a blank page and its opening in new tab.

Similarly, the issues on IE 11 with update version: 11.0.7 , 11.0.45 , 11.0.47 and 11.0.49 on this version also.

I have observed that it’s working on some versions IE 11.0.9600.18893CO and Update version: 11.0.50 (KB4056568)

Please let me know if any setting for this or is this bug?

And let me know the base and issues fixed version for IE 11 with windows version 2012.

Replies (8) 

This issue could have been caused by the settings on the Internet Explorer. Some of the issues can be fixed by clearing the cache and cookies and by resetting the Internet Explorer. Please note that resetting Internet Explorer isn’t reversible, and all previous settings are lost after reset.

Clear Cache and Cookies

1. In Internet Explorer, select the Tools button (gear button) below the X button.
2. Select Internet options.
3. Click General tab, and under Browsing history, click the box beside Delete browsing history on exit.
4. Select Delete. and click on Apply and OK.

Please follow this article Change or reset Internet Explorer settings to reset your Internet Explorer.

We will wait for your update.

Was this reply helpful?

Sorry this didn’t help.

Great! Thanks for your feedback.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this reply?

Thanks for your feedback.

Thank you Emmanuel for your response.

I already tried to removing Browser history and C:\Users\Administrator\AppData\Local\Microsoft\Windows\INetCache data also but still it same issue.

Was this reply helpful?

Sorry this didn’t help.

Great! Thanks for your feedback.

How satisfied are you with this reply?

Thanks for your feedback, it helps us improve the site.

How satisfied are you with this reply?

Thanks for your feedback.

Let’s check your PC for any system file corruption that might be causing the issue. System File Checker (SFC) scans the integrity of all protected operating system files and replaces incorrect, corrupted, or damaged versions with the correct versions where possible. When SFC cannot repair the damage, Deployment Image Servicing and Management (DISM) should be run to fix as many errors as possible. Please run the SFC and DISM commands by following the steps below:

1. Type Command Prompt in Cortana search box, then right-click on Command Prompt (Desktop app) from the search results and select Run as administrator.
2. Type sfc /scannow (note the space between «sfc» and «/»).
3. Enter DISM.exe /Online /Cleanup-image /Restorehealth (note the spaces before each «/»).

After you run the SFC and DISM commands, please check again Internet Explorer if the issue is resolved.

Различия в поведении window.open в разных браузерах

При разработке одного сайта столкнулся с необходимостью проверить работу функции window.open в разных браузерах. Результаты решил оформить и выложить, глядишь кому понадобится, а кто и дополнит, что ещё лучше…

Для тестирования использовались: FireFox 3 beta 3, Netscape Navigator 9, Internet Explorer 6, Opera 9 и Konqueror 3.5 (тест Safari отдельно, в конце топика). При этом FireFox 3 тестировался в двух конфигурациях: по умолчанию и c TabMixPlus (с разрешением открывать popup-ы в новых окнах). Рабочая среда: KDE 3.5 на Debian.

1. Вызов без параметров

FireFox 3 (TMP)
Открыл полноразмерное окно, развернутое на весь экран (как и родительское).

FireFox 3
Открыл новую вкладку.

Navigator 9
Открыл полноразмерное окно, развернутое на весь экран (как и родительское).

Opera 9
Открыла новую вкладку.

IE 6
Открыл полноразмерное окно, развернутое на весь экран (как и родительское).

Konqueror
Открыл окно с размером по умолчанию (родительское окно было развёрнуто на весь рабочий стол).

2. Размеры окна

FireFox 3 (и с TMP и без)
Открыли окно с областью просмотра 640×480 пикселей. В окне отображается строка состояния и адресная строка (неактивная).
Само окно превышает заданный размер за счёт строки состояния, адресной строки, заголовка и границ окна. Размеры окна изменяемы.

Navigaror 9 и Konqueror
Открыли окно с областью просмотра 640×480 пикселей. Само окно превышает заданный размер за счёт заголовка и границ окна.
Размеры окна изменяемы.

Opera 9
Открыла окно с областью просмотра 640×480 пикселей. Само окно превышает заданный размер за счёт заголовка и границ окна.
Так же в коне присутствует небольшая панель, при нажатии разворачивающаяся в панель навигации. При этом сокращается область просмотра, а размеры окна не меняются. Размеры окна изменяемы (имеется ввиду пользователем, при помощи мыши).

IE 6
Открыл окно с областью просмотра 640×480 пикселей. Само окно превышает заданный размер за счёт заголовка и границ окна. Размеры окна НЕ изменяемы.

Теперь я задал окну размеры, заведомо превышающие разрешение монитора.

FireFox 3, Navigator 9, Konqueror
Открыли окно, развёрнутое на весь рабочий стол. В FF3 в окне отображается строка состояния и адресная строка (неактивная).

Opera 9
Открыла новую вкладку.

IE 6
Открыл окно, закрывшее собой весь экран, включая все панели (задач, меню и т.д.). Заголовок окна за пределами экрана.

Выводы

1. Все браузеры расценивают заданный размер как размер области просмотра.
2. Реальные размеры окна всегда больше заданных, причём разница варьируется для разных браузеров, за счёт наличия дополнительных панелей.
3. В Internet Explorer 6 нельзя вручную изменить размеры окна. Кстати, это правильное поведение window.open, т.к. все параметры, не указанные в вызове этой функции должны считаться равными «no» (включая resizable). Хотя это и не всегда удобно с точки зрения пользователя.
4. Необходимо следить за размером открываемого окна, т.к. при большом размере в IE6 оно может перекрыть пользователю весь рабочий стол

3. Позиционирование

Следующие на очереди — координаты окна. Для этого существуют две пары свойств — left и top в IE и screenX и screenY для NN.
Поочерёдно я попробовал каждую пару во всех браузерах.

window.open(‘http://www.w3.org/’, ‘popup’, ‘width=320,height=240,left=50,top=50’);

FireFox 3, Navigator 9, IE6, Konqueror
Все четыре браузера поняли свойства left и top и спозиционировали окно относительно верхнего левого угла экрана.
Не смотря на эту точку отсчёта, ни один из браузеров, при top = 0 не смог перекрыть окном панель меню.

Opera 9
Тоже поняла свойства left и top, но позиционировала окно относительно своей панели вкладок (отсчёт идёт от нижнего края).

window.open(‘http://www.w3.org/’, ‘popup’, ‘width=320,height=240,screenX=50,screenY=50’);

Эти свойства поняли только Gecko-барузеры (FF и NN), Opera и IE их проигнорировали.

Интересно поведение при попытке задать позицию явно превышающую размеры экрана.

window.open(‘http://www.w3.org/’, ‘popup’, ‘width=320,height=240,left=2000,top=1000’);

FireFox 3, Navigator 9, Opera
Открыли окно в нижнем правом углу рабочего стола (Opera — своей рабочей области). Окно видно целиком. Панели не перекрыты.

Konqueror
Окрыл окно в верхнем левом углу рабочего стола. Панели не перекрыты.

IE6
Проверить не удалось. IE просто переставал открывать окна до принудительного снятия процесса.

Выводы

1. Для позиционирования окна следует использовать свойства left и top, т.к. их понимают все барузеры.
2. Opera позиционирует окна не относительно экрана, а относительно своей панели вкладок.
3. Лучше стараться избегать ситуаций когда окно не поместится на рабочем столе, т.к. поведение браузеров разнится.

4. Элементы интерфейса

Последними я проверил управление элементами интерфейса (исключив элементы, специфичные для конкретного браузера):

• location — поле для набора URL
• menubar — панель меню
• scrollbars — полосы прокрутки
• status — строка состояния
• toolbar — панель с кнопками Back, Forward, Reload и т.д.

Каждый параметр пробовался как со значением yes, так и no.

FireFox 3

• location — отображается всегда и всегда неактивно, параметр игнорируется
• menubar — отображается главное меню
• scrollbars — появляются полосы прокрутки
• status — игнорируется, строка состояния показывается всегда
• toolbar — строка URL страла активной, появилась панель вкладок и дополнительные панели (WebDeveloper)

Navigator 9

• location — отображается неактивным. Дополнительно отобразилась одна из панелей инструментов (WebDeveloper)
• menubar — отображается главное меню
• scrollbars — появляются полосы прокрутки
• status — появляется строка состояния
• toolbar — строка URL страла активной, появилась панель вкладок и дополнительные панели (WebDeveloper)

Opera 9

• location — отображается активное поле ввода и кнопки «Назад», «Вперёд» и т.д.
• menubar — игнорируется
• scrollbars — появляются полосы прокрутки
• status — игнорируется
• toolbar — игнорируется

IE 6

• location — отображается активное поле ввода, главное меню и кнопки «Назад», «Вперёд» и т.д.
• menubar — отображается главное меню
• scrollbars — появляются полосы прокрутки
• status — появляется строка состояния
• toolbar — отображается главное меню и панель инструментов

Konqueror

• location — отображается всегда и всегда неактивно, параметр игнорируется
• menubar — отображается главное меню и панель инструментов
• scrollbars — появляются полосы прокрутки
• status — появляется строка состояния
• toolbar — отображается главное меню и панель инструментов

Выводы предоставляю делать самим. Хотя на мой взгляд, IE здесь демонстрирует более правильную реализацию функции window.open.

Проверить свой браузер

Safari

(спасибо qnick)
Safari 3.0.4 (5523.15), mac os 10.5.2
От галочки «Блокировать всплывающие окна» поведение не меняется абсолютно. Если ссылки жать вместе с яблоком (принудительное открытие окна в новой вкладке), то все равно появляются новые окна.

Без параметров: размеры по умолчанию, позиция на 32 пикселя (примерно, на глаз) ниже и правее текущего окна (но если нижняя граница текущего окна очень близко находится от нижней границы экрана, то у нового окна top=0), тулбар, скролл и статусная строка в наличии, окно тянется во все стороны

Размеры 640х480: исчезли тулбар, скролл и статусная строка, окно перестало тянуться. Позиция на 32 пикселя ниже и правее текущего (или top=0, см. выше), размеры 640х480 + 32 пиксела заголовка.

Очень большой размер: размер изменился на 1440х900 (разрешение экрана), top=0 независимо от положения текущего окна. Все остальное по прежнему.

Позиционирование: отсчет идет от верхнего левого угла минус меню, т.е.

В стиле Netscape: то же самое

Вне рабочего стола: left=0, top=0

Location: появилась адресная строка и тулбар, скролла нет, размеры менять нельзя.

Menubar: игнорируется, т.е. аналогично размеру 640х480.

Scrollbars: то же, что и размер 640х480, но появился вертикальный скролл

Status: то же, что и размер 640х480, но появился статусбар.

Toolbar: то же, что и location.

Окончанние

Будет очень здорово, если кто-нибудь дополнит тестами на других браузерах и платформах, в первую очередь конечно в Ineternet Explorer 7 под Windows.