Share
Avec la sortie de Windows 8, Microsoft a introduit les applications Windows Store, qui peuvent être créées à l’aide de langages Web traditionnels exploitant les moteurs sous-jacents d’Internet Explorer 10. Cela signifie que jQuery 2.0, conçu pour fonctionner de manière optimale dans les navigateurs modernes, une application Windows Store!
Les applications Windows Store, contrairement au Web, ont deux contextes différents appelés Local et Web. En raison de l'accès de ce code dans les contextes locaux aux API Windows Runtime, un nouveau modèle de sécurité était nécessaire.
Pour de meilleurs résultats, vous allez télécharger jQuery et le charger dans le contexte local. Si vous essayez de charger depuis un emplacement distant (tel qu'un CDN), un message du type "une application ne peut pas charger le contenu Web distant dans le contexte local".
La manipulation DOM est l’un des changements les plus importants que vous rencontriez lors de l’utilisation de jQuery dans une application Windows Store par opposition à un navigateur.
Sur le Web, il n’est pas rare d’ajouter un élément à un formulaire en passant simplement une chaîne HTML à jQuery. .ajouter() méthode:
Accentsconagua
$ ("# formulaire"). append (""); Dans une application Windows Store, qui a un accès facile à la machine de l'utilisateur, les enjeux sont beaucoup plus importants et une grande partie de ce à quoi vous êtes peut-être habitué nécessitera un réexamen. Ce qui précède est considéré comme dangereux en raison de la prénom attribut. Il existe de nombreux autres éléments, attributs, protocoles et plus qui sont considérés comme dangereux..
Pour une liste exhaustive de ce qui est considéré comme sûr et non sécurisé, voir Rendre le HTML plus sûr: détails pour toStaticHTML.
Cela ne signifie pas que vous ne pouvez pas renseigner par programme un conteneur avec des éléments dynamiques; il vous suffit d'adopter une approche légèrement différente. Par exemple, vous pouvez utiliser jQuery pour créer l'élément input lui-même plutôt que de le transmettre dans une chaîne:
$ ("", name:" foo ", valeur:" bar "). appendTo (" # form "); Dans l'exemple ci-dessus, vous créez un élément d'entrée à l'aide de la signature d'attributs HTML de jQuery. Cela montre au modèle de sécurité que vous avez le contrôle total de l'élément, de ses attributs et de leurs valeurs correspondantes. Ce modèle fonctionne aussi bien dans le navigateur, étant présent dans jQuery depuis la version 1.4..
Lorsque vous recevez du contenu d'un point de terminaison distant, il est sage de le nettoyer avant de le déposer dans votre DOM. Pour ce faire, vous pouvez utiliser plusieurs fonctions, telles que: toStaticHTML, qui supprime tous les éléments dynamiques d'une chaîne.
Supposons que vous souhaitiez demander une chaîne de balisage à un service distant comprenant un message d'accueil à notre utilisateur actuel. Il est tout à fait possible que ce service ait été falsifié, et ce qui revient réellement à notre application est plus que ce à quoi vous vous attendiez..
Dans le code suivant, vous voyez qu'un champ de formulaire masqué s'est attaché à la réponse.
Bonjour Dave.
L'injecter dans une forme pourrait être désastreux. En tant que tel, vous devriez d'abord le passer toStaticHTML pour le nettoyer de tout élément, attribut ou valeur pouvant être utilisé pour manipuler les données de formulaire ou effectuer des actions non approuvées.
$ ("# salutation"). html (toStaticHTML (réponse)); Lorsque la méthode voit notre balisage pour l'élément d'entrée, elle identifiera et supprimera la dynamique prénom attribut, empêchant toute donnée inattendue de saisir une soumission de formulaire. Pour une analyse plus détaillée de ce qui ne survit pas et ne survit pas à la toStaticHTML méthode, consultez la rubrique Rendre le HTML plus sûr: détails pour toStaticHTML.
Il y aura inévitablement des moments où vous devrez faire quelque chose qui semble dangereux. Par exemple, vous voudrez peut-être utiliser une partie de HTML comme modèle pour créer de nouveaux éléments. Dans ces cas, Microsoft a fourni quelques méthodes que vous pouvez utiliser lorsque cela est nécessaire et lorsque vous êtes absolument certain que ce que vous faites ne met pas l'utilisateur en danger..
Sur le global MSApp objet dans votre application Windows Store, il existe le execUnsafeLocalFunction fonction, et il fait exactement ce que cela suggère: vous permet d’exécuter une fonction non sécurisée au cas par cas. Peut-être souhaitez-vous ajouter un champ de saisie pour modifier le nom d'un utilisateur, notre code peut ressembler beaucoup au dernier exemple:
Bonjour,
Nous pourrions attribuer cela au innerHTML propriété via une fonction anonyme:
MSApp.execUnsafeLocalFunction (function () $ ("# salutation"). Html (réponse);); Dans le cadre de la fonction, vous pouvez sortir du modèle de sécurité et effectuer une opération qui, sinon, serait dangereuse sans que l’environnement ne le devine. Pourquoi devriez-vous utiliser cette méthode avec parcimonie?.
Deux méthodes d’utilité existent également dans votre application Windows Store sous WinJS.Utilities pour faire des missions similaires. Ce sont setInnerHTMLUnsafe et setOuterHTMLUnsafe. Comme execUnsafeLocalFunction, ceux-ci, aussi, doivent être utilisés avec parcimonie, et lorsque vous ne prenez pas de risque avec des données hors de votre contrôle.
Ces fonctions d’utilitaire prennent comme arguments l’élément DOM que vous souhaitez manipuler et la chaîne que vous souhaitez affecter..
WinJS.Utilities.setInnerHTMLUnsafe ($ ("# message d'accueil"). Get (0), réponse); WinJS.Utilities.setOuterHTMLUnsafe ($ ("# message d'accueil"). Get (0), réponse); La différence ici est que setInner remplace le innerHTML de l'élément, alors que setOuter remplace l'élément lui-même - pensez à jQuery remplacer par méthode. Pour les deux fonctions, vous passez simplement une référence à l’élément DOM et à notre innerHTML souhaité..
Dans la dernière section, vous avez introduit deux objets, le MSApp objet qui abrite le execUnsafeLocalFunction fonction, ainsi que le WinJS objet qui abrite les deux fonctions utilitaires, setInnerHTMLUnsafe et setOuterHTMLUnsafe.
Ces objets ne sont présents que dans l'application Windows Store et non dans votre navigateur (à moins que quelqu'un, ou quelque chose d'autre, ait créé des objets portant le même nom). Si vous souhaitez écrire du code pouvant fonctionner à la fois dans un environnement Windows Store et dans votre navigateur, vous devez vérifier ces objets avant de présumer leur existence..
var $ greeting = $ ("# salutation"); if (type of WinJS! == "undefined" && WinJS.Utilities) WinJS.Utilities.setInnerHTMLUnsafe ($ greeting.get (0), réponse); else $ greeting.html (réponse); Dans une application Windows Store, le code ci-dessus utilisera le WinJS.Utilities méthode pour effectuer la mission. Lorsqu'il est exécuté dans un environnement où WinJS est inconnu, par exemple dans un navigateur Web, le code effectuera l’attribution via le programme jQuery. .html méthode.
Le pouvoir d'utiliser des services distants fait partie des atouts du Web. Dans un navigateur traditionnel, vous rencontrez des problèmes d’origine qui ont donné lieu à des solutions telles que JSONP, et finalement CORS. Comme les applications Windows Store s'exécutent sur le système d'exploitation, l'origine n'est pas pertinente..
$ .ajax ("http://api.twitter.com/1/statuses/user_timeline.json", data: nom_écran: "appendTo", succès: function (data) $ ("![]()
", src: data [0] .user.profile \ _image \ _url). appendTo (" body "); $ .each (données, fonction (clé, tweet) $ ("") .text (tweet.text) .appendTo (" body "););));
Ce qui précède saisit tous les derniers tweets du compte @appendTo et les enveloppe dans leur propre balise de paragraphe, en plaçant l'image de profil au-dessus d'eux. Dans une application Windows Store, cela est possible sans avoir à utiliser un logiciel scénario baliser, définir des en-têtes ou effectuer un mandataire via un script côté serveur.
Bien que cet article ne soit pas exhaustif, il fournit l'élan initial dont vous avez besoin pour utiliser rapidement jQuery dans les applications du Windows Store. S'amuser!
