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>
Попробуйте!