Глаза страшат, а руки делают

ЧАСТЬ ВТОРАЯ


15. Объект Window (продолжение)
методы open(), close()

  • метод open() объекта window;
  • метод open() объекта document;
  • о пользе атрибута name;
  • метод close().

Ну что, берём сапоги-скороходы? 43 номер? Или предпочитаете ковёр-самолёт? Вот я Вам и продемонстрировал, как не надо пользоваться методом open(). Знакомо?

Культурнее было бы сделать так (нажмите на эту ссылку и посмотрите).

Два метода open()

С помощью метода open() можно открыть новое окно. В нём может быть или уже существующий документ с указанным адресом, или документ, сгенерированный «на лету» — временное окошко, которое создаётся при вызове метода и перестаёт существовать после закрытия.

Наша «скатерть-самобранка» сгенерирована в функции с использованием заготовленной картинки. Окно сделано в стиле обычных всплывающих окон: заданного и неизменяемого размера, без меню браузера, строки состояния и т.п.

Прежде чем приступим к разбору функции, обращу Ваше внимание на то, что метод open() применяется не только к объекту window, но и к его дочернему объекту document. Но аргументы у этих методов-тёзок разные.

Метод open() объекта window

Синтаксис

[WindowVar =][window].open("URL", "windowNAME", ["windowFeatures"])

Значения в квадратных скобках не обязательные.

WindowVar = — какое-либо имя переменной, на которую можно назначить метод.

window — объект window, который вызывает метод. Мы знаем, что этот «верховный» объект может быть опущен.

"URL" — адрес окна. Если мы открываем существующее окно, то указываем здесь его адрес (в кавычках). Если мы создаём окно «на лету», то ставим плейсхолдер — пустые кавычки.

"windowNAME" — уникальное имя окна. Для чего это нужно, объясню чуть ниже. Если мы не хотим задавать имя, то опять же ставим плейсхолдер в виде пустых кавычек.

"windowFeatures" — параметры окна: размер, наличие/отсутствие панели управления, строки состояния и т.д. Можно не указывать и даже пустых кавычек не ставить. Тогда окно откроется в стандартном виде браузера, как по любой ссылке.

Составляющие аргумента "windowFeatures"

Эти составляющие фактически являются свойствами создаваемого окна.

Из них вписываются только те, которые нужны. Между собой они разделяются запятыми, кавычки — одни, общие для всех. Здесь указываются не только значения, но и имена свойств, поэтому последовательность их внутри кавычек не имеет значения, а также не требуется никаких плейсхолдеров для пропущенных свойств.

Некоторые из этих свойств добавлялись в новых версиях JavaScript, какие-то, наоборот, исчезали. В разных справочниках встречаются немного разные наборы. Я постараюсь охватить все, какие сумел разыскать, но для подробного выяснения работы некоторых из них всё равно необходим Ваш эксперимент.

Все наиболее употребительные свойства я выделяю красным цветом, а неясные пока мне самому — синим.

Для следующих десяти составляющих указываются конкретные значения в пикселях:

Свойство

Значение

Описание

width

Число

ширина окна, например: width=554.

innerWidth

Число

ширина внутренних границ окна окна.
Это свойство появилось в JavaScript 1.2 для замены width. Может быть полезно при отображении картинок без текста (с графическим файлом в аргументе URL), поскольку некоторые браузеры включают в width и рамки обозревателя.

outerWidth

Число

Только для Netscape и Mozilla
ширина внешних границ окна окна.
Это свойство появилось в JavaScript 1.2 в паре с innerWidth.

height

Число

высота окна, например: height=510.

innerHeight

Число

высота внутренних границ окна окна, аналогично innerWidth.
Это свойство появилось в JavaScript 1.2.

outerHeight

Число

Только для Netscape и Mozilla
высота внешних границ окна окна.
Это свойство появилось в JavaScript 1.2 в паре с innerHeight.

left

Число

левая граница окна относительно основного окна браузера, например: left=100 (отступ от левого края на 100 пикселей).

screenX

Число

левая граница окна относительно левого края всего экрана, независимо от положения основного окна браузера.
Это свойство появилось в JavaScript 1.2.

top

Число

верхняя граница окна относительно основного окна браузера, например: top=0 (положение окна точно по верхнему краю).

screenY

Число

верхняя граница окна относительно вершины всего экрана, независимо от положения основного окна браузера.
Это свойство появилось в JavaScript 1.2.

Наиболее употребительными из них являются четыре: width, height, left и top

Для остальных используются булевы значения: yes|no, 1|0 или true|false.

Свойство

Значение

Описание

alwaysLowered

yes|no, 1|0, true|false

Создает окно браузера, которое всегда помещается ниже других окон, независимо от того, является ли оно активным.
Это свойство появилось в JavaScript 1.2.

