разработка веб-сайтов под ключ
обучающие программы для веб-разработчиков

Ссылки top и self можно использовать для предотвращения отображения вашего сакйта внутри фреймов другого сайта. Для этого необходимо, чтобы документ верхнего уровня проверял, в какое окно он загружен. Это должно быть самое верхнее(top) или родительское (pfrent)окно. Если это так, ссылка на свойство top совпадает со ссылкой self на текущее окно. При несовпадении этих значений документ следует перезагрузить заново, но уже в окно верхнего уровня. Сценарий, выполняющий эту работу необходимо разместить в начале документа. Вот его код:

<script language="JavaScript">
if(top !=self){
top.location=location
}
</script>

Проверка загрузки фреймов

При разработке веб-приложений (сайтов) иногда необходимо убедится, что страница загружает полный набор фреймов. Рассмотрим следующую возможность: при посещении вашего многофреймового сайта пользователь может сделать закладку (поместить в папку «Избранное») только на один фрейм, в то время как все средства навигации по сайту находятся в другом фрейме. При следующем посещении в веб-браузер загрузится усеченный вариант вашего сайта. При этом пострадает как пользователь, так и ваша репутация.
Следующий простой сценарий проверяет, загружается ли веб-страница в своем наборе фреймов, сравнивая URL-адреса окна top и текущего окна. Если они совпадают, то необходимо загрузить набор фреймов, определяемый в файле frameset.htm.

<SCRIPT>
if (top.location.href = = window.location.href) {
top.location.href = "frameset.htm"
}
</SCRIPT>

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

Допустим, документы, предназначенные для отображения во фрейме, храняться в файлах doc1.html, doc2.html, ... , docN.html. Тогда следует создать установочные файлы frameset1.html, frameset2.html ... ,framesetN.html, в которых задана загрузка во фрейм соответствующего документа. Установочный файл frameset1.html для двухфреймовой структуры может иметь следующий вид:

Здесь HTML-документ из файла doc1.htm предполагается загружать во второй фрейм. При этом файл doc1.htm в самом начале должен содержать такой сценарий:

В окне веб-браузера это будет выглядеть ТАК.

Аналогичным образом формируются остальные установочные и информационные файлы.

Плавaющие фреймы

Для вставки одного HTML-документа в тело другого средствами браузера пользователя, а не сервера, служит контейнерный тег <IFRAME>:

<IFRAME SRC = "адрес_документа"></IFRAME>

Элемент, задаваемый этим тегом, можно позиционировать с помощью параметров таблицы стилей (тer <STYLE> или атрибут STYLE). Если его положение не указано явно, то он позиционируется в соответствии с положением в HTML-коде. Внешне этот элемент выглядит как прямоугольная область (с полосами прокрутки или без них), в которой отображается документ из некоторого HTML-файла. Такие окна иногда называют плавающими фреймами.
HTML-документы, загружаемые в плавающие фреймы, могут иметь сценарии и прочие средства, присущие любому HTML-документу. Плавающий фрейм ведет себя почти так же, как и обычный фрейм. Если он создан то его можно найти в коллекции frames. Следует иметь ввиду, что если определены события, одинаковые для фрейма и для загруженного в него документа, то на них будут откликаться обработчики документа, а не фрейма.

Рассмотрим пример использования плавающего фрейма, который напоминает синтаксис тега встраиваемого в документ изображения. Параметр src определяет адрес загружаемого во фрейм изображения. Параметр name задает имя фрейма для того, чтобы можно было получить доступ к фрейму, например, из сценария.

В плавающий фрейм можно загрузить другие документы, используя определенные на странице гиперссылки.

В окне веб-браузера это будет выглядеть ТАК.

Для плавающих фреймов с помощью параметров можно задавать размеры фрейма, горизонтальное выравнивание, размер отступа содержимого фрейма от границ.

Всплывающие окна

Всплывающее окно не имеет органов управления и располагается над документом, в котором оно было создано, в том числе и над диалоговыми окнами. Щелчок кнопкой мыши где-либо вне этого окна или вызов другого приложения приводит к его закрытию. Оно также не отображается на панели задач Windows. После создания всплывающего окна его заполняют содержимым. При этом необходимо следить, чтобы содержимое вписывалось в заданные границы окна, поскольку оно не имеет полос прокрутки. Такие окна удобно использовать в качестве больших всплывающих подсказок для вывода контекстной справочной информации.

Всплывающим окнам соответствует объект popup. Он создается только в сценарии для браузера IE5.5+ с помощью метода window.createРорир(). Этому объекту назначаются требуемые свойства посредством объекта style. Для всплывающего окна можно назначить свойства обрамляющей рамки(border), цвета границы(color), цвета фона(background), отступов(padding).

Рассмотрим пример создания всплывающего окна.

В окне веб-браузера это будет выглядеть ТАК.

Свойства объекта popup:

• document — свойство, имеющее в качестве значения ссылку на документ, содержащийся во всплывающем окне; через него можно задать ряд параметров как самого окна, так и его содержимого:

popupBody.style.border="solid 1px green" //граница окна
popupBody.style.color="blue" //цвет текста в окне
popupBody.style.background="#FFFF00" //цвет фона окна

• isOpen — пока всплывающее окно отображается на экране, это свойство имеет значение true, в противном случае — false; применяется в выражениях сцена¬рия, которые выполняются при уже открытом окне.

Методы объекта popup:

• show(left, top, width, height [, позиционирование]) - отображает всплывающее окно после создания объекта popup с помощью метода window.createPopup()и заполнения его содержимым. Если окно исчезло из-за того, что пользователь щелкнул где-то в поле браузера, то для его повторного открытия следует заново выполнить метод show(). Первые четыре параметра метода задают координатное позиционирование и размеры окна. Параметры left и top определяют координаты верхнего левого угла окна относительно экрана монитора, а не окна браузера. Последний необязательный параметр позволяет задать другое координатное пространство как ссылку на элемент HTML-документа. Например, указав document.body вы ограничиваете координатное пространство окном браузера.
  
  
• hide() — позволяет скрыть созданное и отображаемое всплывающее окно.

Заполнение всплывающего окна содержимым производится с помощью свойства innerHTML принимающего в качестве значения строку, содержащую теги HTML. Таким образом, в окно можно вставлять не только тексты, но и изображения и другие элементы.

Например

mypopup.document.body."innerHTML = "<IMG SRC = ' images/foto19.gif'>"

Рассмотрим пример HTML-документа с двумя кнопками, щелчок на которых вызывает одну и ту же функцию pop(xcontent), открывающую всплывающее окно и заполняющую его содержимым, которое задано параметром xcontent:

В окне веб-браузера это будет выглядеть ТАК.