Фреймы

Автор: Анна Лысак и Татьяна Головко Дата публикации: 17.06.2011

Фреймы — одна из тех функций, использования которых лучше избегать в мобильной разработке. Помню 1997 год (эпоха Microsoft FrontPage) — все радостно пользовались методом фреймов, создавали фиксированные меню и соединяли фреймы между собой ссылками. И это было счастливое время, которое закончилось, когда на сцену вышли поисковые роботы и сразу фреймы стали худшей вещью, которую ты мог сделать на своем сайте. Да, может фоновая музыка на сайте гораздо хуже, но факт остается фактом — использование фреймов сегодня подходит только для сайтов интранет и приложений. Подобную функциональность сегодня может дать намного более универсальный Ajax.

Механизм HTML-фреймов позволяет разделить документ на "n" под-документов, по вертикали и/или по горизонтали. Каждый фрейм является отдельным документом (и это проблема для поисковых роботов) и каждый фрейм управляется отдельной полосой прокрутки (и это уже проблема для мобильного мира).

Мы уже знаем, что даже при большой области просмотра в мобильном устройстве экран все равно остается маленьким. Разделение этого экрана на более мелкие экраны (фреймы) может создать дополнительные трудности. Единственная ситуация, в которой фреймы могут быть полезны — это определение фиксированного тулбара в верхней или нижней части документа. Но и такой вариант по-прежнему создает проблемы с поисковой системой и, кроме этого, многие мобильные браузеры не работают с фреймами.

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

Давай я подведу итог: не используй фреймы в мобильной разработке. Встроенный фрейм (или iframe) — современный способ создания фреймов (хоть этот метод и был представлен в Internet Explorer в 1997 году). Тег <iframe> не является частью стандартов XHTML, но, при этом, в мобильных браузерах он дает лучшие результаты, чем фреймы. Сегодня iframes часто используются для размещения рекламы, котороя расположена на стороннем сервере… Если есть возможность — постарайся обходиться без использования iframes, если такой возможности нет — сначала изучи таблицу 6.18, где перечислены браузеры с поддержкой iframes.

Табл. 6.18. Таблица поддержки фреймов и встроенных фреймов
Браузер/ Платформа Фреймы iframes
Safari Да Да
браузер Android Да Да
Symbian/S60 Да Да
Nokia Series 40 Да в 6-м выпуске
Нет до 6-го выпуска
Да, на устройствах с экраном 240px шириной
Нет в выпусках Lite
webOS Да Да
BlackBerry Да, но показывает их один под другим вертикально. Да с версии 4.0,
Нет до версии 4.0
NetFront Да с версии 3.4 Да с версии 3.4 только в некоторых устройствах
Openwave (Myriad) Показывает фреймы как ссылки Нет
Internet Explorer Да Да
Motorola Internet Browser Не показывает фреймы на серии v3 и показывает фреймы в более новых устройствах Нет
Opera Mobile Да Да
Opera Mini Да с версии 4.0 Да

i-mode XHTML

В японских устройствах NTT DoCoMo используется их собственная версия XHTML с основанными на старом cHTML расширениями для XHTML и CSS. Для обслуживания (передачи) файлов i-mode XHTML требуется новый DOCTYPE и кодировка UTF-8 или Shift-JIS (для японских символов). Например, в последней версии первые строки файла будут примерно такими:

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//i-mode group (ja)//DTD XHTML i-XHTML(Locale/Ver.=ja/2.3) 1.0//EN" "i-xhtml_4ja_10.dtd">

На время написания этой статьи последней версией i-mode XHTML была 2.3, а есть еще не-XML версия, которая называется i-mode HTML (текущая версия 7.2). i-mode Browser 2.0 — браузер, который присутствует на устройствах, выпущенных после мая 2009 года и он включает последние версии режимов i-mode HTML и XHTML.

Есть отличный англоязычный портал для i-mode Browser версий 1.0 и 2.0 на http://www.nttdocomo.co.jp/english/service/imode/make/content/browser.

Но есть хорошая новость: в последних версиях i-mode HTML и i-mode XHTML поддерживаются практически все теги из XHTML MP. Перечень поддерживаемых атрибутов немного отличается, но многие новые атрибуты и значения доступны в качестве расширений i-mode. Например, у элемента <li> может быть атрибут type со значением circle, числовое текстовое поле ввода определяется при помощи type="text" и istyle="3".

Куда дальше