alwaysRaised

yes|no, 1|0, true|false

Если значение равно yes, создает окно браузера, которое помещается выше других окон, независимо оттого, является ли оно активным.
Это свойство появилось в JavaScript 1.2.

channel mode

yes|no, 1|0, true|false

Показывает элементы управления Channel (так написано в самоучителе Дунаева. Что это означает, пока не понял).

copyhistory

yes|no, 1|0, true|false

Как Вы знаете, в браузерах есть стрелочки назад-вперёд, которые заполняются данными по мере Вашего блуждания по сайтам. Если открыть новое окно с данным параметром, то все данные о посещениях, которые накопились в главном окне, перейдут и в дочернее.

dependent

yes|no, 1|0, true|false

Если значение равно yes, создает дочернее окно из текущего окна; в Windows дочернее окно в панели задач не появляется. Дочернее окно закрывается одновременно со своим родительским окном.
Это свойство появилось в JavaScript 1.2.

directories

yes|no, 1|0, true|false

Только для Netscape и Mozilla
при значении 1, yes или true показывает дополнительную панель инструментов

fullscreen

yes|no, 1|0, true|false

разворачивает окно на весь экран

location

yes|no, 1|0, true|false

наличие или отсутствие текстового поля для ввода интернет-адреса (находится наверху, там же, где тулбар).

menubar

yes|no, 1|0, true|false

наличие или отсутствие меню («файл», «правка» и т.д.).

resizeable

yes|no, 1|0, true|false

включить/отключить возможность менять размеры окна мышкой.
Внимание! Если Вы определите слишком маленькие размеры окна и поставите scrollbars=0 и resizable=0, то часть содержимого безвозвратно останется за пределами обзора.

scrollbars

yes|no, 1|0, true|false

наличие или отсутствие полос прокрутки.

status

yes|no, 1|0, true|false

наличие или отсутствие строки состояния (серая полоска в самом низу окна браузера).

toolbar

yes|no, 1|0, true|false

наличие или отсутствие тулбара, то есть кнопок с инструментами. Например, окно без тулбара можно определить как toolbar=no, toolbar=0 или toolbar=false.

z-lock

yes|no, 1|0, true|false

Создает новое окно браузера, которое не всплывает поверх других окон при помещении в фокус.
Это свойство появилось в JavaScript 1.2.

Теперь можете ещё раз нажать на нашу ссылку и исследовать «скатерть-самобранку». Там все булевы параметры по нулям.

Метод open() объекта document

Если мы создаём окно «на лету» — то есть в аргументе "URL" стоят пустые кавычки, мы должны указать, что же всё-таки будет содержаться в нашем окне.

Всё содержимое (текст, картинки и пр.) указывается в аргументе метода document.open().

Синтаксис

document.open (["mimeType"])

Аргумент ["mimeType"] не обязателен. То есть если мы ничего не укажем, окно всё равно откроется. Но — пустое. Если же мы хотим открыть окно с содержимым, то в этом аргументе надо указать для него код HTML в виде строки, как мы это делали в методе document.write(). И точно так же нельзя разбивать строку.

Если задать для нового окна переменную, то можно использовать document.open() без аргумента, а потом последовательно записать в документ данные, многократно используя document.write():

function openwindow(wd,ht) {
var
myWin, name, param;
/* Записываем в переменную составляющие аргумента windowFeatures.
Height и Width будем настраивать при вызове функции, остальные свойства задаём явно. */

param = "width=" + wd + ",";
param = param + "height=" + ht + ",";
param = param + "top=0,";
param = param + "left=0,";
param = param + "toolbar=0,";
param = param + "status=0,";
param = param + "menubar=0,";
param = param + "location=0,";
param = param + "scrollbars=0,";
param = param + "resizable=0,";
/* открываем само окно */
myWin=window.open("", name, param);
/* а теперь открываем и формируем документ */
myWin.document.open()
myWin.document.write("<html><head><title>Название документа</title><style type='text/css'>p {font-family: Verdana; color: #400000; text-align: center; margin: 3px 6px 3px 6px; font-size: 80%;}</style></head>");
myWin.document.write("<body>");
myWin.document.write("....."); //первый фрагмент кода html
myWin.document.write("....."); //второй фрагмент кода html
myWin.document.write("....."); //и т.д.
myWin.document.write("</body></html>");
/* чистка мусора: окно уже открыто, данные документа можно очистить из памяти */
myWin.document.close();
}

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

param = param + "top=0,";
param = param + "left=0,";
param = param + "toolbar=0,";
param = param + "status=0,";
param = param + "menubar=0,";
param = param + "location=0,";
param = param + "scrollbars=0,";
param = param + "resizable=0,";

