Фрейми – це HTML-елементи, що дозволяють розділити вікно веб-браузера на кілька незалежних вікон, у кожне з яких можна завантажити окремий документ HTML. Кожне таке вікно (фрейм) може мати власні смуги прокручування та функціонувати незалежно від інших незалежних вікон або навпаки керувати їх змістом. Вони можуть застосовуватися для організації постійно знаходиться в одному вікні меню, в той час як в іншому вікні знаходиться безпосередньо сама інформація. Користувачі можуть звертатися до меню у будь-який момент, і їм не потрібно повертатись до попередньої сторінки, щоб вибрати інший пункт меню. Застосування кадрів дозволить вам «закріпити» у вікні браузера зображення або інші нерухомі за задумом елементи інтерфейсу, тоді як решта сторінки прокручуватиметься у кадрі.
Однак, варто відзначити, що в наші дні кадри вважаються застарілим засобом, а сайти з кадрами тепер вважаються несолідними, оскільки професійні веб-майстри ніколи не використовують кадри у своїх проектах. З кадрами пов'язаний цілий рядсумнозвісних проблем. Вони, наприклад, спантеличують пошукові машини, оскільки на сторінках, які містять контент, немає посилань на інші документи. Якщо ви хочете отримувати відвідувачів з пошукових систем, забудьте про кадри. Користувачеві, що сподобалася, неможливо помістити в розділ закладки браузера, оскільки кадри приховують адресу сторінки, на якій він знаходиться, і завжди показують тільки адресу веб-сайту. Тому вони створюють проблеми для браузерів при відстеженні хронології і ще вони не надто пристосовані для різних розмірів екранів і мобільних пристроїв.
Незважаючи на те, що проекти з кадрами зустрічаються у всесвітній мережі все рідше, вивчення HTML було б неповним без розгляду теми про кадри. У кадрів поряд з недоліками є й деякі переваги, які не дозволяють відкинути цю технологію як безперспективну.
Структура HTML-документа із кадрами зовні дуже нагадує формат звичайного HTML-документа. Як і в звичайному HTML-документі, весь код розміщений між парними тегами і , а в контейнері розміщуються заголовки. Основна відмінність документа з кадрами від звичайного HTML-документа - у документа з кадрами замість тега застосовується парний тег (від англ. frame set - Набір кадрів).
У наступному прикладі наведено структуру HTML-документу з кадрами:
- Спробуй сам »
| frame_top | |
| frame_left | frame_right |
Документ із кадрами
У наведеному прикладі сторінка містить три області, кожну з яких спочатку завантажуються HTML-документи frame_top.html, frame_left.html і frame_right.html. Крім HTML-документів, кадр може містити і графіку. Для цього необхідно вказати адресу відповідного зображення в атрибуті src, наприклад src="image.gif". Зверніть увагу, що елемент використовується без тега, що закриває.
Всередині контейнера можуть міститися лише теги або інший набір кадрів, охоплений тегами та .
Тег має такі атрибути:
- rows - описує розбиття сторінки на рядки:
- cols - описує розбиття сторінки на стовпці:
У значенні атрибутів rows і cols необхідно вказувати кількість рядків чи стовпців, а значення ширини і висоти кадрів. Усі значення у списку поділяються комами. Розміри можуть бути вказані в абсолютних одиницях (у пікселах) або у відсотках:
- cols="20%, 80%" - вікно браузера розбивається на дві колонки за допомогою атрибута cols, ліва колонка займає 20%, а права 80% вікна браузера.
- rows="100, *" вікно браузера розбивається на два горизонтальних вікна за допомогою атрибуту rows , верхнє вікно займає 100 пікселів, а нижнє - простір, що залишився, заданий символом зірочки.
Як видно з даного прикладу, контейнер з атрибутом rows спочатку створює два горизонтальні кадри, а замість другого кадру підставляється ще один , який розбиває нижній горизонтальний кадр на дві колонки за допомогою атрибута cols , ліва колонка займає 20%, а права 80% вікна браузера .
Якщо браузер не підтримує кадри, у вікні буде відображено текст між тегами та . Все, що знаходиться між тегами та , ігнорується браузерами, що підтримують кадри. Таким чином розробнику потрібно написати код, що дублює вміст фреймів іншими засобами, і помістити цей код у контейнер, тоді всі користувачі зможуть побачити його веб-сторінку.
Як зазначалося, для вставки у документ окремого кадру служить непарний тег . Атрибут src задає документ, який має відображатися всередині цього кадру, наприклад: . Якщо атрибут src відсутній, відображається пустий кадр.
За замовчуванням, браузер відображає сіру і, як правило, у вигляді тривимірної лінії межу між кадрами, за допомогою якої відвідувачі можуть регулювати розмір кадру.
Кордоном кадру можна керувати, як і будь-якими іншими елементами кадру. Існує кілька атрибутів елемента , дозволяють налаштовувати межі кадрів. Товщина лінії кордону визначається атрибутом border. За замовчуванням значення товщини кордону дорівнює п'яти.
Щоб приховати межу кадру, необхідно або вказати значення ширини кордону рівним нулю, або присвоїти значення "no" або "0" атрибуту frameborder . Атрибут frameborder може приймати лише два протилежні значення. Якщо значення атрибута frameborder дорівнює "yes" або "1", то межа кадрів буде відображатися, а якщо "0" або "no", то ні. Врахуйте, що значення атрибута frameborder відрізняються для різних браузерів. Щоб вирішити цю проблему, використовуйте двічі атрибут frameborder , а для деяких браузерів потрібно ще додати атрибут framespacing зі значенням «0»:
У наступному прикладі прибираємо кордон між кадрами:
Приклад: Забираємо кордон між кадрами- Спробуй сам »
| frame_left | frame_right |
Фрейми без кордонів
Якщо ви видалите межу між кадрами, відвідувачі не зможуть змінювати розмір кадру в браузері. Ви також можете не допустити зміни розміру кадру, зберігши межі, використовуючи атрибут noresize :
За допомогою атрибуту bordercolor можна змінити колір кордону кадру, необхідно лише вказати код або відповідне ім'я зарезервованого кольору.
Нижче наведено приклад html-сторінки, яка містить описані вище атрибути управління кордоном кадру: колір кордону — червоний, змінювати розмір верхнього кадру не можна:
- Спробуй сам »
| frame_top | |
| frame_left | frame_right |
Управління кордоном кадрів
Якщо ви хочете розташувати сторінку, що відображається всередині кадру, ближче до його кордонів, або, навпаки, відсунути далі, змініть атрибути marginheight і marginwidth тега . Атрибут marginheight визначає відступ між вмістом кадру та його верхньою та нижньою межами. Синтаксис:
Атрибут marginwidth визначає відступ між вмістом кадру і його правим і лівим кордонами. Синтаксис:
Цей рядок html, наприклад, має сторінку, що відображається, впритул до межі кадру:
Якщо сторінка відображає небажану для вас смугу прокручування, ви можете вирішити цю проблему, вказавши атрибут scrolling = "no" у тэзі . Але врахуйте, що якщо кадр буде недостатньо великим, щоб відобразити весь вміст сторінки, то у відвідувача не буде ніякої можливості прокрутити сторінку, що відображається.
Посилання всередині кадрівПерехід за посиланням у звичайному HTML-документі здійснюється таким чином: натискаєте посилання і поточний документ замінюється новим у поточному або новому вікні браузера. При використанні кадрів схема завантаження html-документів відрізняється від звичайної і головна відмінність - це можливість завантажувати html-документ в один кадр з іншого кадру.
Для завантаження документа у певний кадр використовується атрибут target тега . Як значення атрибута target використовується ім'я кадру, в який завантажуватиметься документ, вказаний атрибутом name тега . Варто також відзначити, що ім'я кадру має починатися або з цифри або з латинської літери. Наступні імена використовуються як зарезервовані:
Для зовнішніх посилань слід задавати як значення для атрибута target або _top , або _blank для того, щоб сторонні проекти відображалися не у ваших кадрах, а займали повне вікно браузера.
У наступному прикладі зображено HTML-документ, у правий кадр якого завантажується сторінка за посиланням, поміщеним у верхній кадр. Посилання на документ, який відкриється у правому кадрі:
Правому кадру надається ім'я frame_right:
Щоб документ завантажувався у вказаний кадр, використовується конструкція target="frame_right", як показано в прикладі:
Приклад: Посилання на інший кадр- Спробуй сам »
Посилання на інший кадр
Ваш браузер не відображає кадри
Плаваючі кадриЕлемент (скорочення англійського терміну "плаваючий кадр") дозволяє вбудувати в будь-яке місце веб-сторінки окремий HTML-документ або інший ресурс. Вміст плаваючого (вбудованого) кадру може бути будь-яка НТМL-сторінка, як з вашого ресурсу, так і з іншого веб-сайту. Як ви вже зрозуміли, плаваючі кадри створюються за допомогою елемента , який на відміну від тега вставляється не між тегами і , а між тегами і .
В елементі можна використовувати ті ж атрибути, що і для кадру, за винятком атрибута noresize - на відміну від звичайних кадрів, для вбудованих кадрів можливість зміни розмірів на екрані не передбачена:
| src | використовується для вказівки URL-адреси сторінки, що відображається у кадрі |
| height | встановлює висоту вікна плаваючого кадру в пікселах або % |
| width | встановлює ширину вікна плаваючого кадру в пікселах або % |
| name | ім'я кадру, яким до нього можна буде звертатися в посиланнях |
| frameborder | задає обрамлення у кадрів, може приймати значення 1 (є обрамлення) або 0 (немає обрамлення) (У HTML5 не підтримується ) |
| marginwidth | відступ ліворуч і праворуч від змісту до кордону кадру (HTML5 не підтримується ) |
| marginheight | відступ зверху і знизу від змісту до межі кадру (HTML5 не підтримується ) |
| scrolling | визначає вид смуг прокручування у кадру і приймає значення yes (є смуги), no (немає смуг) і auto (смуги з'являються при необхідності) (В HTML5 не підтримується ) |
| allowfullscreen | дозволяє для кадру повноекранний режим |
| hspace | Горизонтальний відступ від кадру до навколишнього контенту |
| vspace | вертикальний відступ від кадру до навколишнього контенту |
| align | визначає вирівнювання кадру |
У наступному прикладі розміри плаваючого кадру задані в пікселях, однак ви можете задавати їх і в %:
Ім'я: document.f.h.value=window.navigator.appName;
8.5. Надсилання даних із прихованих полів формиПісля натискання кнопки в адресному рядку ви побачите, що крім user=ім'я є h=ім'я_вашого_браузера . У заповненій формі поля h не було видно. Таким чином, форма передала на сервер
Приклад 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) ;
Функція 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 данимивідносяться:
| Об'єкт чи клас Властивості | document |
| cookie , domain , lastModified , location , referrer , title , URL , links , forms |
Опис
< iframe name = "buffer" src = "about:blank" style = " width : 0px ; height : 0px ; overflow : hidden ; border : none ; " >Найпростіший і найпоширеніший спосіб - використовувати прихований кадр, в який і будуть завантажуватися дані. Зазвичай такий кадр реалізується за допомогою елемента IFRAME.
Використовувати display:none для приховування кадру не можна - Опера не дозволить звернутися до такого кадру. (Альтернативне працююче рішення - position:absolute; visibility:hidden; width:0px; height:0px; .)
// Ф-я буде викликана при отриманні даних від сервера function frameCallback (data) ( // Якісь дії з отриманими даними)
Коли скрипту потрібно отримати якісь дані із сервера, він дає команду на завантаження сторінки в цей iframe:
Window. frames["buffer"]. location = url;
// url - GET-запит до сервера
Можна також використовувати сабміт невидимої форми з target = buffer . Це дозволить передавати дані на сервер методом POST.- Сервер у відповідь повинен сформувати та повернути сторінку з JavaScript кодом, який викличе callback-функцію:
- parent. frameCallback("received data");
- Очевидність реалізації: просто IFRAME-перше, що спадає на думку.
- Можливість надсилати в IFRAME дані довільно форми (у тому числі динамічно створеної), що вирішує проблеми з кодуванням даних (усі перекодування виконує браузер).
- Великі витрати пам'яті (фактично кожен IFRAME — це окремий маленький браузер).
- Складнощі в Opera: можна звернутися тільки до вмісту того IFRAME, під час створення якого було вказано атрибут src, що збігається з ім'ям поточного сайту.
- Компоненти використовуються за їх прямим призначенням.
- Велика економія пам'яті, порівняно з IFRAME.
- Рішення специфічні для IE і Mozilla/Firefox (в IE взагалі не працює з вимкненими ActiveX), Opera підтримка є тільки починаючи з версії 8.
- Хороша кросбраузерність. Ідентичний код і метод у різних браузерах (у тому числі працює в Opera).
- Економія пам'яті проти IFRAME.
- Не псується history.
- Метод не спирається на особливості браузерів і працює в IE5.0+, Mozilla 1.7+, Firefox 1.0+ та Opera 7.3+ (тут "+" означає "в цій і новіших версіях"). Крім того, не використовує ні ActiveX, ні IFRAME.
- Неможливо надіслати на сервер багато даних (обмеження на довжину QUERY_STRING).
- Необхідно в серверному скрипті працювати з Unicode (PHP для цього є розширення iconv).
- Браузери по-різному працюють з динамічно створеними SCRIPT-тегами, тому кросбраузерне рішення містить низку хаків.
Фрейми поділяють вікно браузера окремі області, розташовані поруч друг з одним. У кожну з таких областей завантажується самостійна веб-сторінка. Оскільки навколо кадрів існує багато розмов про їх необхідність, далі наведемо переваги та недоліки кадрів, щоб можна було самостійно вирішити, чи варто їх використовувати на своєму сайті.
Переваги кадрів ПростотаЗа допомогою кадрів веб-сторінка розмежовується на дві області, які містять навігацію по сайту та його контент. Механізм кадрів дозволяє відкривати документ в одному кадрі, за посиланням, натиснутою в іншому кадрі. Такий поділ веб-сторінки на складові інтуїтивно зрозумілий і логічно зумовлений.
ШвидкістьДля верстки без кадрів характерне розміщення на одній сторінці та навігації та змісту. Це збільшує обсяг кожної сторінки і в сумі може суттєво вплинути на обсяг інформації, що завантажується з сайту. Оскільки кадри використовують розділення інформації на частини, сторінки з ними завантажуватимуться швидше.
РозміщенняФрейми надають унікальну можливість - розміщення інформації точно у потрібному місці вікна браузера. Так, можна помістити кадр унизу браузера і незалежно від прокручування вмісту, ця область не змінить свого положення.
Зміна розмірів областейМожна змінювати розміри кадрів "на льоту", чого не дозволяє зробити традиційна верстка HTML.
ЗавантаженняЗавантаження веб-сторінки відбувається лише у вказане вікно, решта залишаються незмінними. За допомогою мови JavaScriptможна здійснити одночасне завантаження двох і більше сторінок у кадри.
Недоліки кадрів НавігаціяКористувач часто опиняється на сайті, зовсім не уявляючи, куди він потрапив, тому що лише натиснув на посилання, отримане в пошуковій системі.
Щоб відвідувачу сайту було простіше розібратися, де він знаходиться, на кожну сторінку розміщують назву сайту, заголовок сторінки та навігацію. Фрейми зазвичай порушують цей принцип, відокремлюючи заголовок сайту від змісту, а навігацію від контенту. Уявіть, що ви знайшли відповідне посилання в пошуковій системі, натискаєте на неї, а в результаті відкривається документ без назви та навігації. Щоб зрозуміти, де ми знаходимося або подивитися інші матеріали, доведеться редагувати шлях в адресному рядку, що в будь-якому випадку завдає незручності.Погана індексація пошуковими системамиПошукові системи
погано працюють із фреймовою структурою, оскільки на сторінках, які містять контент, немає посилань на інші документи.Внутрішні сторінкине можна додати до «Закладки»
Фрейми приховують адресу сторінки, де знаходиться відвідувач, і завжди показують лише адресу сайту. З цієї причини сторінку, що сподобалася, складно помістити в закладки браузера. Несумісність зрізними браузерами
Параметри кадрів мають властивість абсолютно по-різному відображатися в різних браузерах. Причому протиріччя з-поміж них настільки явне, що одні й самі параметри інтерпретуються браузерами абсолютно по-своєму.Непрестижність
Слід зазначити, деякі наведені недоліки цілком обходяться. Так, за допомогою скриптів можна зробити, що відкритий у браузері окремий документ формується з усією кадровою структурою. Пошукові системи також краще індексують фреймові документи, ніж це було кілька років тому.