JavaScript для новичков - Окна

ОГЛАВЛЕНИЕ

 

Окна

Открытие окна

Для того, чтобы открыть окно, вам необходимо использовать метод "window.open()":

<form>
<input type="button" value="Click here to see" onclick="window.open('test.htm')">
</form>

Вы можете заменить test.htm любой ссылкой URL.

Размер, панель инструментов, панель меню, полосы прокрутки, место, статус

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

open("URL","name","attributes")

К примеру :

<form>
<input type="button" value="Щелкните здесь, чтобы увидеть"
onclick="window.open('page2.htm','win1','width=200,height=200,menubar')">
</form>

Другой пример, где все атрибуты включены, кроме того, что размер изменен:

<form>
<input type="button" value="Щелкните здесь, чтобы увидеть"
onclick="window.open('page2.htm','win1','width=200,height=200')">
</form>

Вот полный список атрибутов, которые вы можете использовать:

width     height     toolbar
location     directories     status
scrollbars     resizable     menubar

Перезагрузка

Для обновления окна вы можете использовать данный метод:

window.location.reload()

Закрытие окна

Вы можете использовать один из указанных ниже вариантов :

<form>
<input type="button" value="Close Window" onClick="window.close()">
</form>
<a href="javascript:window.close()">Закрыть окно</a>

Загрузка

Основным синтаксисом при загрузке нового содержимого в окно, является:

window.location="test.htm"

Это аналогично следующему коду

<a href="test.htm>Попробуйте это</a>

Давайте предоставим пример, в котором окно подтверждения позволит пользователям выбирать между переходом на два различных сайта:

<script>
<!--
function ss()
{
var ok=confirm('Нажмите "OK" для того, чтобы перейти на страницу yahoo, или "CANCEL", чтобы перейти на hotmail')
if (ok)
location="http://www.yahoo.com"
else
location="http://www.hotmail.com"
}
//-->

</script>

Окно удаленного управления

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

aa=window.open('test.htm','','width=200,height=200')

Придав окну название, к примеру "aa", получите возможность доступа ко всему, что находится внутри данного окна из других окон. Когда нам необходим доступ к данным, находящимся в другом окне, к примеру, записать что-либо в то окно, то необходимо сделать следующее:

aa.document.write("Это тест.")

Теперь давайте рассмотрим пример того, как вы можете изменить фоновый цвет другого окна:

<html><head><title></title></head>
<body>
<form>
<input type="button" value="Open another page"
onClick="aa=window.open('test.htm','','width=200,height=200')">
<input type="radio" name="x" onClick="aa.document.bgColor='red'">
<input type="radio" name="x" onClick="aa.document.bgColor='green'">
<input type="radio" name="x" onClick="aa.document.bgColor='yellow'">
</form>
</body></html>

opener

Используя свойство "opener" , мы может получить доступ к основному окну из только что открытого окна. Давайте создадим основную страницу Main:

<html>
<head>
<title></title>
</head>
<body>
<form>
<input type="button" value="Open another page"
onClick="aa=window.open('test.htm','','width=100,height=200')">
</form>
</body>
</html>

Затем создадим страницу удаленного доступа Remote (в данном примере это test.htm):

<html>
<head>
<title></title>
<script>
function remote(url){
window.opener.location=url
}
</script>
</head>
<body>
<p><a href="#" onClick="remote('file1.htm')">File
1</a></p>
<p><a href="#" onClick="remote('file2.htm')">File
2</a></p>
</body>
</html>

Попробуйте!