Или совсем кратко:

param += "top=0,";
param += "left=0,";
param += "toolbar=0,";
param += "status=0,";
param += "menubar=0,";
param += "location=0,";
param += "scrollbars=0,";
param += "resizable=0,";

Можете взять этот приём на вооружение.

Зачем нужен аргумент name

Действительно, зачем? Это может показаться непонятным, потому что никаких параметров для создания окна он не несёт. Но представим себе такую ситуацию: у нас есть фотоальбом с фотографиями разных размеров, и мы хотим, чтобы по клику на маленькой превьюшке открывалось окно с большой картинкой, заданное строго по размерам этой картинки. А размеры у них, как мы уже договорились, разные. Если пользователь смотрит их по очереди, каждый раз закрывая предыдущую, то никаких проблем не наблюдается. Но, предположим, он захотел открыть сразу две больших картинки, чтобы их сравнить. Вот тут-то может случиться неприятность: новая картинка откроется в окне такого же размера, как и предыдущая, хотя реальный размер фотки совсем другой.

Всё это произойдёт, если мы пренебрегли непонятным аргументом name (дескать, ну его, и без того голова пухнет, поставлю кавычки, и ладно). Пока не закрыто предыдущее окно, его параметры будут находиться в памяти функции при открытии нового окна... если у него нет собственного имени. Если же это имя есть, то функция автоматически переключится на те параметры, которые связаны с этим именем. И картинка откроется правильно.

Так что пользуйтесь этим чудесным аргументом.

Два метода close()

Метод close() также есть и у окна, и у документа. В приведённом выше скрипте мы использовали этот метод для документа, чтобы освободить память компьютера.

Вообще метод close() используется не слишком часто, потому что закрыть окно всегда можно с помощью крестика в правом верхнем углу. Окна без верхней строки заголовка создавать нашими средствами нельзя, а тот всплывающий мусор, которым наводнён интернет, часто изготавливается с помощью flash, где есть свой язык программирования — ActionScript.

Давайте, всё же, попробуем написать закрытие всплывающего окна, допустим, кнопкой из коллекции forms().

Вы помните, что наше всплывающее окно было определено переменной myWin. Значит, можно предположить, что код закрывающей кнопки будет выглядеть так:

<button onClick="myWin.close();">закрыть</button>

НО

Эта переменная была определена в теле функции openwindow(wd,ht). А событие этой кнопки находится за пределами функции. Значит, программа не будет знать, что такое myWin.

Значит, нужно немного подредактировать начальный скрипт, объявив эту переменную перед функцией:

var myWin;
function openwindow(wd,ht) {
var
name, param;
/* Далее старый текст функции. */
. . .
}

Следующий момент: если всплывающее окно открыто, то кнопка сработает. А если закрыто?..

...Совершенно верно, сгенерирует ошибку.

Есть у этих кнопок такой атрибут: disable. Кнопка с таким атрибутом тусклая и нерабочая. Давайте её такой и сделаем. А заодно поставим кнопку, открывающую окно, и в ней пропишем строку, которая включила бы закрывающую кнопку (для этого нужно задать закрывающей кнопке имя):

ОТКРЫВАЮЩАЯ КНОПКА:

<button onClick="openwindow(554,510); document.getElementById('zakr').disabled=false;">открыть</button>

ЗАКРЫВАЮЩАЯ КНОПКА:

<button id="zakr" disabled onClick="myWin.close();">закрыть</button>

И ещё не всё: хорошо бы, чтобы после закрытия окна кнопка вернулась в первоначальное «тусклое» состояние:

<button id="zakr" disabled onClick="myWin.close(); this.disabled=true;">закрыть</button>

Ключевым словом this можно обратиться к текущему элементу (тому, в чьём событии мы находимся).

А теперь поиграем кнопками:

   

А почему бы, спросите Вы, не оживить кнопку в самой функции, а не в другой кнопке? Можно. Но вспомним, что это окно у нас само открывается при загрузке файла. И Вы наверняка давно его закрыли крестиком. А от такого закрытия наша кнопка не придёт в первоначальное состояние. Значит, она останется рабочей и будет провоцировать на ошибку. Можете проверить: откройте окно кнопкой и закройте крестиком.

Кстати, подобная возможность — это моя недоработка. Как её доработать, честно скажу, пока не знаю. В учебной демке я, так и быть, позволил себе такое. Но вообще будем обращать внимание на разные второстепенные мелочи. На многих сайтах скрипты иногда вдруг работают неправильно, потому что не учтена какая-нибудь мелочь. Мы же будем стараться такие мелочи учитывать.


Итак, мы узнали:

как открывать и закрывать (культурно и некультурно) всплывающие окна.

А также научились:

делать эти самые окна.


К следующему уроку >>


 008402