Объекты window и document в Java Script

Объектная модель JavaScript предоставляет возможность работы с объектами, зависящими от браузера (window, navigator, location и т.д.) и объектами, относящимися к HTML-документу (document, forms, frames и т.д.);

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

clip_image002

Объект window является объектом верхнего уровня в иерархии JavaScript. Ссылки self и window являются синонимами для текущего окна. Вы можете закрыть текущее окно, используя window.close() или self.close(). Ссылка top указывает на самое верхнее окно, а parent ссылается на окно, содержащее frameset. Когда вы открываете или закрываете окно внутри события, необходимо определить window.open() или window.close() вместо open() или close(), так как вызов close()

В следующем примере рассмотрим использование метода window.open() для открытия минимизированного окна.

<!– пример # 5: минимизация окна и его удаление–>

<html> <head>

<title> Минимизация окна </title>

<script type="text/JavaScript">

function makeicon()

{

window.open("pr1.htm","icon", //открытие окна

"resizable=yes,scrollbars=yes,width=50,height=70");

window.close(); //закрытие старого окна

}

</script>

</head><body>

<h1>minimize page</h1>

<form name=formicon>

<input name=ibutton type=button value=mini onClick="makeicon()">

</form>

</body></html>

Метод open() открывает новое окно web-браузера. Синтаксис:

[windowVar=][window].open("URL", "winName", "windowFeatures"])

windowVar – имя нового окна; URL определяет URL, открываемый в новом окне; winName – имя окна; windowFeatures – список через запятую любых из следующих опций или значений:

toolbar[=yes | no] – создает стандартные рабочие инструменты с такими кнопками, как "Back" и "Forward";

location[=yes | no] – создает поле ввода Location;

directories status[=yes | no] – создает строку состояния внизу окна;

menubar[=yes | no] – создает меню вверху окна;

scrollbars[=yes | no] – создает горизонтальную и вертикальную прокрутки, когда документ больше, чем размер окна;

resizable[=yes | no] – позволяет пользователю изменять размер окна;

width=pixels,height=pixels – размеры окна в пикселях.

Опции разделяются запятой. Не делайте пробелов между опциями!

Следующие объекты являются наследниками объекта window: document, frame, location.

Методы: alert(), confirm(), prompt(), open(), close(), setTimeout(), ClearTimeout(). События: onLoad, onUnload .

В систему введено свойство opener, которое определено для текущего окна или фрейма, а методы blur и focus распространены на работу с окнами. Свойство opener определяет окно документа, который вызвал открытие окна текущего документа. Свойство определено для любого окна и фрейма. Если нужно выполнить некоторые действия по отношению к окну, открывшему данное окно, то можно использовать выражение типа: window.opener.[method]. Например, если требуется закрыть окно-предшественник, то можно выполнить метод close(): window.opener.close()

Можно менять и другие свойства объектов в окне-предшественнике. Например, для окна-предшественника определить голубой цвет в качестве цвета фона: window.opener.document.bgColor =’cyan’

Следующий пример переназначает для текущего окна окно-предшественник:

window.opener= new_window

Объект Document

Объект Document содержит ряд свойств и методов, позволяющих изменять сам документ. В следующем примере используется массив all, содержащий все элементы документа для вывода списка используемых на странице тегов.

<!–пример # 6: список используемых на странице тегов –>

<html> <head>

<title> Список используемых на странице тегов </title>

<script type="text/javascript">

function findtags()

{var tag;

var tags="страница содержит следующие теги";

for(i=0;i<document.all.length;i++)

{tag=document.all(i).tagName;

tags=tags+"\r"+tag;}

alert(tags);

return tags;}

</script>

</head>

<body onload="findtags()">

<h2 onMouseover="findtags()">Вывод списка используемых на

странице тегов в окно предупреждений </h2>

</body> </html>

<!– пример # 7: изменение фона документа при выборе кнопки – цвета с помощью свойства bgColor объекта Document –>

<html> <head>

<title>bgcolor</title>

</head>

<body text=000000 bgcolor=ffffff>

<table border=0 align=center>

<tr><td><form>

<input type=button value="красный"

onClick= "document.bgColor =’ff0000’" >

<input type=button value="желтый"

onClick="document.bgColor =’ffff00’">

<input type=button value="синий"

onClick="document.bgColor= ‘0000ff’">

<input type=button value="голубой"

onClick="document.bgColor= ’87ceeb’">

</form></td>

</table>

</body> </html>

Вы можете следить за любыми ответами на эту запись через RSS 2.0 ленту. Вы можете оставить ответ, или trackback с вашего собственного сайта.

Оставьте отзыв

XHTML: Вы можете использовать следующие теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

 
Rambler's Top100