Iframe і Frame - що це таке і як краще використовувати фрейми в Html

1. Що це таке і чим відрізняється Iframe від Frame
2. Iframe - вбудований фрейм в стандарті Html 5
3. Фрейми на основі тегів Frame і Frameset - їх структура
4. Створення структури на основі Frameset і його атрибутів Cols і Rows
5. Вказуємо шлях в атрибуті Src елемента Frame
6. Як відкривати документи за посиланням у фреймі
7. Атрибути тега Frame для налаштування зовнішнього вигляду вікон
8. Чому не можна робити сайт на фреймах?

Привіт, шановні читачі блогу KtoNaNovenkogo.ru. Сьогодні мова піде про фрейми в мові Html. Ясна річ, що почнемо ми спочатку, а саме з того, що це таке за звір. Так само поговоримо про сьогодення (Frame) і майбутньому (Iframe) цих елементів в мові гіпертекстової розмітки поточної версії і в новому стандарті Html 5 при верстці сайтів .

В кінці статті, після детального опису процесу створення вбудованих фреймів і їх класичної структури в Html коді (вже рідко використовується), ми торкнемося питання актуальності побудови сайту на них, а так само обговоримо можливі способи їх застосування в поточний період часу на прикладі мого блога.

Що це таке і чим відрізняється Iframe від Frame

Що ж це таке? Виявляється, що вони можуть використовуватися не тільки на сайтах, але і в будь-яких додатках до програм, але відрізняються тим, що вікно web сторінки або ж додатка буде розділено на кілька областей, в кожну з яких завантажений якийсь окремий документ. Причому, ці області фреймів поводяться незалежно одна від одної.

Напевно, найбільш наочний приклад їх використання, з яким стикалися практично всі з вас, це так звані файли допомоги (хелпи), які є у багатьох програм встановлених на вашому комп'ютері.

У ліве вікно завантажений файл з меню хелпа, а в правому виводиться відповідний вибраному пункту меню документ. Примітно, що така структура дозволяє не довантажувати в ліве вікно повторно файл з меню при відкритті нового документа в правому. Саме в цьому і полягає основна перевага використання фреймів в Html.

Власне, сама назва цих елементів слід трактувати саме як самостійне вікно. За допомогою фреймів у нас з'являється можливість розбити одне велике вікно на кілька фрагментів, які в свою чергу можуть служити приймачами для окремих незалежних один від одного документів (сторінок, текстів, зображень, відео і т.п.).

Як створюється фреймова структура в мові гіпертекстової розмітки? Якщо говорити про стандарт Html 4.01 (за класифікацією валідатора W3C ), Який є основним на поточний момент часу, то для цього використовуються три елемента - Frame, Frameset і Noframes.

Iframe - вбудований фрейм в стандарті Html 5

Якщо ж говорити про стандарт Html 5 (наше майбутнє, деякі елементи якого вже підтримуються багатьма браузерами), то там тегів Frame, Frameset і Noframes, а так само і класичної фреймової структури вже не буде, замість них передбачений один єдиний тег Iframe (вбудований фрейм) , про який ми і поговоримо на початку, а потім вже все увага звертається на класичну схему з версії 4.01, яка зараз, власне, і використовується.

Iframe на відміну від класики, яка розглянута нижче, не вимагає заміни тега Body на теги Frameset. Тобто цей тег можна буде вставляти на звичайні сторінки, наприклад, всередині параграфа або в будь-якому іншому місці. За своєю суттю цей елемент дуже схожий вже на розглянутий нами тег Img.

Він є рядковим з заміщаються контентом, тому що поводиться в точності як рядковий елемент, але ось всередині нього відображається сторонній зовнішній контент. Таких елементів в мові Html всього чотири - Img, Iframe, Object і Embed. Тому наш герой має на увазі наявність зовнішнього файлу, який буде довантажувати в область, розмір якої задається за допомогою атрибутів цього тега.

Т.ч. Iframe є стічних елементом, в який завантажується зовнішній об'єкт (наприклад, відеоролик). А для вказівки шляху до цього файлу, який повинен довантажуватися на сторінці, служить спеціальний атрибут Src. Але на відміну від Img елемент Iframe парний, тобто є ще й закриває тег:

