Thunkable под iOS: интерактивный web-интерфейс в офлайн? Возможно!
DroidScript

Thunkable под iOS: интерактивный web-интерфейс в офлайн? Возможно!

© 2016-2018 Автор материалов - Александр Страшко admin@starport.ru
DroidScript
инструменты для мобильной разработки

Thunkable под iOS: интерактивный web-интерфейс в офлайн? Возможно!

© 2016-2018 Автор материалов - Александр Страшко admin@starport.ru
Оглавление  
Дата изменения 15.04.2018

Многие знают, что выполнить в браузере код JavaScript можно путём его ввода в адресную строку, например, так: javascript:alert('Hello'). Данный способ позволяет вывести в окно и HTML, передав его методу document.write. Однако, Web Viewer не поддерживает javascript в свойстве URL и всё кажется грустным, но не для нас.

Вся "магия" заключается в том, чтобы в адресной строке вместо URL указывать URI данные. Базовый формат выглядит так:

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

Например, если в адресную строку ввести:

data:text/html, <html contenteditable>

, то в рабочем поле браузера можно будет редактировать текст как в стандартном блокноте с возможностью его сохранения в файле по Ctrl+S.

После появления первой информации о такой возможности одни с энтузиазмом принялись превращать браузер во всевозможные редакторы текста, а другие - обсуждать бесполезность этого занятия. Но для нас этот подход обладает ощутимой пользой. Данные URI можно использовать как для вывода текстовой, так и графической информации, например:

data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub//ge 8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1h LnjM5UUde0ECwLJoExKcppV0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g 77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7

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

Ниже показан пример создания интерактивного элемента с использованием HTML, CSS и JavaScript.

Пример

Диалог создания нового блока

Для наглядности весь код разбит на несколько текстовых блоков. На практике же проще отлаживать код в web-редакторе, а затем копировать его в единственный тектовой блок. Первые три текстовых блока являются заголовком, а оставшиеся - данными. Для получения динамики вместо текстовых блоков используйте блоки переменных.

Оглавление