С выпуском Windows 8 Microsoft представила приложения для Магазина Windows , которые могут создаваться с использованием традиционных веб-языков, использующих базовые механизмы, поддерживающие Internet Explorer 10. Это означает, что jQuery 2.0 , разработанный для наилучшей работы в современных браузерах, находится прямо дома приложение для Магазина Windows!
Понимание контекста
Приложения Магазина Windows, в отличие от Интернета, имеют два разных контекста, известные как Локальный и Веб. Из-за доступа, который код в локальном контексте имеет к API времени выполнения Windows, потребовалась новая модель безопасности.
Для достижения наилучших результатов вы будете загружать jQuery и загружать его в локальном контексте. Попытка загрузки из удаленного местоположения (такого как CDN) приведет к появлению сообщения в духе «приложение не может загрузить удаленный веб-контент в локальном контексте».
Понимание «небезопасного» кода
Манипулирование DOM — одно из самых больших изменений, с которыми вы столкнетесь при использовании jQuery в приложении Магазина Windows, в отличие от браузера.
В Интернете нередко добавлять элемент в форму просто путем передачи строки HTML в метод .append() :
|
1
|
$(«#form»).append(«<input name=’foo’ value=’bar’ />»);
|
В приложении Windows Store, которое имеет легкий доступ к компьютеру пользователя, ставки намного выше, и многое из того, что вы привыкли делать, потребует некоторого пересмотра. Вышеуказанное считается небезопасным из-за атрибута name . Есть много других элементов, атрибутов, протоколов и многого другого, которые считаются небезопасными.
Полный список того, что считается безопасным и небезопасным, см. В разделе «Как сделать HTML безопаснее: подробности для toStaticHTML» .
Это не означает, что вы не можете программно заполнить контейнер динамическими элементами; Вы просто должны принять немного другой подход. Например, вы можете использовать jQuery для создания самого элемента ввода, а не передавать его в виде строки:
|
1
|
$(«<input>», { name: «foo», value: «bar» }).appendTo(«#form»);
|
В приведенном выше примере вы создаете элемент ввода, используя html атрибутов сигнатуры jQuery. Это демонстрирует модели безопасности, что вы полностью контролируете элемент, его атрибуты и соответствующие им значения. Этот шаблон одинаково хорошо работает и в браузере, присутствуя в jQuery начиная с версии 1.4.
Дезинфекция потенциально небезопасного контента
При получении контента с удаленной конечной точки целесообразно очистить его, прежде чем помещать в DOM. Есть несколько способов сделать это с помощью вспомогательных функций, таких как toStaticHTML , который удаляет все динамические элементы из строки.
Предположим, вы хотели запросить строку разметки у удаленного сервиса, которая включала приветствие для нашего текущего пользователя. Вполне возможно, что этот сервис мог быть подделан, и то, что фактически возвращается к нашему приложению, — это больше, чем вы ожидаете.
В следующем коде вы видите, что скрытое поле формы присоединилось к ответу.
|
1
|
<h1>Hello, Dave.</h1><input name=’id’ value=’a528af’ type=’hidden’ />
|
Внедрение этого в форму может иметь катастрофические последствия. Таким образом, вы должны сначала пропустить его через toStaticHTML чтобы очистить его от любых элементов, атрибутов или значений, которые можно использовать для манипулирования данными формы или выполнения других неутвержденных действий.
|
1
|
$(«#greeting»).html(toStaticHTML(response));
|
Когда метод видит нашу разметку для элемента ввода, он идентифицирует и удаляет атрибут динамического name , предотвращая попадание любых непредвиденных данных в отправку формы. Для более детального изучения того, что делает и не выживает метод toStaticHTML , взгляните на « Обеспечение безопасности HTML: подробности для toStaticHTML» .
Когда ты знаешь лучше
Неизбежно будут моменты, когда вам нужно будет сделать что-то небезопасное. Например, вы можете захотеть использовать кусок HTML в качестве шаблона для создания новых элементов. В этих случаях Microsoft предоставила несколько методов, которые вы можете использовать при необходимости, и когда вы уверены, что то, что вы делаете, не подвергает пользователя риску.
В глобальном объекте MSApp в приложении Windows Store существует функция execUnsafeLocalFunction , которая выполняет именно то, что предлагает: позволяет выполнять небезопасную функцию в каждом конкретном случае. Возможно, вы захотите добавить поле ввода для редактирования имени пользователя, наш код может выглядеть очень похоже на последний пример:
|
1
|
<h1>Hello, <input name=»id» value=»Dave» /><h1>
|
Мы можем присвоить это свойству innerHTML через анонимную функцию:
|
1
2
3
|
MSApp.execUnsafeLocalFunction(function () {
$(«#greeting»).html(response);
});
|
В рамках этой функции вы можете выйти из модели безопасности и выполнить небезопасную в противном случае операцию, не догадываясь об окружающей среде. Должно быть совершенно очевидно, почему вы должны использовать этот метод экономно.
В вашем приложении Windows Store под WinJS.Utilities также есть несколько утилит для выполнения аналогичных заданий. Это setInnerHTMLUnsafe и setOuterHTMLUnsafe . Как и execUnsafeLocalFunction , они также должны использоваться экономно, и когда вы не рискуете с данными вне вашего контроля.
Эти служебные функции принимают в качестве аргументов элемент DOM, которым вы хотите управлять, и строку, которую вы хотите назначить.
|
1
2
|
WinJS.Utilities.setInnerHTMLUnsafe( $(«#greeting»).get(0), response );
WinJS.Utilities.setOuterHTMLUnsafe( $(«#greeting»).get(0), response );
|
Разница здесь в том, что setInner заменяет innerHTML элемента, тогда как setOuter заменяет сам элемент — setOuter replaceWith . Для обеих функций вы просто передаете ссылку на элемент DOM и наш желаемый innerHTML.
Примечание о совместимости
В последнем разделе вы представили два объекта MSApp объект MSApp котором находится функция execUnsafeLocalFunction , а также объект WinJS котором находятся две служебные функции, setInnerHTMLUnsafe и setOuterHTMLUnsafe .
Эти объекты присутствуют только в приложении Магазина Windows, а не в вашем браузере (если кто-то или что-то не создало объекты с одинаковыми именами). Если вы хотите написать код, который может работать как в среде Магазина Windows, так и в вашем браузере, вам необходимо проверить эти объекты, прежде чем предполагать их существование.
|
1
2
3
4
5
6
7
|
var $greeting = $(«#greeting»);
if (typeof WinJS !== «undefined» && WinJS.Utilities) {
WinJS.Utilities.setInnerHTMLUnsafe($greeting.get(0), response);
} else {
$greeting.html(response);
}
|
В приложении Магазина Windows приведенный выше код будет использовать метод WinJS.Utilities для выполнения назначения. При запуске в среде, где WinJS неизвестен, например, в веб-браузере, код выполняет присваивание с помощью метода jQuery .html .
Больше нет проблем того же происхождения
Возможность использовать удаленные сервисы — это часть того, что делает Интернет великолепным. В традиционном браузере у вас есть проблемы происхождения, которые привели к таким решениям, как JSONP и, в конечном счете, CORS. Поскольку приложения Магазина Windows работают в операционной системе, происхождение не имеет значения.
|
1
2
3
4
5
6
7
8
9
|
$.ajax(«http://api.twitter.com/1/statuses/user_timeline.json», {
data: { screen_name: «appendTo» },
success: function (data) {
$(«<img>», { src: data[0].user.profile\_image\_url }).appendTo(«body»);
$.each(data, function (key, tweet) {
$(«<p>»).text(tweet.text).appendTo(«body»);
});
}
});
|
Вышеприведенное извлекает все последние твиты из учетной записи @appendTo и оборачивает каждый в свой собственный тег абзаца, помещая изображение профиля над ними. В приложении Магазина Windows это возможно без использования тега script , установки заголовков или прокси через сценарий на стороне сервера.
В заключение
Хотя эта статья не является исчерпывающей, она предоставляет начальный импульс, необходимый для быстрого начала работы с jQuery в приложениях Магазина Windows. Веселиться!