<Iframe src = "https://www.youtube.com/embed/fHaAsFZL1nQ"> </ iframe>

В даному прикладі показаний висновок на сторінці відеоролика з Youtube за допомогою Iframe. Для того, щоб обмежити область фрейма (вікна), куди буде довантажувати зовнішній файл, передбачені атрибути Width і Height, значення яких задаються в пікселах:

<Iframe width = "545" height = "438" src = "https://www.youtube.com/embed/fHaAsFZL1nQ"> </ iframe>

Тобто цей тег створює область, в яку завантажується якийсь зовнішній об'єкт (не важливо, з вашого чи сайту або ж з іншого ресурсу). Ширина і висота області задаються за допомогою Width і Height, а в атрибуті Src вказується шлях до цього об'єкта.

Всі ці атрибути елемент Iframe успадкував від подібних йому малих тегів з заміщаються контентом (типу вже згаданого вище Img). Ну, і ще у картинок він взяв і атрибути Hspace і Vspace, які дозволяють задати відступи від меж фрейму до оточуючого його тексту.

Так само показово, що вирівнювання вбудованого фрейму здійснюється абсолютно так само, як ми це могли бачити при вивченні картинок в Html - Обтікання і вирівнювання картинки текстом - Align в Img . Все той же Align, але вже для тега Iframe з можливими значеннями Bottom, Top, Middle, Left і Right.

Але цей елемент взяв так само і кілька атрибутів від тега Frame з класичної фреймової структури, про яку ми дуже і дуже детально поговоримо нижче по тексту. До таких атрибутів відноситься Name, значення якого можна використовувати в якості значення атрибута гіперпосилань Target для того, щоб потрібний вам документ при переході по посиланню відкривався саме в вікні цього фрейму (подробиці читайте нижче).

Так само в Iframe з тега Frame перекочував атрибут Frameborder, який має тільки два значення - або 0 (рамка навколо фрейма не відображається), або 1 (рамка видно). За замовчуванням використовується значення Frameborder = 1, тому для її видалення вам буде потрібно прописати Frameborder = "0":

<Iframe width = "545" height = "438" frameborder = "0" src = "https://www.youtube.com/embed/fHaAsFZL1nQ"> </ iframe>

З Frame в цей елемент перейшов ще й атрибут Scrolling, що має за замовчуванням значення Auto - смуги прокрутки у фреймі будуть з'являтися у міру необхідності, коли контент буде більше за розміром вікна, призначеного для його відображення.

Ну, і атрибути Marginwidth і Marginheight теж перейшли з елемента Frame. Вони будуть детально розглянуті нижче по тексту, але в двох словах - вони дозволяють зробити відступ по ширині і висоті від країв фрейму до контенту, який в нього поміщається.

Як я вже згадував, наочним прикладом використання Iframe є вставка відеоролика з ютуба на свій сайт :

Вставивши Iframe безпосередньо в web сторінку, ви отримаєте висновок ролика з ютуба. Робимо висновок, що цей елемент є сумішшю малих елементів з заміщаються контентом і, власне, класичних фреймів, про які зараз і піде мова.

Фрейми на основі тегів Frame і Frameset - їх структура

Отже, створення класичної фреймової структури починається з того, що ви прописуєте в Html коді замість відкриває і закриває тега Body, який зазвичай має бути присутнім в будь-якому документі, що його замінює контейнер на основі елементів Frameset.

Принциповим моментом є саме те, що елемент Body в цьому випадку використовувати не можна - або Body (для звичайного документа), або Frameset (при створенні фреймової структури документа):

Кожен фрейм, який ми з вами формуємо всередині головного, створюється за допомогою окремого елемента Frame. Цей тег є поодиноким і в ньому ми задаємо шлях до того документа, який повинен буде довантажувати в це вікно.

Третій елемент, який ми ще з вами не торкнулися - це Noframes. Він парний і дозволяє написати всередині себе якийсь текст, який буде оброблений браузером і відображений на web сторінці тільки в тому випадку, якщо цей самий браузер (або інший пристрій відображення) не підтримує фрейми. Це може статися, наприклад, в разі використання якогось оглядача для мобільних пристроїв.

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

