Меню
раздел: Окна js

Окна JavaScript (окно js), как открыть новое окно js, закрыть окно js, размеры окна js

структура объектов js На рисунке изображена основная иерархия объектов document, который в нашем случае является HTML страницей (но это может быть и текстовый документ, и документ любого типа) он размещается в окне браузера, - это окно и есть объект window, - в нём помещается то, что управляется браузером.

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

В этой статье рассмотрены основные свойства, методы и обработчики событий объектов window, location. Среди них: Создание окна js window.open(), объект js location, свойство window.status

С помощью этих и других методов и обработчиков можно создать новое окно с заданными параметрами, управлять его фунциями и элементами: строка состояния, панель инструментов, внешний вид и др. управление которыми не поддерживается средствами JavaScript в главном окне браузера.

Создание окна js и его размеры

Метод, с помощью которого можно генерировать новые окна — window.open() он вызывается сценарием который запускается из главного окна браузера.
Само главное окно средствами JavaScript не создаётся.

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

Рассмотрим некоторые особенности использования метода window.open() .
Чтобы открыть новое окно js с заданными размерами с отображенным документом index.html, расположенным в той же папке на сервере, в которой хранится текущая страница.
var subWindow = window.open("index.html","ind","height=200,width=300")
Обратите внимание на то, что:
1.В приведенном выше коде используется оператор присваивания.
2.Параметры окна, его размеры ("index.html","ind","height=200,width=300") должны быть указаны без пробелов-т.е. в строке с указанием параметров открытия нового js окна вообще не должно быть пробелов.

Рассмотрим оператор присваивания subWindow - при запуске метода window.open() не только открывается новое окно согласно использованным параметрам, но также создается ссылка на новое окно т.е. этот метод возвращает значение — в данном случае это ссылка на объект.
Значение, возвращаемое методом, присваивается переменной.

Теперь эта переменная может использоваться как ссылка на второе окно. Если нужно получить доступ к одному из его свойств или методов, то можно использовать указанную ссылку как часть полной ссылки. Например, для того чтобы закрыть окно js прямо из сценария главного окна данное подокно, можно воспользоваться методом close().
subWindow.close()
Если в сценарии главного окна использовать записи window.close(), self.close() или просто close(), то будет закрыто главное окно, а вовсе не дополнительное. Поэтому для обращения к другим окнам следует использовать ссылку на нужное окно как часть общей ссылки. Этот момент важен при составлении сценариев - если необходимо, чтобы переменная, содержащая ссылку на дополнительное окно, была доступна до тех пор, пока главный документ загружен в браузер. Чтобы обеспечить это, следует объявлять данную переменную как глобальную, не внутри функции. Можно использовать одну функцию, чтобы открывать окна, а другую для их закрытия.

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

Если окно было при этом "скрыто" за основным, то для его отображения можно использовать меню Window (Окно) браузера. В листинге 1 переменная newWindow объявлена как глобальная, поэтому обе функции makeNewWindow() и closeNewWindow() без особых проблем получают к ней доступ.

Если переменная объявляется без присвоения ей значения, то по умолчанию оно равно null.
Значение null интерпретируется как эквивалентное false в условном операторе.
С другой стороны, наличие в условном операторе любого ненулевого значения интерпретируется как true.


В функции closeNewWindow() перед использованием метода закрытия close() сначала проверяется, было ли вообще создано новое окно. Затем, для выполнения очистки, переменной newWindow присваивается значение null, так что при повторном щелчке на кнопке Close (Закрыть) закрытие уже несуществующего окно не происходит.

Листинг 1. Ссылка на объекты окна.

<HTML>
<HEAD>
<TITLE>Window Opener and Closer</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var newWindow
function makeNewWindow() {
newWindow = window.open("","","HEIGHT=300,WIDTH=300") }
function closeNewWindow() {
if (newWindow) {
newWindow.close();
newWindow = null;
} }
</SCRIPT> </HEAD> <BODY> <FORM>
<INPUT TYPE="button" VALUE="Create New Window" onCiick="makeNewWindow() ">
<INPUT TYPE="button" VALUE="Close New Window" onClick="closeNewWindow()">
</FORM>
</BODY>
</HTML>


В листинге 3 сценарий создает подокно, в которое записывается целый документ, сгенерированный сценарием. Чтобы ссылка на новое окно была доступна для всех функций, переменную newWindow объявляют как глобальную.
Сразу после того как страница загружена, обработчик события onLoad вызывает функцию makeNewWindow().
Эта функция создает пустое подокно. Третьему параметру метода window.open() добавлено свойство, дающее инструкцию строке состояния подокна на отображение данных. Кнопка на странице используется для вызова метода subWrite. Первым заданием, которое он выполняет, является проверка свойства closed подокна. Это свойство (которое введено только в последних версиях браузеров) возвращает значение true, если окно, на которое сделана ссылка, закрыто. Если это так (пользователь самостоятельно закрыл окно), то будет вызвана функция makeNewWindow() и окно будет снова открыто.

