HTML iframe: приклад та особливості застосування

HTML iframe: приклад та особливості застосування

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

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


Поняття і призначення "iframe"

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

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

Однак, є достатня кількість застосувань, коли і розробник веб-ресурсу (або документа), і розробник-споживач цього ресурсу у своєму виробі зацікавлені один в одному. Наприклад, карти Google або відео з Youtube. Існують й інші затребувані ідеї: прогноз погоди, динаміка курсів біржі, показання приладів, статистичні дані.

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

HTML «iframe»: приклад умов для застосування

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

Копіюючи пропонований "HTML-код", можна безпечно вставити бажаний потік відеоінформації на свій сайт. У теґі буде вказано все необхідне: і розміри та умови відображення. Зручно розмістити тег "iframe" в HTML div - це дозволить виконати оптимальне позиціонування стороннього контенту всередині власного сайту.


Рекурсія і фрейми: практичний приклад

Сумнівно, що iframe очікує краща доля ніж frame. Розвиток парсингу та актуальність інформації, зібраної за критеріями, роблять примарними перспективи ідеї відображення чужого контенту у форматі "як є". Стає кращим формат "як треба".

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

У прикладі вище є три HTML "iframe" прикладу:

  • карта Google;
  • відео зі стороннього сайту;
  • відео з Youtube.

Останній, четвертий фрейм посилається на сайт, в якому знаходяться всі ці фрейми. Картинка ліворуч - сайт після завантаження. Картинка праворуч - сайт у процесі відображення через деякий час (відео в кожному фреймі "текло" у своєму ритмі), але повзунок в (4!) зміщено вниз. Добре видно, що карта і відео як і раніше відображені, але ось відображення самого себе не спрацювало.

Код для "iframe" і стиль для цього прикладу показано нижче.

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

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


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

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

Власний парсинг або сторонній контент

Що таке фрейми з точки зору контенту сайту? Це його доповнення. Розробник робить веб-майданчик для торгівлі титульними знаками Webmoney, і його рішення розмістити віконце з динамікою курсів валют розумно. Контент безпосередньо від самої біржі перспективніше ніж парсинг і власна розробка.

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

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


  • туристичне агентство - маршрути і карта руху;
  • доставка вантажів - розрахунки шляху, фінансових витрат, заправок паливом тощо;
  • навігатори по містах і регіонах...

У цьому контексті фрейми затребувані, роблять сайт практичнішим. Причому розробник може просто створити вікно стороннього контенту. HTML "iframe" - приклад практичного поділу праці. Одна організація постачає інформацію, інша її надає клієнту.

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

У будь-якому випадку, застосування тегу iframe є, і воно затребуване в значному спектрі практичних завдань.