Виходить так, що елемент Frameset, який використовується замість тега Body, займає все місце, яке відведено для області перегляду, а вже всередині цієї області будуть створюватися фрейми за допомогою окремих елементів Frame. У зв'язку з цим виникає питання - як ділити область перегляду між окремими вікнами або, іншими словами, як задати розмір кожного з них.

Робиться це за допомогою додавання відповідних атрибутів до елементу Frameset. Їх є цілих два - Cols і Rows. Cols задає поділ великого вікна на вертикальні фрейми або ж колонки, а Rows дозволяє розділити його на горизонтальні вікна або ж рядки.

Створення структури на основі Frameset і його атрибутів Cols і Rows

Як значення для Cols і Rows Html тега Frameset виступають числа, проставлені через кому (без пробілів). Ці числа задають пропорції тих вікон, які ми з вами хочемо отримати в результаті. Отже, скільки буде написано чисел через кому в Cols або в Rows, стільки у нас фреймів і має буде вийти в результаті.

Наприклад, за допомогою такого запису ми отримаємо три вертикальних колонки, які по ширині будуть відповідати пропорціям 2: 5: 3.

<Frameset cols = "20%, 50%, 30%">

Раз ми задали пропорції для трьох фреймів, то ми повинні будемо обов'язково прописати між відкриває і закриває тегом Frameset три елементи Frame, хоча б і без вказівки додаткових атрибутів:

В результаті наша фреймова структура, що складається з трьох порожніх вікон, буде виглядати так:

В даному прикладі розміри вікон (Frame) ми задавали за допомогою відсотків, які беруться від ширини області перегляду (це в разі використання Cols) або від її висоти (Rows). При зміні області перегляду процентне співвідношення між розмірами фреймів буде зберігатися. Але замість відсотків можна використовувати і просто числа, які означатимуть ширину або висоту в пікселях . Тут, думаю, теж ніяких труднощів в розумінні виникнути не повинно.

Але є в позначеннях розмірів і досить незвичайний варіант, який виглядає як зірочка "*". Причому, може стояти як просто «*», так і зірочка з цифрою попереду, наприклад, так «3 *». Хитра штуковина, дуже схожа на відсотки і що означає, що ми ділимо простір для Frame пропорційно.

Давайте подивимося на прикладі. Тепер виберемо розподіл області перегляду на горизонтальні рядки за допомогою Rows:

<Frameset rows = "200,500, *">

Що означає цей запис? Вся область перегляду, доступна нам по вертикалі, буде розділена на три рядки. Висота першої буде взята в 200 пікселів, другий - в 500, а ось третій рядок буде займати все залишився по висоті, тому що як її розміру використовувалася «*».

Що примітно, значення «*» і «1 *» означають одне і те ж - все залишився ми ділимо на один і цю одну частину віддаємо даному фрейму (ну, тобто все залишився).

А ось подивіться що вийде, якщо використовувати значення «*» з цифрою для поділу в пропорції:

<Frameset rows = "2 *, 100,4 *">

Як ви думаєте, які повинні будуть вийти розміри Frame в цьому випадку? Зрозуміло, що другий рядок буде однозначно мати висоту в 100 пікселів. Але як поділиться простір, що залишився по висоті між третьою і першим рядком?