При открытом окне будет вызвано в виде строчной переменной новое содержимое.
Как и в листинге 2, содержимое записывается в один подход (хотя это и не является обязательным для отдельного окна) , после чего сразу вызывается метод close(). Здесь обратите внимание на важную особенность: как в методе write(), так и в методе close() подокно задается в явном виде.

Листинг 3. Использование метода document.wite() с другим окном

<HEAD>
<TITLE>Writing to Subwindow</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var newWindow
function makeNewWindow () {
newWindow = window, open (".", "", "status,height=200,width=300") } function subWrite() {
// Создается новое окно в том случае, если кто-то его закрыл
if (newWindow.closed) { makeNewWindow()
}
// Выведение окна на передний план
newWindow.focus()
// Вызов содержимого для нового окна
var newContent = "<HTML><HEAD><TITLE>A New Doc</TITLE></HEAD>"
newContent += "<BODY BGCOLOR=' coral '><Hl>This document is brand new. </Hl>"
newContent += "</BODY></HTML>"
// Запись HTML в новый документ окна
newWindow.document.write(newContent)
newWindow.document.close() // Закрытие потока }
</SCRIPT> </HEAD>
<BODY onLoad="makeNewWindow()">
<FORM>
<INPUT TYPE="button" VALUE="Write to Subwindow" onClick="subWrite()">
</FORM>
</BODY>
</HTML>

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

Получение доступа к свойствам и методам окна

В сценарии ссылки на свойства и методы объекта window можно реализовать разными способами. Наиболее общим и логическим подходом является тот, в котором задается непосредственное обращение к объекту window:
window.propertyName
window.methodName([параметры])
К объекту window часто обращаются с помощью синонима. Делается это в тех случаях, когда в сценарии используются ссылки на окно, содержащее текущий документ. Синонимом является ключевое слово self.

В таких случаях ссылки выглядят следующим образом:
self.propertyName
self.methodName([параметры])
Использовать подобные ссылки можно по собственному усмотрению.
Однако целесообразно задавать ссылки с помощью self в сложных сценариях, в которых задействовано несколько фреймов или окон. Т.е. идентификатор self, используется для обозначения того текущего окна, в котором находится документ с данным сценарием. А это, в свою очередь, делает сценарий более читабельным.

Как уже отмечалось, поскольку объект window всегда присутствует "на месте" при запуске сценария, то в ссылке на объекты внутри текущего окна его название можно опускать. В качестве примера ниже приведена синтаксическая модель обращения к свойствам и методам текущего окна.
PropertyName
methodName([параметры])

Свойство window.status в окнах javascript

Строка состояния в нижней части окна браузера при наведении на нее указателя мыши обычно отображает адрес URL ссылки. При загрузке документа, инициализации аплетов Java и подобных действиях в этой области отображаются другие сообщения.
Но, с помощью JavaScript можно сделать так, что в определенные моменты в строке состояния будут отображаться собственные сообщения разработчика страницы, которые предоставляют полезную для пользователя информацию.
Например, вместо того чтобы отображать адрес URL ссылки, можно вывести дружественное, доступное описание страницы (или комбинацию первого и второго, чтобы удовлетворить самые изысканные запросы).
Присвоить свойству window.status другое текстовое значение можно в любое время.
Чтобы заставить текст в строке состояния изменяться каждый раз при наведении на ссылку указателя мыши, следует задать обработчик события onMouseOver для объекта ссылки. В JavaScript такое поведение задается крайне редко, однако в этом случае к таким мерам приходится прибегать, чтобы сценарий успешно перепрограммировал содержимое строки состояния.
Поскольку свойство window.status устанавливается просто, наиболее общий подход для управления строкой состояния — это запуск в внутри дескрипторов операторов обработчика события. Это удобно при управлении небольшими сценариями, поскольку не требует определения отдельных функций или добавления дескрипторов <SCRIPT> на страницу. В дескриптор <А> оператор обработчика события добавляется без предварительного задания дескриптора сценария.

<a href="http://home.netscape.com" onMouseOver= "window.status='Visit the Netscape Home page (home.netscape.com)'; return true"> Netscape</a>

Обратите особое внимание на операторы, используемые в обработчике события onMouseOver
Имеются в виду:

window.status='Visit the Netscape Home page (home.netscape.com)' return true

При запуске этих операторов внутри обработчика события нужно разделять их точкой с запятой. Важно даже то, что весь набор операторов заключен в двойные кавычки (" . . . "). Чтобы вставить в двойных кавычках строку, присвоенную в качестве значения свойству window.status, следует заключить эту строку в одинарные кавычки ('...').

Объект Location

Объект location содержит адрес URL, загруженного в окне документа. В состав URL входят сведения о протоколе (таком, как http://) и названии узла (например www.ya.ru). Получать отдельный доступ ко всем этим элементам можно как к обычным свойствам объекта location.
Но, как правило, практический интерес представляет только одно свойство —href, которое определяет URL полностью. Ссылаться на другие страницы сценарий сможет только тогда, когда правильно задано свойство location.href. Например:

location.href = "http://www.my.com"


Если загружаемая страница будет находиться в другом окне или фрейме, то ссылка на окно должна содержать его адрес.
Например, если сценарий открывает новое окно и присваивает на него ссылку переменной newWindow, то оператор, загружающий страницу в подокно, будет выглядеть следующим образом:

newWindow.location.href = "http://my.com"


Другие другие свойства location приведены в таблице ниже :

Свойство Описание Пример
hash часть URL, которая идет после символа решетки '#', включая символ '#' #test
host хост и порт www.google.com:80
href весь URL http://www.google.com:80/search?q=javascript#test
hostname хост (без порта) www.google.com
pathname строка пути (относительно хоста) /search
port номер порта 80
protocol протокол http:
search часть адреса после символа ?, включая символ ? ?q=javascript

Т.е. предположим, что браузер отображает страницу, расположенную по адресу: http://jsbeginning.travelpalitra.com:80/y/dir/page?window#marks
Тогда свойства объекта location примут следующие значения:


window.location.href = http://jsbeginning.travelpalitra.com:80/y/dir/page?window#marks
window.location.protocol = http;
window.location.hostname = jsbeginning.travelpalitra.com:;
window.location.host = jsbeginning.travelpalitra.com::80;
window.location.port = 80
window.location.pathname = /r/dir/;
window.location.search = window;
window.location.hash = marks;

Например если необходимо получить весь URL и вывести его в alert() - используем свойство href:

var a=window.location.href;
alert(a);

Методы объекта location
assign(url)
загрузить документ по данному url
reload([brel])
перезагрузить документ по текущему URL. Аргумент brel - булево значение, если оно true, то документ перезагружается всегда с сервера, если false или не указано, то браузер может взять страницу из своего кэша.
replace(url)
заменить текущий документ на документ по указанному url. Разница, по сравнению с assign() заключается в том, что после использования replace() страница не записывается в истории посещений. В частности, это значит, что посетитель не сможет использовать для возврата кнопку браузера "Назад".
toString()
возвращает строковое представление URL для объекта Location


Вопросы от пользователей:
Вопрос:
Приветствую! Хотел бы задать вопрос я создаю окно newWindow = window.open("http://site.ru","gg") ; но при попытке обратится к его содержимому так newWindow.document.body.innerHTML выдаётся ошибка в тоже время, когда создаётся пустое окно newWindow = window.open("","gg") ; Изменить содержимое и считать - получается я так понемаю, это правило безопасности джаваскрипт. чтобы нельзя было из одного окна менять другие?
Ответ:
Правила безопасности http://code.google.com/p/browsersec/wiki/Part2#Same-origin_policy не разрешат внести изменения в другое окно в том случае если в это окно грузится файл из другого домена , а если из этого же самого домена - то , изменения разрешены. Вот тут http://travelpalitra.com/1.html рабочий пример ( посмотрите в Firebug какая ошибка во втором случае ). Можно также менять содержимое родительских окон из дочерних окон.


Рассмотрим два случая в первом Вы меняете текст в новом окне в которое загружен файл лежащий на том же домене что и родительское окно из которого создано это новое окно ошибки в этом случае не возникает.

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

Исходный код примера файл travelpalitra.com/1.html :

<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
 <META NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW">
</head>
<body>

<script type="text/javascript">


function makeNewWindow()
{
winchlildren = window.open("http://travelpalitra.com/2.html","winchlildren","HEIGHT=300,WIDTH=300")
}


function MakeNewWindow_AnotherDomain()
{
// ссылка на наш объект  window
winchlildren = window.open("http://jsbeginning.travelpalitra.com/2.html","winchlildren","HEIGHT=300,WIDTH=300")
}


function Changetxt()
{
// обращение по нашей ссылке к созданому нами окну js
winchlildren.document.body.innerHTML='Hi';

// так тоже можно обращаться!  /////
/// winchlildren.document.getElementById("greeting").innerHTML='Hello';
/**************************************************************************/
}

</script>

 <br /><br />
<a href="#"  onClick="makeNewWindow()"   id='crnewwin'>
Создать новое окно и загрузить в это новое окно файл из того же домена, что и файл (родитель) из которого создаётся новое окно - на travelpalitra.com</a> <br /><br /> <a href="#" onClick="MakeNewWindow_AnotherDomain()" id='crnewwinad'> Загрузить в новое окно файл из другого домена jsbeginning.travelpalitra.com</a> <br /><br /> <p style="background-color:#D7FFD7;padding:5px;"><a href="#" onClick="Changetxt()" id='newtxt'> Изменить текст в новое окне</a> </p> </body> </html>

Исходный код файл travelpalitra.com/2.html :

<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
<div id='greeting'>Привет</div>
</body>
</html>



Исходный код файл http://jsbeginning.travelpalitra.com/2.html:
<html>
<head>
<META http-equiv="content-type" content="text/html; charset=windows-1251">
</head>
<body>
<br /><br /><b>jsbeginning.travelpalitra.com</b><br />
<div id='greeting'>Привет</div>
</body>
</html>





Ваши вопросы присылайте по адресу mailto.jsbeginning@gmail.com они, вместе с ответами, будут опубликованы на сайте.
Укажите к какому разделу сайта относится Ваш вопрос также Ваш ник или имя.