Скрытый фрейм. Получение данных от сервера без перезагрузки страницы

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

Достоинства фреймов Простота

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

Быстрота

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

Размещение

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

Изменение размеров областей

Можно изменять размеры фреймов «на лету», чего не позволяет сделать традиционная верстка HTML.

Загрузка

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

Недостатки фреймов Навигация

Пользователь зачастую оказывается на сайте, совершенно не представляя, куда он попал, потому что всего лишь нажал на ссылку, полученную в поисковой системе. Чтобы посетителю сайта было проще разобраться, где он находится, на каждую страницу помещают название сайта, заголовок страницы и навигацию. Фреймы, как правило, нарушают данный принцип, отделяя заголовок сайта от содержания, а навигацию от контента. Представьте, что вы нашли подходящую ссылку в поисковой системе, нажимаете на нее, а в итоге открывается документ без названия и навигации. Чтобы понять, где мы находимся или посмотреть другие материалы, придется редактировать путь в адресной строке, что в любом случае доставляет неудобство.

Плохая индексация поисковыми системами

Поисковые системы плохо работают с фреймовой структурой, поскольку на страницах, которые содержат контент, нет ссылок на другие документы.

Внутренние страницы нельзя добавить в «Закладки»

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

Несовместимость с разными браузерами

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

Непрестижность

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

Надо отметить, что некоторые приведённые недостатки вполне обходятся. Так, с помощью скриптов можно сделать, что открытый в браузере отдельный документ формируется со всей фреймовой структурой. Поисковые системы также уже лучше индексируют фреймовые документы, чем это было несколько лет назад.

Описание

Простейший и самый широко распространённый способ — использовать скрытый фрейм, в который и будут загружаться данные. Обычно такой фрейм реализуется при помощи элемента IFRAME.

< iframe name = "buffer" src = "about:blank" style = " width : 0px ; height : 0px ; overflow : hidden ; border : none ; " >

Использовать display:none для скрытия фрейма нельзя — Опера не позволит обратиться к такому фрейму. (Альтернативное работающее решение — position:absolute; visibility:hidden; width:0px; height:0px; .)
Запрос и получение данных при этом происходят асинхронным образом, чаще всего при помощи callback-функции, определяемой в контексте основной страницы:

// ф-я будет вызвана при получении данных от сервера function frameCallback ( data) { // какие-то действия с полученными данными }

Когда скрипту нужно получить какие-то данные с сервера, он даёт команду на загрузку страницы в этот iframe:

Window. frames[ "buffer" ] . location = url; // url - GET-запрос к серверу

Можно также использовать сабмит невидимой формы с target="buffer" . Это позволит передавать данные на сервер методом POST.

Сервер в ответ должен сформировать и вернуть страницу с JavaScript кодом, который вызовет callback-функцию:

parent. frameCallback( "received data" ) ; Преимущества

• Очевидность реализации: просто IFRAME-первое, что приходит в голову.
• Возможность отправлять в IFRAME данные произвольно формы (в том числе — динамически созданной), что решает проблемы с кодировками данных (все перекодирования выполняет браузер).

Недостатки

• Засорение history браузера.
• Проблемы с кроссбраузерностью: каждый браузер имеет свои собственные и крайне нестабильные особенности при работе с IFRAME.
• Большие расходы памяти (фактически, каждый IFRAME — это отдельный маленький браузер).
• Сложности в Opera: можно обратиться только к содержимому того IFRAME, при создании которого был указан атрибут src, совпадающий с именем текущего сайта.

XMLHttpRequest и ActiveX Microsoft.XMLHTTP Преимущества

• Компоненты используются по их прямому назначению.
• Большая экономия памяти по сравнению с IFRAME.

Недостатки

• Решения специфичны для IE и Mozilla/Firefox (в IE вообще не работает с выключенными ActiveX), в Opera поддержка есть только начиная с версии 8.

SCRIPT: Загрузка данных через динамически создаваемый тэг SCRIPT Преимущества

• Хорошая кроссбраузерность. Идентичный код и метод в разных браузерах (в том числе — работает в Opera).
• Экономия памяти по сравнению с IFRAME.
  • Не портится history.
  • Метод не опирается на особенности браузеров и работает в IE5.0+, Mozilla 1.7+, Firefox 1.0+ и Opera 7.3+ (здесь «+» означает «в этой и более новых версиях»). Кроме того, не использует ни ActiveX, ни IFRAME.

Недостатки