Це досить просто порахувати - досить додати до двох (2 *) чотири (4 *) і розділити на цей знаменник (пам'ятаєте дроби зі шкільної програми) двійку і четвірку. Тобто ми отримаємо, що перша колонка з фреймом займе одну третину від простору, що залишилося по висоті, а третя колонка - дві третини. Або ж, іншими словами, третя буде в два рази вище першої:

Можна використовувати всі три способи завдання розмірів вікон фреймів в одному атрибуті, наприклад:

<Frameset cols = "10%, 100,4 *, 3 *, 2 *">

В результаті ми отримаємо першу колонку Frame шириною в десять відсотків від всієї доступної області, другу - 100 пікселів, а три залишилися матимуть ширину в пропорціях чотири, три і дві дев'ятих від простору, що залишилося по ширині. Ось так ось все просто і наочно.

Якщо ви хочете розбити основне вікно не тільки на горизонтальні і вертикальні фрейми, а, наприклад, на їх комбінації, то можна буде для цього використовувати вкладену структуру елементів Frameset окремо для колонок і окремо для рядків. Наприклад, щоб отримати структуру показану на скріншоті трохи нижче, то досить використовувати таку конструкцію:

Тобто спочатку ми розбиваємо за допомогою «frameset cols =" 20%, 80% "" весь доступний простір на дві колонки по вертикалі і задаємо тегом "frame" вміст правої колонки, а ось замість того, що додати елемент "frame" для лівої колонки, ми відкриваємо новий "frameset rows =" 10%, * »".

І вже за допомогою нього розбиваємо праву колонку на два рядки з фреймами, вміст яких задаємо за допомогою двох тегів «frame», після чого закриваємо обидва контейнера «frameset». Все просто і логічно.

Вказуємо шлях в атрибуті Src елемента Frame

Але це ми всі говорили про елемент Frameset і його атрибути Cols і Rows, за допомогою яких формуємо структуру і задаємо їх розміри. Тепер давайте розберемося з тим, як виводити в потрібних фреймах потрібні документи і як налаштувати взаємодію між їхніми вікнами.

Отже, як же ми управляємо зовнішнім виглядом створюваних вікон? Все це закладено в атрибутах тега Frame. Перший з них, про який варто згадати - це Src. Ми вже зустрічали його в тезі Img, коли розглядали вставку зображень в Html код. Суть його не змінилася і він як і раніше дозволяє вказати шлях до того документа, який повинен бути завантажений у фрейм.

Шлях до документа в Src може бути вказаний у вигляді відносної або абсолютної посилання . Відносні шляхи зазвичай використовуються для документа, який розташований на вашому ж ресурсі, а ось абсолютні вам знадобляться, коли ви захочете завантажити у вікно фрейма документ з іншого сайту.

Якщо не буде прописаний атрибут Src із зазначенням шляху до потрібного документа, то в вікно буде завантажений порожній документ. Особисто я колись робив подібну річ для свого блога (як додатковий елемент навігації) і при цьому створював на сервері хостингу окрему папку для нього і поміщав туди не тільки Html файлик з фреймової структурою (який назвав index.html), але і все підкачуємі в різні вікна документи, а так же файли зображень, які використовувалися в якості фону.

Тому мені було простіше всього використовувати саме відносні посилання в атрибуті Src тега Frame:

Що примітно, якщо ви заміните всі наведені в цьому коді посилання з відносних на абсолютні (типу https://ktonanovenkogo.ru/navigator/joomla.html) і відкриєте цей файл в браузері, то зазначені у Frame документи будуть довантажуючи з мого сервера і ви побачите аналогічну картинку в своєму браузері. Причому не важливо, де буде лежати ваш файл з фреймової структурою (index.html) - на вашому комп'ютері або ж на хостингу.

У наведеному на малюнку прикладі, в вікно лівого фрейму у мене завантажується сторінка з таким собі меню, яке представляє з себе звичайний маркований Html список . Але не суть важливо як формується меню, а важливо те, що станеться після натискання на будь-яку з його посилань.

Якщо ви зробите це, то все відбудеться саме так, як треба - документ відкриється в правому нижньому вікні. Але для цього мені довелося застосувати одну невелику хитрість, бо в варіанті за замовчуванням документ відкривався на весь розмір вікна, замінюючи собою фреймової структуру, що мені було зовсім не потрібно, бо зникало навігаційне меню в лівому і верхньому фреймах.

Як відкривати документи за посиланням у фреймі

Отже, коли ми говорили про гіперпосилання, то згадували такий атрибут тега «A», як Target = _blank. Пам'ятайте для чого він потрібен? Правильно, щоб відкривати документ, на який проставлено посилання, в новому вікні. За замовчуванням ж, він повинен відкриватися в тому ж самому вікні, що еквівалентно target = "_ self".

Але цим можливості Target не обмежуються. Виявляється можна додавати в нього значення у вигляді назви фрейма, яке попередньо вказується в спеціальному атрибуті Name тега Frame. Тоді документ за цим посиланням буде відкриватися не в тому ж вікні, займаючи все його простір, а в зазначеному вами Frame. Зрозуміло? Якщо не зовсім, то зараз буде зрозуміло при розборі прикладу.

Отже, повернемося до нашого прикладу наведеного на розташованому трохи вище малюнку. Нам потрібно відкривати сторінки по посиланнях з лівого вікна в правому нижньому (великому) фреймі. Отже, для початку потрібно цього великого вікна дати ім'я за допомогою атрибута Name в тезі Frame.

Зробили і назвали його «ktona». Тепер можна сміливо відкривати той файл, що завантажується в якості меню в ліве вікно і додавати до всіх тегам A в ньому атрибут Target = "ktona":

<a target="ktona" href="https://ktonanovenkogo.ru/joomla/virtuemart-joomla/ustanovka-komponenta-internet-magazina-virtuemart-reshenie-vozmozhnyx-problem.html#VirtueMart"> Історія появи Joomla і компонента VirtueMart </a>

Звичайно ж, за допомогою інструменту пошуку та заміни в Html редакторі Notepad проставити його для всіх гіперпосилань буде не важко, але навіщо ж надмірно завантажувати код, коли у нас є прекрасна можливість використовувати спеціальний тег Base, про який ми вже згадували все в тій же статті про гіперпосилання, коли говорили про використання Target blank.

Достатньо лише поставити між відкриває і закриває тегами Head елемент base target = "ktona" і всі посилання в Html коді цього документа будуть відкривати нові сторінки в зазначеному фреймі під назвою «ktona»:

До речі, якщо розглядати мій колись існував інструмент як приклад, то потрібно ще зробити так, щоб всі посилання з верхнього горизонтального вікна відкривали б свої сторінки саме в лівому вертикальному фреймі, яке служить у мене лівим меню. Що потрібно для цього зробити?

Ну, по-перше, потрібно дати ім'я лівому вертикальному кадру:

А в файлі, який завантажується в верхнє вікно (gor.html), потрібно додати елемент base target = "gor":

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

Атрибути тега Frame для налаштування зовнішнього вигляду вікон

Давайте тепер подивимося, які атрибути крім Src і Name можна використовувати в тезі Frame для настройки зовнішнього вигляду фреймів. Почнемо з Scrolling. За допомогою нього ми можемо налаштувати відображення смуг прокрутки для кожного вікна вашої фреймової структури окремо.

Scrolling має значення за замовчуванням Auto - браузер буде автоматично вирішувати, на основі розміру довантажувати у фрейм документа, відображати смугу прокрутки чи ні. Якщо документ не буде повністю поміщатися в вікно, то з'явиться смуга прокрутки, що дозволяє переглянути його весь до кінця.

Так само як значення для Scrolling можна використовувати значення Yes (смуги прокрутки у вікні будуть відображатися завжди, навіть якщо документ повністю влазить в нього) і No (смуги прокрутки взагалі ніколи не з'являтимуться, навіть якщо частина документа не влізе).

<Frame scrolling = "yes" src = "gor.html">

Я в своєму, колись існував інструменті, використовував значення за замовчуванням Auto і смуги прокрутки у фреймах з'являлися в міру необхідності:

Наступний атрибут тега Frame - Noresize - є поодиноким (у нього немає значень). Прописавши його, ви тим самим забороніть зміна його розмірів, яке за замовчуванням здійснюється простим перетягуванням кордону фреймів мишею.

<Frame noresize src = "gor.html">

При підведенні курсору миші до кордону ви побачите, що курсор перетвориться в двосторонню стрілку і тепер, натиснувши на ліву кнопку миші, можна пересувати кордон за вашим бажанням. Noresize накладає на це свавілля заборона (при підведенні курсору миші до кордону вікон, двонаправлену стрілку ви вже не побачите).

Ще один візуальний атрибут - Frameborder. C допомогою нього ви можете вказати - малювати рамку (кордон) між фреймами або ж не малювати. Frameborder може мати тільки два можливих значення - або 0 (рамку не малювати), або 1 (кордон відображати). За замовчуванням, природно, використовується значення 1.

Є одна тонкість. Якщо ви хочете прибрати видиму рамку, то вам доведеться додати Frameborder = 0 в усі теги Frame тих фреймів, видимі межі між якими ви хочете прибрати.

<Frame frameborder = "0" src = "gor.html">

Ну, і ще нам залишилося розглянути пару атрибутів тега Frame - Marginwidth і Marginheight, які задають відступи по ширині (праворуч і ліворуч) і висоті (зверху і знизу) від кордонів вікна до контенту завантаженого в нього (число означає кількість пікселів відступу):

<Frame marginwidth = "50" marginheight = "50" name = "ktona" src = "navigator.html">

Чому не можна робити сайт на фреймах?

Давайте подивимося в чому полягає принциповий недолік класичних структур, який по суті ставить хрест на їх використанні при створенні сайту. Він полягає в тому, що по Url адресою цієї фреймової структури неможливо відстежити її стан.

У складних структур можуть бути тисячі різних станів (варіанти документів відкритих в різних вікнах фреймів), але при цьому Url адресу цієї самої структури не змінюється. Через це буде неможливо користуватися закладками браузера або ж відправляти посилання на вподобані сторінки іншим користувачам. Чому?

Тому що адреса залишається незмінним і при відкритті його з закладок браузера, або ж з листа електронної пошти, ви отримаєте сторінку зі стартовим станом фреймової структури, а не те її стан, яке ви хотіли б зберегти.

Хоча, звичайно ж, ця проблема вирішувана, але вже не засобами Html, а за допомогою серверних (наприклад, Php) або клієнтських мов (ДжаваСкрипт) програмування, і рішення ці будуть працездатними не на всі сто відсотків. Такі рішення, по суті, дозволяють дописувати до Url адресою фреймової структури додаткові дані про її поточний стан, але зробити це не просто, а надійність буде не абсолютною.

Це перший мінус використання фреймів для створення сайтів і дуже вагомий, але є і ще один величезний мінус. Пошуковики, звісно ж, уже давно навчилися індексувати їх і витягати з них адреси тих документів, які завантажуються в їх вікна. Проблема в іншому.

Коли користувач переходить з пошукової видачі Яндекса або Google на ваш сайт, побудований на базі фреймової структури, то відкриється тільки той документ, який завантажувався в один з фреймів, а не вся структура. Розумієте, про що я говорю?

Користувач побачить документ і не побачить навігації по вашому сайту, бо вона буде зашита в інших вікнах, а вони завантажуються тільки в складі всієї структури.

В результаті сайт, побудований на фреймах, стає просто не юзабельним. Хоча знову ж таки є вирішення цієї проблеми на базі серверних скриптів, коли буде здійснюватися редирект з адрес окремих документів на фреймової структуру знаходиться в потрібному стані, але це знову ж таки дуже складно і не завжди надійно.

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

Наприклад, я створив фреймової структуру, яку обізвав «Навігатор» (зараз її тимчасово прибрав) і яка стала своєрідним розгорнутим зовнішнім меню для мого блогу, яке, як мені здається, має спростити роботу з ресурсом і підвищити його юзабіліті , А отже і поліпшити поведінкові чинники , Які зараз «без балди» дуже і дуже сильно впливають на просування сайту.

Але, правда, в уникненні будь-яких проблем з пошуковими системами, я закрив від індексації через robots.txt всю цю фреймової структуру, а так само додав про всяк випадок в усі її Html файли мета тег Rodots із забороною їх індексації:

<Head> <meta name = "robots" content = "noindex, nofollow"> <base target = "ktona"> <meta charset = "utf-8"> <title> JOOMLA </ title> </ head>

Але всі ці обмеження стосуються тільки структур на тегах Frame і Frameset, а вбудовані фрейми на тегах Iframe не мають ніяких видимих недоліків, і їх цілком можна і навіть потрібно використовувати на своїх проектах, хоча б для вставки відеороликів з Ютуб.

Удачі вам! До швидких зустрічей на страницах блогу KtoNaNovenkogo.ru

Збірки по темі

Використову для заробітку