Написание JavaScript для мобильных браузеров

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

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

Табл. 8.1. Таблица поддержки JavaScript
Браузер/ Платформа Поддержка JavaScript
Safari Да
браузер Android Да
Symbian/S60 Да
Nokia Series 40 Да
webOS Да
BlackBerry Да с версии 3.8
Может быть отключен пользователем или компанией, в этом случае срабатывает noscript
NetFront Да
Openwave (Myriad) Недоступен в Openwave; да в Myriad Browser V7
Internet Explorer Да
Motorola Internet Browser Да
Opera Mobile Да
Opera Mini Да, но все действия после загрузки скрипта будут выполняться на сервере, создавая обратную передачу

Так как в Openwave не поддерживается JavaScript, а Myriad 7 сегодня не часто встретишь на мобильных устройствах далее в таблицах о поддержке JavaScript Openwave/Myriad упоминаться не будет.

Особое внимание нужно обратить на прокси-браузеры вроде Opera Mini. Напомню, что такие браузеры рендерят твой веб-сайт на своем сервере, а пользователю отправляют скомпилированный сжатый контент. Получается, что у пользователя нет браузера, который может обрабатывать файлы XHTML или JavaScript-код.

Для старых браузеров без поддержки JavaScript, или же для тех, в которых он отключен, мы можем использовать тег <noscript>.

Когда я говорю о мобильном JavaScript, то я на самом деле говорю о том же самом коде, с которым ты уже хорошо знаком: тег <script> с каким-то кодом или же тег <script> с внешним источником. Во многих старых браузерах применяется старый способ определения языка сценариев (language="javascript"), а для многих определение не нужно:

	<script type="text/javascript">
	// Code goes here
	</script>
	<script src="mysource.js" type="text/javascript">

В ECMAScript Mobile Profile есть два новых типа тега <script>: application/ecmascript и text/ecmascript и они указываются в качестве предпочтительных типов для ESMP-совместимого кода. Кроме того, для документов XHTML MP рекомендуется применять text/javascript, как тип наилучшей поддержкой в не-MP браузерах. Я рекомендую использовать хорошо известный text/javascript.

Выполнение кода

Выполнить код JavaScript можно четырьмя разными способами:

  • Из тега <script>;
  • С помощью обработчика событий;
  • Из ссылки при помощи протокола javascript: URL;
  • Из закладки (bookmarklets) при помощи протокола javascript: URL.

Bookmarklets

bookmarklet — закладка в браузере, содержащая некоторый код JavaScript с использованием javascript: protocol URL. Когда пользователь активирует закладку, JavaScript-код выполняется во время открытия документа. Это позволяет нам осуществлять обширное тестирование, отладку и выполнять другие функции на любой веб-странице.

В Интернет есть bookmarklets — большие приложения, написанные в одну JavaScript-строку. Для декстопной разработки мне больше всего нравится ресурс (http://lab.arc90.com/experiments/readability).

В мобильных устройствах главная проблема с bookmarklets в том, как их вообще добавить. В декстопном мире просто перетаскивается ссылка с кодом JavaScript в область закладок. В мобильном устройстве так сделать не выйдет, поэтому bookmarklets можно применять, только если если ты собираешься управлять и синхронизировать их с декстопного компьютера (например, через iTunes для iPhone).

В Интернете есть много bookmarklets для iPhone, в том числе те, которые в мобильном браузере могут показать исходный код страницы. Такое свойство полезно для тестирования или отладки или же для «гиковских» функций.

В таблице 8.2 показано, какие способы и в каких браузерах работают.

Табл. 8.2. Таблица поддержки Script execution
Браузер/ Платформа Script Обработчик события URL
Safari Да Да Да
браузер Android Да Да Да
Symbian/S60 Да Да Да
Nokia Series 40 Да No before 6th edition Да
webOS Да Да Да
BlackBerry Да No before 4.6 Да
NetFront Да Да Да
Internet Explorer Да Частично Да
Motorola Internet Browser Да Нет Да
Opera Mobile Да Да Да
Opera Mini Да Нет Нет

Если в устройстве нет поддержки JavaScript (не путать с теми, где он просто отключен), пользователь в виде текста увидит сам код JavaScript. Убрать эту проблему можно путем вставки HTML-комментария после тег <script>:

	<script type="text/javascript">
	<!--
	// JavaScript code here
	-->
	</script>

Куда дальше