• Невозможно отправить на сервер очень много данных (ограничение на длину QUERY_STRING).
• Необходимо в серверном скрипте работать с Unicode (в PHP для этого есть расширение iconv).
• Браузеры по-разному работают с динамически созданными SCRIPT-тегами, поэтому кроссбраузерное решение содержит ряд хаков.

Имя: document.f.h.value=window.navigator.appName; 8.5. Отправка данных из скрытых полей формы

После нажатия кнопки в адресной строке вы увидите, что помимо user=имя имеется также h=имя_вашего_браузера . В заполненной Вами форме поля h не было видно. Таким образом, форма передала на сервер дополнительную информацию помимо Вашего желания. Это уже неприятно, хотя сама информация в данном случае (имя браузера) не представляет из себя ничего криминального. Если бы в качестве метода передачи данных был использован не GET (как в нашем примере, по умолчанию), а POST , то этой скрытой передачи данных пользователь даже не заметил бы.

Пример 8.3 . Пример состоит из двух фреймов (расположенных в файлах left. htm и right. htm ), в которые помещена одинаковая форма. В правый фрейм , помимо этого, помещен также следующий скрипт :

function copyFields() { here = document.forms.elements; there = window.top.frames.document.forms.elements; here.value = there.value; here.value = there.value; here.value = there.value; here.value = there.value; setTimeout("copyFields()",100); } window.onload=copyFields;

Функция copyFields() запускается раз в 0,1 сек. Когда пользователь вводит данные в левом фрейме , эти же данные попадают в соответствующие поля правого фрейма. Таким образом, данные из одного окна могут быть считаны программой из другого окна (или фрейма). Вопрос только в том, хотите ли вы, чтобы это происходило. Как решаются эти вопросы, рассказано ниже в разделе "Модель безопасности".

Еще один пример - отправка данных по событию без наличия видимой формы на web-странице:

document.f.h.value = window.navigator.appName; Нажмите на ссылку

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

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

Невидимый код

Вопрос доступности JavaScript-кода рассматривается с двух точек зрения: идентификация, как следствие - необходимость сокрытия кода, и безопасность пользователя, следовательно - доступность кода.

Приемы программирования со скрытым кодом позволяют решить еще несколько задач, которые не связаны с безопасностью.

Мы будем рассматривать возможности использования скрытого кода, не вынося вердикта о преимуществе того или иного подхода. Рассмотрим несколько вариантов:

• невидимый фрейм ;
• код во внешнем файле ;
• обмен данными посредством встроенной графики.

Строго говоря, первые два варианта не скрывают код полностью. Они рассчитаны либо на неопытных пользователей, либо на нелюбопытных. Так или иначе, не каждый же раз вы будете смотреть исходный текст страницы.

Невидимый фрейм

Технология программирования в невидимом фрейме основана на том, что при описании фреймовой структуры можно задать конфигурацию типа:

8.6. Правый фрейм имеет нулевую ширину (граница видима)

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

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

8.7. Правый фрейм имеет нулевую ширину (граница невидима)

Код во внешнем файле

О том, как подключать код JavaScript, размещенный во внешнем файле , рассказывалось во вводной лекции:

Данный способ позволяет скрыть код лишь от ленивого пользователя. Но сам код JavaScript легко доступен, т.к. указанный файл можно просто скачать отдельно, либо сохранить всю HTML-страницу (со всеми подключенными к ней скриптами) с помощью меню браузера.

Обмен данными посредством встроенной графики

Данный прием основан на двух идеях: возможности подкачки графического образа без перезагрузки страницы и возможности подкачки этого графического образа не через указание URL графического файла, а через CGI-скрипт, который возвращает Content-type: image/... или осуществляет перенаправление. При этом следует учитывать, что использовать метод, отличный от GET, можно только в формах. В следующем примере мы создали функцию change_image() , которая формально говоря меняет значение свойства src картинки. Но в качестве побочного эффекта позволяет серверу узнать, установлены ли у пользователя cookie (если соответствующим образом запрограммировать CGI-скрипт image.cgi на стороне сервера):

function change_image(x) { document[x].src = "http://abc.ru/image.cgi?" + document.cookie; }

Эта безобидная последовательность операторов JavaScript позволит нам узнать получил ли клиент cookie . Куки могут не поддерживаться по разным причинам. В данном случае программа передает на сервер выставленные им cookie в качестве параметра скрипта под видом изменения картинки.

Модель безопасности

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

По умолчанию к защищенным в JavaScript данным относятся:

Таблица 8.1. Свойства и методы, являющиеся защищенными Объект или класс Свойства

document	cookie , domain , lastModified , location , referrer , title , URL , links , forms
Form