Возможности и различия HTML, CSS и JavaScript

Возможности и различия HTML, CSS и JavaScript (HTML)

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. При разработке приложений для Windows 10 см. раздел последняя документация]

Приложения среды выполнения Windows на платформе JavaScript позволяют создавать приложения с помощью HTML, CSS и JavaScript. Хотя программирование приложений среды выполнения Windows на JavaScript аналогично созданию разметки и кода для веб-сайта, приложения среды выполнения Windows на JavaScript содержат дополнительные компоненты и имеют некоторые отличия с точки зрения использования существующих функций HTML. Здесь мы рассмотрим эти различия.

Необходимые условия

Поддержка HTML

Приложения среды выполнения Windows на JavaScript поддерживают большинство функций HTML5, таких как элементы canvas, SVG, video и audio. В них также поддерживается большинство возможностей каскадных таблиц стилей уровня 3 (CSS3), таких как двух- и трехмерные преобразования, переходы и анимации.

В целом написание HTML-кода для приложения среды выполнения Windows на JavaScript очень похоже на создание HTML-кода для Internet Explorer 11, работающего в стандартном режиме. Тем не менее существуют некоторые различия: в следующих разделах описаны новые мощные возможности, предоставляемые в приложениях среды выполнения Windows на JavaScript, а также отличия в работе некоторых существующих API HTML и DOM.

Дополнительные возможности

Приложения среды выполнения Windows на JavaScript предлагают множество новых функций, которые позволяют расширить возможности ваших приложений:

  • Расширенная поддержка касаний.
  • Более полный контроль внешнего вида и удобства использования пользовательского интерфейса.

    Приложения среды выполнения Windows на JavaScript предоставляют дополнительные компоненты со стилями ("частями") для многих существующих элементов управления HTML и всех новых элементов управления библиотеки Windows для JavaScript. Эти дополнительные компоненты (части) улучшают внешний вид и повышают удобство использования ваших элементов управления. Дополнительные сведения о стилях элементов управления см. в разделе Краткое руководство: стили элементов управления.

  • Доступ к среде выполнения Windows.

    Среда выполнения Windows — это набор API, который разработан для приложений среды выполнения Windows и обеспечивает работу с сетью, улучшенный анализ XML, доступ к системе, доступ к устройствам и многое другое. Полный список возможностей среды выполнения Windows см. в справочнике по среде выполнения Windows.

    Среду выполнения Windows также можно использовать для написания собственных библиотек на C#, Visual Basic или C++. В дальнейшем вы можете обращаться к этим библиотекам с помощью JavaScript в вашем приложении среды выполнения Windows на JavaScript.

  • Элементы управления, например DatePicker, TimePicker и ListView — элемент управления для работы с данными, который можно настроить по своему усмотрению и привязать к различным типам данных, включая XML и веб-службы. Эти элементы управления входят в состав библиотеки WinJS (WinJS).

    Полный список таких элементов управления см. в разделе Список элементов управления.

  • Доступ к WinJS.

    WinJS — это набор файлов JavaScript и CSS, которые упрощают создание приложений среды выполнения Windows на JavaScript. Данную библиотеку можно использовать в сочетании с HTML, CSS и средой выполнения Windows для создания приложений.

Объекты среды выполнения Windows

Среда выполнения Windows предоставляет API для более глубокого доступа к системе. Вы можете создать собственные объекты для проекта на C#, VB и C++, а затем включить эти объекты в свой проект как библиотеку кода.

Различия

Как правило, API HTML и DOM работают так же, как и в Windows Internet Explorer в стандартном режиме. Однако есть кое-какие отличия. Некоторые из них являются результатом того, что работа происходит в оболочке Windows, определяющей, какие типы окон можно открывать. Другие отличия связаны с моделью безопасности приложения Магазина Windows на JavaScript.

Создание окон и управление ими

Windows: создание окон и управление ими:  

В оболочке Windows активное приложение использует одно окно, которое занимает большую часть экрана. Вы не можете создавать новые окна, изменять размеры окон или перемещать их.

Работа с объектом window

