ТаблицейБлоками.Приложение Д: учебник html теги, ссылки, javascript окна |
Последняя модификация: 10.08.2014 г
Страница загружена с адреса: http://webdesign.site3k.ru/conjuncture/append/d/links.html
Обычная ссылка. Главной особенностью которой является то, что ничего особенного в ней нет. Ссылка, как ссылка. Ее внешним видом легко управлять с помощью CSS (см. «Внешний вид ссылок» ниже).
<A HREF="myfile.html">Перейти</A>
Ссылка-рисунок. Главной особенностью ссылки является возможность легкого создания красочного оформления и относительно большой вес (в байтах). Важно и то, что рисунок может иметь любой размер и ссылку легко вписать в любое оформление страницы. Для уменьшения ее веса, рисунок можно сделать малоцветным. Даже если рисунок указан в нескольких ссылках, то загружается он, все равно, один раз. Поэтому, вес рисунка можно считать распределенным между ссылками, его использующими. Внешним видом можно управлять только с помощью скриптов, так как вид ссылки после перехода и при помещении мыши над ней не меняется автоматически. С учетом возможного отключения графики в браузере посетителя, рисунок следует дополнить атрибутом «Alt», для его отображения вместо графики, если та отключена. При этом следует иметь в виду что, если размер рисунка не задан однозначно, то не вывод его на экран может исказить оформление страницы, а альтернативный текст может не вместиться в отведенную рисунку область.
<A HREF="myfile.html"><IMG SRC="myimage.GIF" alt='Перейти'></A>
Ссылка с рисунком и текстом. Сочетает в себе особенности первых двух. При этом рисунок привлекает внимание, а текст поясняет назначение ссылки. При переходе по ссылке ее внешний вид, не считая вида рисунка, меняется автоматически.
<A HREF="myfile.html"><IMG SRC="myimage.GIF" alt='Перейти'> Перейти</A>
Ссылка-кнопка. Главной особенностью является неисправимая неопределенность поведения указателя мыши: При приближении к кнопке он превращается в руку, но тут же возвращается к стрелке, принятой для кнопок. Внешний вид легко управляется с помощью CSS (например, style="background:Maroon;color:Yellow" где в качестве background можно указать и рисунок) и может не уступать рисункам, при значительно меньшем весе. Можно настроить автоматическое его изменение при переходе по ссылке. Учитывая минимальный труд по созданию кнопки, этот вариант можно назвать кнопкой для ленивых.
<A HREF="myfile.html"><INPUT TYPE='SUBMIT' VALUE='Перейти'></A>
Ссылка без текста. Особенностью ссылки является то, что она не отображается графическими браузерами, но видна поисковым роботам и может быть использована для направления роботов на страницы, скрытые от посетителей (двери) или для дополнительного направления роботов на глубоко вложенные страницы для большей уверенности в вероятности их индексации.
<A HREF="myfile.html"></a>
Ссылка, где адрес заменяется действием, которое может быть и переходом на этот адрес (или другой адрес). Действие определяется командой JavaScript. Особенностью ссылки является возможность указания сразу нескольких действий или действия, неожидаемого посетителем. Если переход на адрес, указанный в HREF="myfile.html" требуется отменить, в конце скрипта следует указать «return false;».
<A HREF="myfile.html" onClick=" window.location='myotherfile.html'; return false;">Перейти</A>
Ссылка без адреса. Атрибут HREF="" используется для изменения формы указателя мыши и подчеркивания текста. Действие определяется командой JavaScript. Особенностью ссылки является ее сокрытие от поисковых машин (и не графических браузеров). Может применяться для обеспечения перехода посетителей на другие сайты, но недопущения перехода туда поисковых роботов. Поскольку адрес перехода не отображается в строке состояния, его следует указать либо в Title, либо в событии «onmouseover» (onmouseover="window.status='myfile.html';return true;" onmouseout="window.status='';return true;"), однако, такое изменение строки состояния не всегда работает в Опере (только после состоявшегося перехода) текст Title надежней. Для избежания ошибок обязателен «return false;» (например, IE, при пустой ссылке открывает каталог).
<A HREF="" onClick="window.location ='myfile.html'; return false;">myfile.html</A>
Ссылка заменена меткой. Style определяет внешний вид. Действие определяется командой JavaScript. Аналогична предыдущей, с той разницей, что цвет ссылки не меняется автоматически при переходе. Курсор не переопределяется в Mozilla.
<a name="1" style="color:blue; text-decoration:underline; cursor:hand"
onclick="window.location='myfile.html';">Перейти</a>
Ссылка заменена обычным текстом. Style определяет внешний вид. Действие определяется командой JavaScript. Как и у двух предыдущих, статус не отображается, цвет автоматически не меняется. Курсор не переопределяется в Mozilla.
<span style="color:blue; text-decoration:underline; cursor: hand" onclick = "window.location ='myfile.html';">Перейти</span>
Кнопка. Действие определяется командой JavaScript. Похожа на вышеупомянутую кнопку, но указатель не пытается переопределяться, и поисковые машины не переходят.
<INPUT TYPE='SUBMIT' VALUE='Перейти' onclick="window.location='myfile.html';">
Еще кнопка. Действие определяется командой JavaScript (благодаря чему, вместо SUBMIT можно использовать BUTTON. В отличие от предыдущей, помещено в форму.
<FORM><INPUT TYPE=SUBMIT VALUE="Перейти" onClick="window.location='myfile.html';"> </FORM>
Ссылка с явным указанием команды скрипта. Поисковые машины не должны переходить. Цвет при переходе автоматически меняется только в IE.
<A HREF="javascript:window.location='myfile.html';">Перейти</A>
Еще одна кнопка. Обходится без всяких скриптов, за счет того что помещена в форму, методом которой назначен "get" (получить). Такая кнопка может быть только типа SUBMIT, так как кнопки другого типа могут не работать в некоторых браузерах.
<FORM action="myfile.html" method="get"><INPUT TYPE=SUBMIT VALUE="Перейти"></FORM>
Ссылка-форма. Можно указать что, методом формы является GET, но это не обязательно, так как это метод по умолчанию. Возможно, когда-нибудь, поисковики станут переходить по ссылкам JavaScript, но отправлять формы, вместо человека, никогда не станут. Данная ссылка имитирует отправку формы, а та, в свою очередь, загружает в браузер файл myfile.html, как сделала бы обычная ссылка – абсолютное сокрытие ссылки от поисковой системы.
<FORM action="myfile.html" name=frm1><A HREF="javascript:document.frm1.submit();">Перейти</A></FORM>
Внешний вид ссылок можно оставить на усмотрение браузера, однако, многих типает от единообразия стандартного вида и они:
Насколько правомерно считать непрофессиональным стандартную ссылку вопрос, который, наверное, никогда не получит окончательного ответа. У стандартных ссылок есть одно преимущество: даже не искушенному посетителю понятно, что это ссылка. А если сделать ссылки черными и не подчеркнутыми, то, неизвестно, поймет ли кто-либо их назначение. Поэтому, переопределяя вид ссылок, не следует далеко уходить от стандарта.
Переопределение вида ссылок разумно поместить в стили. Например:
<style>
A:link {color:rgb(0,0,200)}
A:visited {color:red}
A:hover {color:rgb(15,0,190); font-weight: bold}
A:active {color:lime}
</style>
Толкование всей этой тайнописи смотрите в документации по CSS.
Фактически, с помощью CSS элементарную текстовую ссылку можно превратить в анимацию, меняя размеры, интервалы, цвета, отступы, задний план и т. д.
Некоторым нравится text-decoration:blink, однако, по причинам, описанным в документации по CSS, этим лучше не пользоваться.
Последовательность определения вида должна соответствовать приведенной в примере, поскольку каждый следующий тип ссылок, является частью предыдущего. Если же более общее определение поместить после частного, то в частном определении будут браться только атрибуты, не заданные в общем.
В качестве особых примеров можно рассмотреть приближение вида ссылки к виду кнопки (1), переменный задний план (2) и изменение вида обычной кнопки (3).
<style> :link {border:solid 2px;border-color:#e6e6e6 gray gray #e6e6e6; Padding:0 3; background:Maroon;color:white; text-decoration:none} :visited {border:solid 2px;border-color:#e6e6e6 gray gray #e6e6e6; Padding:0 3; background:Maroon;color:red; text-decoration:none} :hover {color:yellow} :active {border-color:gray #e6e6e6 #e6e6e6 gray; color:lime; margin-left:1pt} </style>
<a href="" title="Нажатие не вызовет перехода" onClick="return false;">Проверить</a>
:hover.1 {color:yellow}
<a href="" title="Нажатие не вызовет перехода" onClick="return false;" class=1 >Проверить</a>
.R1 :link {border:solid 2px; border-color:#e6e6e6 gray gray #e6e6e6; Padding:0 3; background:Maroon;color:white; text-decoration:none} .R1 :visited {border:solid 2px; border-color:#e6e6e6 gray gray #e6e6e6; Padding:0 3; background:Maroon;color:red; text-decoration:none} .R1 :hover {color:yellow} .R1 :active {border-color:gray #e6e6e6 #e6e6e6 gray; color:lime; margin-left:1pt}
<P class=R1><a href="" title="Нажатие не вызовет перехода" onClick="return false;" >Проверить</a>
P. R1 {white-space:nowrap}
<style> :link {width:22px; height:22px; background:url("b1.gif"); vertical-align:middle} :visited {width:22px; height:22px; background:url("b2.gif"); vertical-align:middle} :hover {background:url("b3.gif")} :active {background:url("b4.gif")} </style>
<style> .R2 :link {width:22px; height:22px; padding:2 11; background:url("b1.gif") no-repeat center; vertical-align:middle} .R2 :visited {width:22px; height:22px; padding:2 11; background:url("b2.gif") no-repeat center; vertical-align:middle} .R2 :hover {background:url("b3.gif")} .R2 :active {background:url("b4.gif")} </style>
<P class=R2><a href="" title="Нажатие не вызовет перехода" onClick="return false;" ></a>
<a href="" title="Нажатие не вызовет перехода" onmouseover="document.MyImg.src='b3.gif';" onmouseout="document.MyImg.src='b1.gif'" onClick="document.MyImg.src='b4.gif'; return false;"><IMG NAME=MyImg SRC='b1.gif' BORDER=0> </a>
<style> .R4 :link, .R4 :visited {text-align:center;color:black; TEXT-DECORATION: none; font-weight:Bold; vertical-align:middle;width:110px; height:22px; background:url("b1.gif");} .R4 :hover {color:red;background:url("b3.gif")} .R4 P {margin:0;Padding:0;text-indent:0pt;} </style> <div class=R4> <P> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">Ссылка</a> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">Ссылка 2</a> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">Еще ссылка</a> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">Меню</a> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">Классическое</a> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;">Такое</a> <P> </div>
<style> .R4 :link, .R4 :visited {text-align:center;color:black; TEXT-DECORATION: none;font-weight:Bold} .R4 P {margin:0;Padding:0;text-indent:0pt;} :link #I, :visited #I {text-align:center;color:black; TEXT-DECORATION: none;font-weight:Bold; vertical-align:middle;width:110px; height:22px; background:url("b1.gif");} :hover #I {color:red;background:url("b3.gif");cursor:'hand'} </style> <table class=R4> <tr><td> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;"> <div id=I>Ссылка</div></a> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;"> <div id=I>Ссылка 2</div></a> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;"> <div id=I>Еще ссылка</div></a> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;"> <div id=I>Меню</div></a> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;"> <div id=I>Классическое</div></a> <P><a href="" title="Нажатие не вызовет перехода" onClick="return false;"> <div id=I>Такое</div></a> </tr> </table>
Для того, чтобы кнопка-изображение быстрее реагировала на действие мыши, можно провести предварительную загрузку используемых в ней, но, изначально не отображаемых, рисунков. Для чего следует вставить в страницу примерно такой код:
<SCRIPT LANGUAGE="JavaScript"><!-- document.AltLogo1 = new Image(); document.AltLogo1.src = "b2.gif"; document.AltLogo2 = new Image(); document.AltLogo2.src = "b3.gif"; document.AltLogo3 = new Image(); document.AltLogo3.src = "b4.gif"; //--></SCRIPT>
Этот код объявляет переменные (AltLogo1 – AltLogo3) для размещения рисунков оператором new и загружает их, установив их src. В результате, вид кнопки изменится быстрее, чем на этой странице, где предварительная загрузка умышленно не выполнена.
А для большого числа нумерованных рисунков можно применить компактный цыкл:
<SCRIPT LANGUAGE="JavaScript"><!-- for(i=2;i<=4;i++) // Пока i=2 (первый предзагружаемый рисунок), не достигнет 4 (последний), // увеличивая его на единицу { eval('document.AltLogo' + i + '=new Image()'); eval('document.AltLogo' + i + '.src="b' + i + '.gif"'); } //--></SCRIPT>
В случае браузеров не поддерживающих скрипты, можно предварительно загрузить рисунки, скрыв их наличие за счет атрибутов width=1 и height=1. Например:
<IMG SRC="b2.gif" alt="" width=1 height=1 border=0> <IMG SRC="b3.gif" alt="" width=1 height=1 border=0> <IMG SRC="b4.gif" alt="" width=1 height=1 border=0>
Однако, браузеры, не поддерживающие скрипты, обычно не поддерживают и рисунки, так что, их загрузка может не иметь смысла.
<style> .R3 input {background:Maroon;color:Yellow} .R3 input:hover {background:green} .R3 input:active {background:lime;color:Yellow} </style>
<P class=R3><INPUT TYPE='SUBMIT' VALUE='Перейти' onClick="this.style.background='lime'; window.location='MyFile.html';" onmouseover="this.style.background='green'; this.style.cursor='hand' "onmouseout="this.style.background='Maroon'">
Навигационные карты представляют собой рисунок, внедряемый либо как <IMG>, либо как <OBJECT>, с регистрозависимым атрибутом USEMAP. Значение этого атрибута определяет имя используемой карты. Сама карта задается тегом <MAP> с соответствующим, регистрозависимым, атрибутом NAME и заканчивается заключительным тегом </map> (см. документацию по HTML 3.2 и HTML 4.0). Между начальным и заключительным тегом помещаются теги <AREA> (область), с обязательным указанием типа области shape и ее координат coords (вместо <AREA> допускается применение <A></A> с теми же атрибутами). Поскольку в браузере посетителя графика может быть отключена, разумно задание альтернативного текста для области (alt), отображение границы рисунка и задание его точного размера.
Допустимы четыре типа области (обязательно в кавычках, иначе многие браузеры не распознают тип и вообще игнорируют область):
"DEFAULT": весь рисунок, координаты не обязательны.
"RECT": Прямоугольник, указывается координата верхнего левого и нижнего правого угла.
"CIRCLE": Круг, указывается координата центра и радиус круга.
"POLY": Многоугольник, указывается координата каждого угла, после чего узлы последовательно соединяются между собой. Последний соединяется с первым. В результате становится возможным рисование фигур любого уровня сложности.
Координаты для каждой точки задаются сначала по оси x, затем, по оси y, от левого верхнего угла рисунка. Определить ее можно в стандартной программе рисования Paint: при перемещении указателя мыши над рисунком, она отображается в строке состояния.
Реакция на действия пользователя происходит либо в соответствии с атрибутом HREF, либо по событию onclick. При этом обработчик анализирует определение областей, начиная с первой и, найдя нужную область, прекращает поиск. Поэтому, если какие-то из областей пересекаются, используется первое назначение для данного участка.
Пример карты:
<IMG SRC="map.gif" BORDER=1 width=303 height=146 USEMAP="#map1">
<MAP NAME="map1">
<AREA HREF="file1.html" ALT="Ссылки" SHAPE="RECT" COORDS="0, 0, 303, 25">
<AREA HREF="file2.html" ALT="Навигационные карты" SHAPE="RECT" COORDS="0, 26, 303, 49">
<AREA HREF="file3.html" ALT="Атрибуты ссылок" SHAPE="RECT" COORDS="0, 50, 303, 73">
<AREA HREF="file4.html" ALT="Фреймы" SHAPE="RECT" COORDS="0, 74, 303, 98">
<AREA HREF="file5.html" ALT="Различные команды" SHAPE="RECT" COORDS="0, 99, 303, 121">
<AREA HREF="file6.html" ALT="Окна" SHAPE="RECT" COORDS="0, 122, 303, 146">
</map>
Для такого простого примера применение навигационной карты врятли разумно. Но если представить себе метеосайт, на котором вместо текстовых ссылок на регионы страны, используется навигационная карта Выглядеть будет довольно эффектно. Если же требуется сделать виртуальную клавиатуру, то навигационная карта становится единственным разумным решением.
Наибольшее значение имеют несколько перечисленных ниже атрибутов. Они применяются, практически, каждым дизайнером.
HREF адрес ссылки.
NAME имя ссылки.
TITLE всплывающая подсказка.
ACCESSKEY клавиша доступа.
TARGET целевой кадр. Определяет, будет ли загружен документ в текущее окно (target=_top), поверх данного документа, новое окно (target=_blank), или определенное окно фрейма (см. фреймы).
ONCLICK по щелчку мыши назначить действие.
Существует огромное количество других, второстепенных атрибутов, ознакомиться с которыми можно в документации по HTML.
Фрейм является разновидностью окна. Его особенностью является включение окна фрейма в другое окно, что порождает большое разнообразие результирующих окон для загрузки документа.
_top Вместо текущего документа, со всеми его кадрами.
_blank В новом окне, не закрывая текущего.
_self вместо текущего документа. Если он находится внутри фрейма, загружаемый документ так же помещается в данный кадр фрейма. Указание target=_self равносильно отсутствию указания target вообще.
_parent вместо документа, являющегося родительским для текущего кадра (содержащего данный Frameset). Если никакого кадра нет, документ загружается вместо текущего документа.
Установив в определении фреймов имена (атрибут NAME) для кадров, можно из одного кадра загружать документы в другой. Например, target=Frame3. В скриптах это можно делать как parent.Frame3.location="file1.html". Так же можно использовать массив фреймов (эти технические подробности описаны в документации по JavaScript и их вряд-ли стоит повторять, в связи с редким использованием).
Большую информацию о фреймах можно получить на странице Если вам не нравятся фреймы (frames), значит, вы не умеете их готовить
window.location новое размещение документа для текущего окна
parent.location новое размещение документа для родительского фрейма
self.parent.location аналогично предыдущему, указывает новое размещение документа для родительского фрейма.
parent.Frame3.location открывает документ в кадре под именем Frame3.
document.location новое размещение документа для текущего окна.
history.back() переход к предыдущему документу
scrollTo(0,0) переход к координате (в данном случае, к началу документа).
Перед выполнением команды можно выдать запрос. Команда выполняется только при утвердительном ответе.
if(confirm('Перейти к myfile.html?')) window.location='myfile.html'
Аналогично, можно задать явный переход в ссылке, но осуществить его только по утвердительному ответу:
<A HREF="myfile.html" onClick="return window.confirm('Перейти?');">переход к myfile.html</A>
<a href="appendd/comment.html" target=Frame3 onClick="document.location='appendd/metodic.html';"> Приложения</A>
<a href="appendd/metodic.html" onClick="parent.Frame3.location='appendd/comment.html';"> Приложения</A>
<a href="appendd/index.html" target=_top>Приложения</A>
Три перечисленные ссылки разными методами выполняют одно и то же действие:
Первая ссылка по щелчку мыши открывает скриптом файл оглавления (appendd/metodic.html) в том же фрейме, где находилась ссылка, а затем, в другом фрейме, открывает страницу appendd/comment.html, являющуюся, для набора документов, связанных с отпывшемся оглавлением, страницей по умолчанию.
Вторая ссылка, наоборот, сначала скриптом открывает страницу appendd/comment.html во фрейме "Frame3", а затем, в том же фрейме, где находилась ссылка, открывает файл оглавления.
Третья ссылка, не мудрствуя лукаво, вместо текущей страницы фреймов, открывает новую (appendd/index.html), для которой appendd/metodic.html и appendd/comment.html являются фреймами по умолчанию. Не смотря на то, что в данном примере, последний вариант является самым компактным и надежным, первые два тоже имеют право на жизнь, так как позволяют открыть в другом фрейме страницу, не являющуюся страницей по умолчанию.
Хотя и в нем можно было бы решить эту же задачу, добавив параметр, указывающий, какую страницу открыть:
<a href="appendd/index.html?другая_страница.html" target=_top>Приложения</A>
Нужно лишь встроить обработку запросов в файл appendd/index.html, для чего достаточно добавить в его заголовочную часть такую функцию:
<SCRIPT LANGUAGE="JavaScript"> <!--
function JS() {
B=document.location.search ;
if (B != "") parent.Frame3.location=B.substring(1) ;
}// --> </SCRIPT>
А в определение фреймов вставить ее вызов по событию OnLoad (подробней об этом смотрите на странице Если вам не нравятся фреймы, значит вы не умеете их готовить).
Последний пример:
<a href="appendd/index.html" target=_blank>Приложения</A>
Простая ссылка, открывающая новый документ в новом окне, не закрывая текущего.
Помимо привычных полных окон, браузеры допускают открытие скриптами нескольких типов дополнительных окон. Для JavaScript фактически используется только три:
alert() открыть окно сообщения. Например: alert('Привет с большого бодуна!'). Смотреть
confirm() открыть окно запроса. Если пользователь ответил утвердительно, возвращается истинное значение, иначе возвращается ложное. Смотреть
Эти окна используют системный шрифт и на их внешний вид невозможно влиять. Единственное, что можно с ними сделать это открыть, заставить правильно отображаться букву «я», поставив перед ней косую черту (\), и принудительно инициализировать начало новой строки, обозначив его через косую и английскую «n» (\n). Более управляемым является, так называемое «всплывающее» окно. В нем может быть открыт существующий файл, его можно создать с ноля и записать нужные строки, в него можно передать фокус, его можно закрыть. Главной проблемой всплывающих окон является то, что их частое использование для накрутки счетчиков и показа рекламы или рекламируемых сайтов (и на некоторых сайтах эти окна выстреливаются как салют), привело к появлению функции запрета на открытие всплывающих окон. В Опере, например, можно либо разрешить их, либо запретить, либо разрешить только запрошенные (запущенные по событию onclick). По недоразумению, пользователь может отключить всплывающие окна вообще (и не увидеть файлы примеров во многих руководствах). Поэтому, имея намерение сообщить что-то важное, лучше использовать либо обычное окно, либо alert-окно.
Команды управления всплывающими окнами:
window.open("URL","window_name","param,param,...", replace)
где:
URL адрес открываемого документа. Если адрес пустой, создается новый документ в оперативной памяти.
window_name имя окна для использовании в атрибуте TARGET. Может быть пустым.
Replace заменить последний адрес в истории адресом открываемого окна (не обязательно).
Param список необязательных параметров, перечисленных через запятую.
Допустимые параметры:
Toolbar наличие, или отсутствие панели инструментов. Может иметь значения yes или no, или аналогичные им 1 или 0.
Location наличие или отсутствие адресной строки
Directories в окне присутствует или отсутствует «избранное»
Status наличие или отсутствие строки состояния
Menubar наличие или отсутствие панели меню
Scrollbars наличие или отсутствие полосы прокрутки
Resizable разрешение или запрет изменения размеров
width ширина в пикселях
height высота в пикселях
top координата верхнего угла по оси y, относительно рабочей области браузера
left аналогично, координата по оси x.
Тем, кто совсем не знаком с программированием, следует запомнить что, для указания одного из атрибутов, необходимо указание всех предыдущих. Например, если мы хотим указать размеры открываемого окна, то обязаны указать его URL и имя, даже если они НАМ не нужны (в таком случае, между кавычками можно ничего не писать). Иначе размеры окна будут интерпретироваться как адрес (или имя, если адрес указан).
Если все параметры, кроме пути, опустить, окно откроется с параметрами текущего окна браузера. Если вместо прямого открытия, применить открытие в качестве параметров присвоения, например:
MyWindow=window.open("URL","window_name","param,param,...", replace)
Открытое окно получит идентификатор MyWindow, который можно использовать для обращения к нему в командах типа write или close.
Если использовать команду только с параметром URL:
window.open("URL")
откроется обычное новое окно, аналогичное ссылке
<a href="URL" target=_BLANK>Перейти</a>
Основные команды управления окнами.
close() закрыть текущее окно.
window.close() аналогично.
MyWindow.window.close() закрыть окно с идентификатором MyWindow
MyWindow.window.focus() передать фокус окну с идентификатором MyWindow (переключиться на это окно).
window.opener.close() закрыть окно, из которого открылось текущее.
window.opener.document.bgColor='cyan' поменять задний план документа из которого открыто текущее окно.
MyWindow.document.bgColor='cyan' поменять задний план документа в окне с идентификатором MyWindow
Пример подобного (пустого) окна:
void window.open('','MyTarget',
'menubar=no,scrollbars=yes,resizable=yes,width=600,height=300,top=0,left=0');
// оператор void показывает системе что никаких других действий выполнять не требуется
// иначе в данном синтакчисе, после открытия окна, родительское окно попытается открыть пустую страницу.
Если назначить окну идентификатор:
WindowA=window.open('','MyTarget',
'menubar=no,scrollbars=yes,resizable=yes,width=600,height=300,top=0,left=0');
В него можно будет писать, пока оно открыто. Например следующий код помещает в это окно фразу «Привет!» и передает ему фокус:
WindowA.document.write('<html><body><h1>Привет!</h1>
</body></html>'); WindowA.window.focus();
Открыть пустое окно для записи
А этот открывает в нем готовую страницу (и передает фокус):
<A HREF="links.html" TARGET="MyTarget" onClick="WindowA.window.focus();"
title="Трафик минимальный, так как откроется уже загруженная страница">Заменить «Привет!»
на готовую страницу</A>
Заменить «Привет!» на готовую страницу
Наиболее редким является окно запроса параметров. Оно вызывается методом prompt(Подсказка,Ответ по умолчанию);. Например:
a=prompt('Введите имя','Вася');
Выведет окно с сообщением «Введите имя», задав имя Вася как предпологаемый вариатн ответа. Затем поместит ответ пользователя в переменную а, если он нажал O`key или поместит в нее «null», если пользователь нажал отмену. Смотреть. Поскольку данным методом можно запросить только одну строку, метод prompt практически не применяется на самой странице можно получить от посетителя гораздо больше строк через элементы input или textarea.
Особым случаем можно считать модальные и немодальные окна IE, открываемые командами showModalDialog и showModelessDialog. Поскольку они поддерживаются только Internet Explorer (первое с версии 4.0, второе с версии 5.0), их применение во многих случаях недопустимо, ведь пользователи других браузеров (например браузеров Linux), их не увидят. Однако эти окна обладают рядом полезных особенностей из-за чего, со временем, могут обрести поддержку в других браузерах, и достойны упоминания. Кроме того, о них стоит упомянуть еще и потому, что они мало известны. Но они есть!
window.showModalDialog("URL"[,разделенный запятыми массив значений][,"параметры окна через точку с запятой"]) открывает окно модальное к текущему окну приложения. В это окно нельзя произвести запись командами document.write (и нет смысла открывать пустое окно) и его нельзя закрыть командой MyWindow.window.close(). С момента открытия окна, выполнение скрипта приостанавливантся до тех пор, пока оно не закроется, а после закрытия, окно с данным идентификотором больше не существует. Так же, нельзя управлять поведением родительского окна из открытого им модального, так как любые операции над родителем блокированы – его нельзя даже прокрутить. Передача команд модальному окну возможна только через масив значений, определяемых в команде его открытия, а реакция на события в модальном окне – только через анализ возвращаемых при его закрытии значений. Наиболее подходящей областью применения модальных окон является замена окна PROMPT. В отличае от окна prompt, модальное окно является необычно открытой, обычной web-страницей; может содержать графику тексты и различные поля ввода, а так же принимать и возвращать большое количество параметров. Оно вполне подходит для заполнения регистрационных форм. Если при его открытии, ему назначить идентификатор типа:
MyWindow=window.showModalDialog('links.html','','dialogHeight:200px;dialogWidth:300px;
help=no; status=no');
А в самом окне установить возвращаемое значение командой
window.returnValue=Первое_значение, вторе, третье ...;
То после закрытия модального окна, в окне его породившим можно принять масив этих значений для обработки:
result0=MyWindow[0];
result1=MyWindow[1];
result2=MyWindow[2];
window.showModelessDialog("URL"[,разделенный запятыми массив значений][,"параметры окна через точку с запятой"]) Открывает немодальное окно, которое ведет себя почти как окно, открываемое командой window.open. Единственное отличие заключается в том что, в качестве параметров оно может получать данные для обработки и в том, что оно остается верхним, даже если не активно. Последнее отличие позволяет управлять поведением родительского окна и создавать в немодальном окне Internet Explorer меню навигации (с помощью Internet Explorer посмотрите на прайс, использующий немодальное окно в качестве элемента управления).
Для обоих окон (модального и немодального) результирующим окном для загрузки ссылок является новое окно (даже для команд document.location=).
Параметры для модального и немодального окна:
dialogHeight: высота в пикселях или em (минимальная и максимальная величины ограничены).
dialogWidth: ширина в пикселях или em (минимальная и максимальная величины ограничены).
help= если no, то в строке заголовка не должна отображаться кнопка вызова справки, иначе справка отображается.
status= если yes отображается строка состояния. Значение по умолчанию различно для версий браузера
center= если no, то окно не будет центрироваться по экрану, иначе центрируется, если координаты не заданы явно.
dialogHide= если yes окно скрывается при печати и предварительном просмотре, иначе нет.
dialogLeft: горизонтальная координата левого верхнего угла в пикселях или em.
dialogTop: вертикальная координата левого верхнего угла в пикселях или em.
edge= если sunken граница вдавлена, иначе raised выдавлена.
resizable= если yes размеры можно изменить, иначе изменение размера пользователю недоступно.
scroll= если no, полосы прокрутки не отображаются, даже если страница не вмещается в окно, иначе отображаются и пользователю доступна прокрутка.
Как модальное, так и не модальное окно могут иметь доступ к свойствам открывшего их окна. Для этого, в качестве параметров вызова они должны получить идентификатор window:
MyWindow=window.showModelessDialog('links.html',window,'dialogHeight:60px;
dialogWidth:300px; help=no; status=no;dialogLeft:0;dialogTop:0');
Который в тексте открываемой страницы, с помощью функции dialogArguments, можно передать переменной, а через нее, обращаться ко всем свойствам открывшего окна:
ParentWindow=window.dialogArguments;
ParentWindow.document.all.tags("h1")[0].innerText='Новый заголовок';
// Меняем первый заголовой породившей страницы
ParentWindow.document.location='menus.html' ;
// Загружаем в породившее окно новый документ
С другой стороны, родительские окна, могут получить доступ к порожденным не модальным окнам через их идентификатор (как в команде window.open):
MyWindow.document.all.tags("h1")[0].innerText='Новый заголовок';
// Меняем первый заголовой порожденной страницы
Не менее важным, как и в команде window.open, является возможность определить закрыто ли окно:
if (VarWindow) // Если окно открывалось
if (VarWindow.closed != true) // Если оно открыто в текущий момент
Ознакомившись с различными вариантами создания и украшения ссылок, можно перейти к организации оглавлений и ссылочной навигации,
многоуровневого раскрывающегося меню и
Меню из выпадающих списков.