Как открыть дочернее окно и работать с ним

Главная > HTML CSS JS > Как открыть дочернее окно и работать с ним

23 января 2012 zabey Написать комментарий К комментариям

Иногда хочется открыть дочернее окно браузера и производить с ним некоторые действия. Вот как можно это сделать. Демо Открываем новое окно:

<a href="javascript:x_open_window()">Демо</a>
<script language="javascript">
 function x_open_window(){
   // открываем новое окно
  var x_window = window.open("","test window");
  // пишем в него содержимое
   x_window.document.write('<html><head></head><body>Тест тест</body></html>');
}
</script>

function x_open_window(){

// открываем новое окно

var x_window = window.open("","test window");

// пишем в него содержимое

x_window.document.write('<html><head></head><body>Тест тест</body></html>');

}

</script>

window.open

Синтаксис window.open

var newWin = window.open(strUrl, winName [, winParams])

Аргументы window.open

strUrl Адрес для загрузки в новое окно, любая адресная строка, которую поддерживает браузер winName Имя нового окна для использования в параметре target форм и ссылок winParams Необязательный список настроек, с которыми открывать новое окно

Описание применения window.open

Метод open создает новое окно браузера , аналогично команде "Новое окно" в меню браузера. Обычно это не вкладка, а именно новое окно, но в некоторых браузерах можно настроить то или иное поведение явным образом. Если параметр strUrl - пустая строка, то в окно будет загружен пустой ресурс about:blank.

Если окно с таким именем уже открыто - то будет просто возвращен его заголовок

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

var params = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes"
window.open("http://ya.ru/", "Yandex", params)

1 2	var params = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes" window.open("http://ya.ru/", "Yandex", params)

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

если строка адреса пустая, то перезагрузки контента не будет. Вернется только ссылка на окно

В случае, когда окно открыть не удалось, например, оно заблокировано штатными Popup-blocker'ами Firefox/IE - вызов open вернет null. Проверяйте его, если не хотите лишних ошибок в своих скриптах. Указание пустого strUrl для существующего имени окна - удобный способ получить ссылку на это окно без его перезагрузки. Если вы хотите открывать новое окно при каждом вызове open() - используйте для winName специальное значение '_blank'.

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

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

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

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

var newWin = window.open("http://javascript.ru",
   "JSSite",
   "width=420,height=230,resizable=yes,scrollbars=yes,status=yes"
)

newWin.focus()

var newWin = window.open("http://javascript.ru",

"JSSite",

"width=420,height=230,resizable=yes,scrollbars=yes,status=yes"

)

newWin.focus()

Заметки

Чтобы закрыть окно - используйте вызов window.close: newWin.close() Чтобы показать новое окно посетителю - используйте вызов window.focus: newWin.focus()