Форум

Справочник

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

Button. On Click(EventArgs) Метод

Определение

Вызывает событие Click элемента управления Button. Raises the Click event of the Button control.

Параметры

Данные события. The event data.

Примеры

В следующем примере кода показано, как задать и закодировать обработчик событий для Click события, чтобы отобразить простое сообщение на веб-странице. The following code example demonstrates how to specify and code an event handler for the Click event in order to display a simple message on the Web page.

Комментарии

ClickСобытие возникает при Button щелчке элемента управления. The Click event is raised when the Button control is clicked. Это событие обычно используется, если имя команды не связано с Button элементом управления (например, с кнопкой отправки). This event is commonly used when no command name is associated with the Button control (for instance, with a Submit button).

При возникновении события через делегат вызывается обработчик события. Raising an event invokes the event handler through a delegate. Дополнительные сведения см. в разделе обработка и вызов событий. For more information, see Handling and Raising Events.

Метод OnClick также позволяет производным классам обрабатывать событие, не присоединяя делегат. The OnClick method also allows derived classes to handle the event without attaching a delegate. Это предпочтительная методика обработки событий в производном классе. This is the preferred technique for handling the event in a derived class.

Примечания для тех, кто наследует этот метод

При переопределении метода OnClick(EventArgs) в производном классе нужно убедиться, что вызывается метод OnClick(EventArgs) базового класса, чтобы зарегистрированные делегаты получили событие. When overriding OnClick(EventArgs) in a derived class, be sure to call the base class’s OnClick(EventArgs) method so that registered delegates receive the event.

Button. On Client Click Свойство

Определение

Получает или задает клиентский скрипт, выполняемый при происхождении события Button в элементе управления Click. Gets or sets the client-side script that executes when a Button control’s Click event is raised.

Значение свойства

Скрипт на стороне клиента, выполняемый при происхождении события Button в элементе управления Click. The client-side script that executes when a Button control’s Click event is raised.

Примеры

Проект веб-сайта Visual Studio с исходным кодом можно найти в этой статье: download. A Visual Studio Web site project with source code is available to accompany this topic: Download.

В следующем примере кода показано, как использовать OnClientClick свойство для указания дополнительного клиентского скрипта, выполняемого при Button щелчке элемента управления. The following code example demonstrates how to use the OnClientClick property to specify additional client-side script that executes when a Button control is clicked.

Комментарии

Используйте OnClientClick свойство, чтобы указать дополнительный скрипт на стороне клиента, который выполняется при Button Click возникновении события элемента управления. Use the OnClientClick property to specify additional client-side script that executes when a Button control’s Click event is raised. Скрипт, заданный для этого свойства, подготавливается к просмотру в Button OnClick атрибуте элемента управления в дополнение к предопределенному клиентскому сценарию элемента управления. The script that you specify for this property is rendered in the Button control’s OnClick attribute in addition to the control’s predefined client-side script.

JavaScript — Объект window: открытие и закрытие окон

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

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

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

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

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

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

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

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

• left и top – положение левого верхнего угла окна относительно экрана (значения этих свойств должны быть больше или равны 0);
• height и width — размеры окна (его высота и ширина); основная масса браузеров имеет ограничения на минимальные значения этих свойств (в большинстве случаев – это не меньше 100);
• menubar – во включённом состоянии отображает строку меню;
• toolbar – включает показ кнопок панели инструментов («Назад», «Вперёд», «Обновить» «Остановить») и панель закладок (если она отображается в родительском окне);
• location – определяет нужно ли показывать адресную строку;
• resizable — свойство, которое позволяет включить (yes) или выключить (no) возможность изменения размеров окна;
• scrollbars – предназначено для включения (yes) или выключения (no) полос прокрутки;
• status – определяет нужно ли отображать строку состояния или нет.

Настройки 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 возвращает логическое значение, указывающее закрыто окно или нет.

Как по клику на кнопке открыть страницу в новой вкладке

Как по ссылке открыть страницу в новой вкладке знают все. Добавляем в ссылку атрибут target=»_blank» и радуемся. А вот по клику на кнопке открыть страницу в новой вкладке уже чуть сложнее. Ну нет у кнопки атрибута target.

На днях переносил наши корпоративные самописные сайты на новый хостинг и пришлось в коде сайтов вносить некоторые изменения. В ходе этой работы наткнулся на вот такую задачу — Как по клику на кнопке открыть страницу в новой вкладке. Саму по себе эту задачу я решил уже очень давно, много лет назад, но поскольку в то время я, можно сказать, на этих сайтах и учился web-программированию, то задача, как я убедился была решена не самым оптимальным образом. Менялся дизайн, наполнение, но кодинг в основном оставался прежним. А вот теперь, увидев этот код, я его быстренько оптимизировал, а заодно решил поделиться способом. Ведь многие пытаются что-то сами «прикрутить» к своим сайтам и вполне возможно, что статья кому-то и пригодится.

В случае с ссылками действительно всё просто.

откроет указанную страницу в текущем окне, а

откроет уже в новой вкладке.

Как по клику на кнопке открыть страницу в новой вкладке?

Во-первых, чтобы вообще что-либо открыть по клику на кнопке, которая к тому-же находится не в блоке формы, а сама по себе, надо использовать метод кнопки OnClick.

Например вот так:

В данном случае страница partners.php откроется в текущем окне браузера. Но бывает что надо открыть какую-то страницу в новом окне или вкладке. Как быть? В конструкцию Обновление статьи от 03.10.2019 г.

Да, отдельный JavaScript можно и не использовать. Все современные браузеры поддерживают некоторые скриптовые элементы и можно просто их использовать в коде своей кнопки.

Выглядит это примерно так:

Как видите, использование в OnClick команды window.open с нужной ссылкой — откроет её в новой вкладке. Если использовать этот вариант, то больше ничего не надо. Сам я столкнулся с такой необходимостью буквально сегодня, поэтому и решил дополнить статью этим вариантом.

Вот, собственно и всё. Теперь Вы знаете как по клику на кнопке открыть страницу в новой вкладке. Если кому-то это пригодится — пользуйтесь.