Некоторые методы объекта window, в том числе alert, prompt, open, moveBy, moveTo, resizeBy и resizeTo, не работают в приложениях среды выполнения Windows на JavaScript. Страница, запущенная в локальном контексте, может использовать метод window.close для завершения работы приложения, но это следует делать только при возникновении неустранимой ошибки. Страницы, запущенные в веб-контексте, не могут использовать метод window.close.

Базовая навигация

Одной из простейших и чаще всего используемых форм навигации является гиперссылка. Приведенный здесь фрагмент кода создает гиперссылку для перехода на страницу page2.html.


<p><a href="page2.html">Go to page 2</a></p>

Так как это относительная ссылка, то система предполагает, что page2.html — это локальная страница, являющаяся частью вашего приложения. При щелчке этой ссылки откроется страница page2.html. Локальные страницы, такие как page2.html, выполняются в локальном контексте.

В следующем примере добавляется ссылка на внешний веб-сайт www.bing.com:


<p><a href="ms-appx:///page2.html">Go to page 2</a></p>
<p><a href="http://www.bing.com">Search the web</a></p>


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

Это происходит потому, что приложения среды выполнения Windows на JavaScript не могут выполнить переход верхнего уровня на внешнюю страницу. Они могут только отобразить внешние веб-страницы в элементе управления WebView или iframe. Дополнительные сведения см. в разделе Как создавать ссылки на внешние веб-страницы. Дополнительные сведения о различных протоколах, которые можно использовать для создания связи (например, ms-appx:/// и ms-appx-web:///), см. в статье Как добавлять ссылки на содержимое.

Страницы локального и веб-контекста

Для понимания различий в поведении разметки и кода в браузере и в приложении среды выполнения Windows на JavaScript необходимо сначала понять разницу между локальным контекстом и веб-контекстом.

Приложение среды выполнения Windows на JavaScript состоит как минимум из одной HTML-страницы. Эта страница и другие добавленные в приложение страницы обычно запускаются в локальном контексте приложения. При использовании iframe для перехода к удаленной странице эта страница запускается в веб-контексте и имеет ограниченный доступ к вашей системе.

С помощью раздела ApplicationContentUriRules манифеста пакета приложения вы можете предоставить странице в веб-контексте доступ к устройствам определения географического положения вашей системы (если ваше приложение имеет разрешение на доступ к этим функциональным возможностям), а также доступ к буферу обмена.

Хотя такие страницы и имеют больше прав доступа к системе по сравнению с другими внешними страницами, страницы веб-контекста обладают меньшими правами доступа, чем страницы локального контекста. Например, страница в веб-контексте не может обратиться к среде выполнения Windows, а страница в локальном контексте может. Дополнительную информацию о различиях локального и веб-контекстов см. в статье Возможности и ограничения контекстов.

Модели навигации

Почти все веб-сайты предоставляют навигацию в какой-либо форме, обычно в виде гиперссылок для перехода на другие страницы. Каждая страница имеет свой собственный набор функций JavaScript и данных, набор HTML-файлов для вывода на экран, сведения о стиле и так далее. Такая модель навигации называется многостраничной навигацией.

Другой моделью является одностраничная навигация, при которой приложение использует одну страницу, куда по мере необходимости загружаются дополнительные данные. Приложение по-прежнему состоит из набора файлов, но вместо перемещения от одной страницы к другой оно загружает на главную страницу другие документы (с помощью объектов Page или HtmlControl). Поскольку главная страница приложения никогда не выгружается, сценарии тоже никогда не выгружаются, что упрощает управление активацией, состоянием и анимацией. Когда пользователи запускают ваше приложение, его гибкий интерфейс не требует пауз для загрузки новых страниц и никогда не отображает пустой экран. Мы рекомендуем использовать в приложениях Магазина Windows на JavaScript одностраничную модель навигации.

Асинхронные функции

Для обеспечения быстрого взаимодействия с пользователем многие функции WinJS и среды выполнения Windows выполняются асинхронно. Таким образом ваше приложение может отвечать на действия пользователя и одновременно выполнять работу в фоновом режиме. Вместо прямого возвращения значения асинхронная функция возвращает объект Promise для получения значения в будущем. Дополнительные сведения об асинхронном программировании см. в разделе Асинхронное программирование на JavaScript.

Динамическое добавление HTML

Страница в локальном контексте приложения имеет больший доступ к системе по сравнению с другими веб-страницами (или страницами веб-контекста). Она может обратиться к среде выполнения Windows, а также, в зависимости от разрешений приложения, к файловой системе и устройствам. По этой причине следует избегать выполнения потенциально опасного кода.

Для защиты от добавления фрагментов кода в сценарий и помощи в защите системы от потенциально вредоносного кода HTML, добавляемый на страницу в локальном контексте, фильтруется во время обработки методом toStaticHTML. Добавление HTML, содержащего неизвестный элемент, обработчик события, сценарий или ссылку на сценарий, неизвестный псевдокласс или псевдоэлемент CSS, приведет к исключению при попытке добавления HTML в модель DOM страницы.

Данное ограничение безопасности влияет на следующие свойства и методы:

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

  • createElement

    Явное создание новых элементов, которые можно добавить в DOM. Так как все элементы создаются явно, к ним не применяется фильтр HTML по критерию безопасности. Предполагается, что вы полностью контролируете все добавляемые данные, поэтому отсутствует риск случайного включения вредоносного кода.

  • MSApp.execUnsafeLocalFunction

    Отключение фильтра HTML по критерию безопасности для указанной функции. Вы можете создать функцию, вставляющую содержимое, которое при обычных условиях было бы заблокировано, и использовать MSApp.execUnsafeLocalFunction для выполнения этой функции.

    
    
    var someElement = document.getElementById('someElementID');
    MSApp.execUnsafeLocalFunction(
        function() { someElement.innerHTML = '<div onclick="console.log(\"hi\");">hi</div>' }
    );
    
    
    
    
  • WinJS.Utilities.setInnerHTMLUnsafe, WinJS.Utilities.setOuterHTMLUnsafe

    Запись указанного HTML-кода без использования фильтра HTML по критерию безопасности. (Эти функции входят в состав WinJS.)

Так как все эти функции имеют ограниченный доступ к системе, страницы в веб-контексте не подвержены этим ограничениям: такие свойства и функции, как innerHTML и pasteHTML, не выполняют проверку на наличие потенциально вредоносного кода.

События DOM

В целом события DOM для приложений среды выполнения Windows на JavaScript выполняются так же, как и в веб-браузере, однако есть и некоторые отличия. Список событий, работающих по-другому, см. в разделе Список изменений API для модели DOM и HTML.

Элементы управления ActiveX

Приложения среды выполнения Windows на JavaScript не поддерживают пользовательские элементы управления ActiveX. Если вам нужен элемент управления пользовательского интерфейса, используйте элемент управления HTML, элемент управления WinJS или создайте собственный элемент управления WinJS. Если требуется пользовательская логика, создайте настраиваемый объект среды выполнения Windows.

Кодировка

Весь код HTML, JavaScript и CSS, используемый в приложении среды выполнения Windows на JavaScript, должен использовать кодировку UTF-8.

Кэширование байт-кода

При запуске приложения среды выполнения Windows на JavaScript вне среды отладки Microsoft Visual Studio выполняется оптимизация его производительности. Основным этапом оптимизации является преобразование всех файлов JavaScript (с расширением JS), включенных в пакет приложения, в байт-код, который может использоваться непосредственно модулем JavaScript. Приложение может загружать и исполнять код в этих файлах быстрее по сравнению с необработанными файлами, такими как файл JavaScript в Интернете. Этот байт-код и копия исходного кода хранятся в одном файле кэша байт-кода вместе с файлами пакета. После преобразования в байт-код никакие изменения в исходных файлах не повлияют на поведение приложения до его повторного развертывания.

Использование jQuery

Вы можете использовать jQuery в вашем приложении среды выполнения Windows на JavaScript, начиная с версии 2.0. Мы рекомендуем всегда использовать последнюю версию.

Связанные разделы

Список изменений API для модели DOM и HTML

 

 

Показ:
© 2016 Microsoft