Création d'applications Windows Store à l'aide de jQuery 2.0

Avec la sortie de Windows 8, Microsoft a introduit les applications du Windows Store qui peuvent être écrites à l'aide de langages Web traditionnels et exploiter le moteur sous-jacent qui alimente Internet Explorer 10. Cela signifie que jQuery 2.0 est conçu pour fonctionner de manière optimale dans les navigateurs modernes et constitue la bonne application du Windows Store à utiliser à la maison !

---

Comprendre le contexte

Les applications du Windows Store sont différentes du Web et ont deux contextes différents, local et Web. Étant donné que le code dans le contexte local peut accéder aux API Windows Runtime, un nouveau modèle de sécurité est requis.

Pour de meilleurs résultats, vous téléchargerez jQuery et le chargerez dans un contexte local. Toute tentative de chargement à partir d'un emplacement distant (tel qu'un CDN) entraînera l'apparition d'un message similaire à « L'application ne peut pas charger le contenu Web distant dans le contexte local ».

---

Comprendre le code « dangereux »

La manipulation du DOM est l'un des changements les plus importants que vous rencontrez lors de l'utilisation de jQuery dans les applications du Windows Store par rapport au navigateur.

Sur le web, il n'est pas rare d'ajouter des éléments à un formulaire en passant une chaîne HTML à la méthode .append() de jQuery :

$("#form").append("<input name='foo' value='bar' />");

Dans une application du Windows Store qui offre un accès facile à l'ordinateur de l'utilisateur, les enjeux sont beaucoup plus élevés et beaucoup de choses que vous pourriez être habitués à faire doivent être repensées. Ce qui précède est considéré comme dangereux en raison de l'attribut name. Il existe de nombreux autres éléments, attributs, protocoles, etc. qui sont considérés comme dangereux.

Pour une liste détaillée de ce qui est sûr et de ce qui ne l'est pas, consultez Rendre le HTML plus sûr : toStaticHTML pour plus de détails.

Cela ne signifie pas que vous ne pouvez pas remplir par programme un conteneur avec des éléments dynamiques ; cela signifie que vous ne pouvez pas remplir par programme des éléments dynamiques dans un conteneur. Il vous suffit d'adopter une approche légèrement différente. Par exemple, vous pouvez utiliser jQuery pour créer l'élément d'entrée lui-même au lieu de le transmettre dans une chaîne :

$("<input>", { name: "foo", value: "bar" }).appendTo("#form");

Dans l'exemple ci-dessus, vous créez un élément d'entrée en utilisant la signature d'attribut HTML de jQuery. Cela indique au modèle de sécurité que vous avez un contrôle total sur l'élément, ses attributs et leurs valeurs correspondantes. Ce modèle fonctionne également dans les navigateurs et est présent dans jQuery depuis la version 1.4.

---

Nettoyer le contenu potentiellement dangereux

Lorsque vous recevez du contenu d'un point de terminaison distant, il est sage de le nettoyer avant de le placer dans le DOM. Vous pouvez le faire de plusieurs manières en utilisant des fonctions d'assistance, telles que toStaticHTML qui supprime tous les éléments dynamiques de la chaîne.

Supposons que vous souhaitiez demander une chaîne de jetons à un service distant comprenant un message d'accueil pour l'utilisateur actuel. Il est tout à fait possible que le service soit falsifié et renvoie plus de contenu à notre application que vous ne le pensez.

Dans le code ci-dessous, vous verrez que le champ masqué du formulaire s'est ajouté à la réponse.

<h1>Hello, Dave.</h1><input name='id' value='a528af' type='hidden' />

L’injecter dans un formulaire peut avoir des conséquences désastreuses. Par conséquent, vous devez d'abord le transmettre via toStaticHTML pour effacer tous les éléments, attributs ou valeurs pouvant être utilisés pour manipuler les données du formulaire ou effectuer d'autres actions non approuvées.

$("#greeting").html(toStaticHTML(response));

Lorsque la méthode voit notre balise d'élément d'entrée, elle identifiera et supprimera l'attribut dynamique name 属性，从而防止任何意外数据进入表单提交。要更详细地了解 toStaticHTML, empêchant ainsi toute donnée inattendue d'être intégrée à la soumission du formulaire. Pour un aperçu plus détaillé de ce qui peut et ne peut pas être conservé dans les méthodes

