Оглавление

17.3. Работа с окнами. Создание нового окна

Метод open()   объекта window позволяет открыть дополнительное окно и поместить в него Web-страницу:
[<Переменная> = ]window.open(<URL>, [<Имя окна>], [<Свойства окна>]);

 

Здесь используются следующие компоненты:
□  <URL> — URL-адрес страницы, которая будет загружена в новое окно;
□  <Имя окна> — имя нового окна;
□  <Свойства окна> — определяет отображаемые элементы в новом окне;
□  <Переменная>  — ссылка  на  объект вновь созданного окна,  которую можно использовать для работы с ним.

 

Свойства окна, передаваемые методу open():
□  width и height задают ширину и высоту создаваемого окна в пикселах (минимум 100);
□  left и top указывают горизонтальную и вертикальную координаты левого верхнего угла создаваемого окна;
□  fullscreen — {yes | no | 1 | 0} — включает (yes или l) или отключает (по или о) полноэкранный режим для создаваемого окна;
□  resizable — {yes | no | 1 | 0} — включает или отключает возможоность изменения размера создаваемого окна;
□   location — {yes | no | 1 | 0} — указывает наличие или отсутствие адресной строки;
□    menubar — {yes | no | 1 | 0} — включает или отключает отображение строки меню;
□    scrollbars — {yes | no | 1 | 0} — задает, отображать или нет полосы прокрутки;
□    status — {yes | no | 1 | 0} — указывает наличие или отстутствие строки состояния;
□    titiebar — {yes | no | 1 | 0} — включает или отключает отображение заголовка у создаваемого окна;
□    toolbar — {yes | no | 1 | 0} — включает или отключает отображение панели инструментов:

□    replace — {yes | no | 1 | 0} — задает режим сохранения адресов в истории: если указано yes или 1, то адрес открываемого документа заменит в списке истории адрес документа, находящегося в текущем окне;
□    channeimode — {yes | no | 1 | 0} — задает режим отображения панели каналов: если указано yes или 1, то создаваемое окно будет отображаться с панелью каналов.


Приведем пример создания нового окна и управления его местоположением и размерами. Создадим два файла: test.html (листинг 46)— страницу, открывающую новое окно, и doc1.html (листинг 47) — открываемый в новом окне документ.

 

Листинг 46. Содержимое файла test.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Открытие нового окна</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
var myWindow;
function f_open() { // Открываем окно
   var str = "menubar=0,location=0,resizable=0,scrollbars=0,";
   str += "status=0,titlebar=no,toolbar=0,left=0,";
   str += "top=0,width=500,height=500";
   myWindow = window.open("doc1.html", "window1", str);
}
function f_close() { // Закрываем окно
   var div1 = document.getElementById("div1");
   if (!myWindow.closed) {
      myWindow.close();
      div1.style.display = "none";
   }
   else {
      window.alert("Окно уже было закрыто");
      div1.style.display = "none";
   }
}
function f_resize() { // Задаем размер окна
   var div1 = document.getElementById("div1");
   var txt1 = document.getElementById("txt1");
   var txt2 = document.getElementById("txt2");
   var p = /^[0-9]{3}$/;
   if (p.test(txt1.value) && p.test(txt2.value)) {
      if (!myWindow.closed) {
         myWindow.resizeTo(txt1.value, txt2.value);
      }
      else {
         window.alert("Окно было закрыто раньше");
         div1.style.display = "none";
      }
   }
   else {
      window.alert("Необходимо ввести число из 3 цифр");
   }
}
function f_move() { 
   // Изменяем местоположение относительно текущего положения окна
   var div1 = document.getElementById("div1");
   var txt3 = document.getElementById("txt3");
   var txt4 = document.getElementById("txt4");
   var p = /^\-?[0-9]+$/;
   if (p.test(txt3.value) && p.test(txt4.value)) {
      if (!myWindow.closed) {
         myWindow.moveBy(txt3.value, txt4.value);
      }
      else {
         window.alert("Окно уже было закрыто");
         div1.style.display = "none";
      }
   }
   else {
      window.alert("Необходимо ввести число");
   }
}
//-->
</script>
</head>
<body>
<div>
 <input type="button" value="Создать окно" onclick="f_open();"><br>
 <div style="display: none" id="div1">
 <input type="button" value="Закрыть созданное окно" 
 onclick="f_close();"><br>
 X: <input type="text" id="txt1"><br>
 Y: <input type="text" id="txt2"><br>
 <input type="button" value="Задать размеры окна" 
 onclick="f_resize();"><br>
 X: +- <input type="text" id="txt3" value="0"><br>
 Y: +- <input type="text" id="txt4" value="0"><br>
 <input type="button" value="Изменить местоположение окна" 
 onclick="f_move();">
 </div>
</div>
</body>
</html>

 

Листинг 47. Содержимое файла doc1.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
         "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
 <title>Новое окно</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script type="text/javascript">
<!--
function f_closed() {
   window.close();
}
function f_unload() {
   opener.document.getElementById("div1").style.display = "none";
}
function f_load() {
   opener.document.getElementById("div1").style.display = "block";
}
//-->
</script>
</head>
<body onunload="f_unload();" onload="f_load();">
<div><h1>Заголовок нового окна</h1>
<input type="button" value="Закрыть окно" onclick="f_closed();">
</div>
</body>
</html>

 

Откроем в Web-браузере файл test.html и нажмем кнопку Создать окно. В итоге отобразится новое окно и станут доступными дополнительные возможности:
□  кнопка, позволяющая закрыть открытое окно;
□  кнопка Задать размеры окна и два поля, позволяющие задать новый размер открытого окна;
□  кнопка Изменить местоположение окна и два поля, позволяющие задать смещение окна относительно текущего местоположения (может принимать отрицательные значения).

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити