Thunkable X: интерактивный web-интерфейс в офлайн? Возможно!
Многие знают, что выполнить в браузере код 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-редакторе, а затем копировать его в единственный тектовой блок. Первые три текстовых блока являются заголовком, а оставшиеся - данными. Для получения динамики вместо текстовых блоков используйте блоки переменных.