, consultez Rendre le HTML plus sûr : toStaticHTML pour plus de détails.

---

Quand tu sais le mieux

Parfois, vous devez inévitablement faire quelque chose qui peut sembler dangereux. Par exemple, vous souhaiterez peut-être utiliser un morceau de code HTML comme modèle pour créer un nouvel élément. Dans ces situations, Microsoft propose des méthodes que vous pouvez utiliser lorsque cela est nécessaire et lorsque vous êtes sûr que ce que vous faites ne met pas les utilisateurs en danger.

MSApp 对象上，存在 execUnsafeLocalFunction Une fonction globale

dans une application du Windows Store, et elle fait exactement ce qu'elle suggère : vous permettre d'exécuter des fonctions non sécurisées au cas par cas. Peut-être souhaitez-vous ajouter un champ de saisie pour modifier le nom d'utilisateur, notre code pourrait ressembler beaucoup à l'exemple précédent :

<h1>Hello, <input name="id" value="Dave" /><h1>

innerHTMLOn peut l'attribuer à l'attribut

via une fonction anonyme :

MSApp.execUnsafeLocalFunction(function () {
    $("#greeting").html(response);
});

Dans le cadre de cette fonctionnalité, vous pouvez sortir du modèle sûr et effectuer d'autres opérations dangereuses sans être remis en question par l'environnement. Il devrait être assez évident pourquoi cette méthode doit être utilisée avec prudence.

WinJS.Utilities 下也存在一些实用方法，用于执行类似的任务。它们是 setInnerHTMLUnsafe 和 setOuterHTMLUnsafe。与 execUnsafeLocalFunctionComme

dans les applications du Windows Store, celles-ci doivent également être utilisées avec prudence et lorsque vous ne voulez pas risquer d'utiliser des données indépendantes de votre volonté. 🎜

这些实用函数将您想要操作的 DOM 元素以及您想要分配的字符串作为参数。

WinJS.Utilities.setInnerHTMLUnsafe( $("#greeting").get(0), response );
WinJS.Utilities.setOuterHTMLUnsafe( $("#greeting").get(0), response );

这里的区别在于 setInner 替换了元素的 innerHTML ，而 setOuter 替换了元素本身 - 想想 jQuery 的 replaceWith 方法。对于这两个函数，您只需传入对 DOM 元素和我们所需的 innerHTML 的引用即可。

---

兼容性说明

在上一节中，您介绍了两个对象，即包含 execUnsafeLocalFunction 函数的 MSApp 对象，以及包含两个实用函数 setInnerHTMLUnsafe 和 setOuterHTMLUnsafe 的 WinJS 对象。

这些对象仅存在于 Windows 应用商店应用程序中，而不存在于您的浏览器中（除非某人或某物创建了类似名称的对象）。如果您希望编写既可以在 Windows 应用商店环境又可以在浏览器中运行的代码，则需要先检查这些对象，然后再推测它们的存在。

var $greeting = $("#greeting");

if (typeof WinJS !== "undefined" && WinJS.Utilities) {
    WinJS.Utilities.setInnerHTMLUnsafe($greeting.get(0), response);
} else {
    $greeting.html(response);
}

在 Windows 应用商店应用程序中，上述代码将使用 WinJS.Utilities 方法来执行分配。当在 WinJS 未知的环境中运行时，例如在 Web 浏览器中，代码将通过 jQuery 的 .html 方法执行分配。

---

不再有同源问题

利用远程服务的能力是网络变得伟大的一部分。在传统浏览器中，您会遇到起源问题，这导致了 JSONP 等解决方案的出现，并最终出现了 CORS。由于 Windows 应用商店应用程序在操作系统上运行，因此来源无关紧要。

$.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 标记、设置标头或通过服务器端脚本进行代理即可实现此目的。

---

结论

虽然本文并不详尽，但它确实提供了您在 Windows 应用商店应用程序中快速启动并运行 jQuery 所需的初始动力。玩得开心！

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!