HTML, XHTML и CSS на 100%, Квинт Игорь

HTML, XHTML и CSS на 100%

на обложку

Квинт Игорь

Шрифт:

• height – высота окна в пикселах.

• toolbar – если параметр имеет значение yes или 1, окно снабжается стандартной панелью инструментов. Если же значение этого параметра равно no, то панель инструментов в новом окне не отображается.

• location – параметр определяет, будет ли отображаться поле ввода адреса HTML-документа (адресная строка).

• status – отображение строки состояния.

• menubar – отображение строки меню.

• scrollbars – отображение полос прокрутки.

• resizable – если этот параметр

указан как yes или 1, пользователь сможет изменять размер вновь созданного окна.

Все атрибуты параметра config перечисляются через запятую без пробелов и заключаются в одинарные кавычки, поскольку являются подкомандами.

Примечание

Помните, что пробел для браузера означает конец команды.

Теперь рассмотрим примеры сценариев, использующих метод open (листинги 10.7 и 10.8).

Листинг 10.7. Файл okno.html

<html>

<head>

<title>Метод open</title>

</head>

<body>

<!– Маскировка сценария

window.open('okno2.html', 'joe',config='height=250,width=300,toolbar= no,menubar=no,scrollbars=no,resizable=yes,location=no,status=yes')

window.name="main window"

// Конец маскировки сценария –>

</script>

</body>

</html>

Листинг 10.8. Файл okno2.html

<html>

<head>

<title>Метод open</title>

</head>

<body>

<a href="#" TARGET="main window">Yandex</a>

<a href="" onClick="window.close">Щелкните, чтобы закрыть</a>

</body>

</html>

Сценарий в файле okno.html открывает документ okno2. html в новом маленьком окне браузера (рис. 10.7).

Рис. 10.7. Новое окно браузера

Это окно имеет размеры 300 х 250 пикселов, в нем не отображаются меню, панель инструментов, адресная строка и полоса прокрутки. За это отвечают значения атрибутов параметра config, равные no. В новом окне отображается только строка состояния, что определяется атрибутом status=yes. Кроме того, пользователь может изменять размеры нового окна. За это отвечает атрибут resizable=yes.

Обратите внимание на строку window.name="main window". Здесь использовано свойство name объекта Window, а main window – это имя главного (большого) окна. Вместо window.name можно написать self.name. Результат будет тот же самый, поскольку window и self – синонимы.

В новое окно загружается документ okno2.html,

содержащий две ссылки. Одна ссылка загружает главную страницу сайта поисковой системы «Яндекс» в большом окне браузера, имя которому main window. Этого результата мы добились благодаря команде target="main window". Если необходимо, чтобы страница загружалась в маленьком окне, просто напишите j oe вместо main window. Другая ссылка позволяет закрыть маленькое окно благодаря обработчику события onCli ck и методу close: onClick="window.close".

Совет

При открытии новых окон ставьте сценарий ближе к концу HTML-документа. Причина проста: сначала загрузится веб-страница, а потом всплывет окошко. Если команда стоит в начале HTML-документа, то окошко всплывет прежде, чем пользователь увидит вашу страницу. Он может закрыть новое окно, не успев им воспользоваться.

Рассмотрим следующий метод объекта Window – setTimeout. С его помощью вы можете запрограммировать компьютер на выполнение определенных команд по истечении некоторого времени.

При использовании описываемого метода применяется следующий синтаксис: setTimeout ("cmd", timeout). Когда пройдет время, заданное параметром timeout (в миллисекундах), запускается команда JavaScript, определенная параметром cmd.

Пример сценария, содержащего метод setTimeout, приведен в листинге 10.9.

Листинг 10.9. Использование метода setTimeout

<html>

<head>

<title>Метод setTimeout</title>

<!– Маскировка сценария

function timer //функция

{

idTimer=window.setTimeout("alert('Время истекло!')", 3000);

}

// Конец маскировки сценария –>

</script>

</head>

<body>

<form> //форма

</form>

</body>

</html>

Данный HTML-документ содержит сценарий и форму с кнопкой Timer. При нажатии кнопки открывается окно Alert с задержкой в три секунды (рис. 10.8).

Рис. 10.8. Окно Alert с сообщением

Здесь setTimeout – это метод объекта Window. Он определяет интервал времени в 3000 миллисекунд (3 секунды) и команду, которая должна быть выполнена по истечении этого времени. В данном случае это вызов окна с сообщением с помощью метода alert: «alert(Время истекло!)». Обратите внимание, что код на JavaScript должен быть обязательно заключен в кавычки, а время указывается в миллисекундах и без кавычек.