Explication détaillée de 4 méthodes et principes des compétences javascript cross-domain_javascript

Le tableau suivant montre les résultats de la détection d'homologie par rapport à http://store.company.com/dir/page.html :

Pour résoudre les problèmes inter-domaines, nous pouvons utiliser les méthodes suivantes :

1. Inter-domaine via jsonp

En js, il n'est pas possible d'utiliser directement XMLHttpRequest pour demander des données sur différents domaines. Cependant, il est possible d'introduire des fichiers de script js provenant de différents domaines sur la page. jsonp utilise cette fonctionnalité pour y parvenir.

Par exemple, il y a une page a.html. Le code qu'elle contient doit utiliser ajax pour obtenir des données json sur un domaine différent. Supposons que l'adresse des données json soit http://example.com/data.php, puis a.html Le code pourrait ressembler à ceci :

On voit qu'il y a un paramètre de rappel après l'adresse pour obtenir les données. Par convention, ce nom de paramètre est utilisé, mais vous pouvez également utiliser d'autres paramètres. Bien entendu, si la page d'adresse jsonp permettant d'obtenir des données n'est pas sous votre contrôle, vous devez opérer conformément au format spécifié par la partie qui fournit les données.

Parce qu'il est présenté comme un fichier js, http://example.com/data.php doit renvoyer un fichier js exécutable, donc le code php de cette page peut ressembler à ceci :

Le résultat final de cette page est :

Donc, le fichier js obtenu via http://example.com/data.php?callback=dosomething est la fonction dosomething que nous avons définie précédemment, et ses paramètres sont les données json dont nous avons besoin, afin que nous puissions l'obtenir dans tous les domaines. j'ai obtenu les données dont nous avons besoin.

De cette façon, le principe de jsonp est très clair. Un fichier js est introduit via la balise script. Une fois le fichier js chargé avec succès, il exécutera la fonction que nous avons spécifiée dans le paramètre url et transmettra les données json. nous avons besoin comme paramètre. Par conséquent, jsonp nécessite une coopération correspondante de la part de la page côté serveur.

Après avoir connu le principe du cross-domain jsonp, nous pouvons utiliser js pour générer dynamiquement des balises de script pour les opérations inter-domaines sans avoir à écrire manuellement ces balises de script. Si votre page utilise jquery, vous pouvez facilement effectuer des opérations jsonp grâce à sa méthode encapsulée.

Le principe est le même, sauf qu’on n’a pas besoin d’insérer manuellement des balises de script et de définir des fonctions de rappel. jquery générera automatiquement une fonction globale pour remplacer le point d'interrogation dans callback=?, puis le détruira automatiquement après avoir obtenu les données. En fait, il agit comme une fonction proxy temporaire. La méthode $.getJSON déterminera automatiquement si elle est inter-domaine. Si elle n'est pas inter-domaine, elle appellera la méthode ajax ordinaire ; si elle est inter-domaine, elle appellera la fonction de rappel jsonp sous forme asynchrone. chargement du fichier js.​

2. Traversez les sous-domaines en modifiant document.domain

Les navigateurs ont tous une politique de même origine, et l'une de ses limites est que dans la première méthode, nous avons dit que vous ne pouvez pas utiliser ajax pour demander des documents provenant de sources différentes. Sa deuxième limitation est que js ne peut pas interagir entre les frames de différents domaines du navigateur. Une chose qui doit être expliquée est que différents frameworks (père et fils ou pairs) peuvent obtenir les objets window les uns des autres, mais le plus ennuyeux est que vous ne pouvez pas utiliser les propriétés et les méthodes des objets window obtenus (la méthode postMessage en HTML5 est une exception, et certains navigateurs tels que ie6 peuvent également utiliser quelques attributs tels que top et parent). En bref, vous pouvez le considérer comme n'obtenant qu'un objet fenêtre presque inutile. Par exemple, il y a une page dont l'adresse est http://www.example.com/a.html Il y a une iframe dans cette page et son src est http://example.com/b.html Évidemment, ceci. La page et l'iframe qu'elle contient se trouvent dans des domaines différents, nous ne pouvons donc pas obtenir les éléments de l'iframe en écrivant du code js dans la page :

Pour le moment, document.domain peut s'avérer utile. Il suffit d'ajouter les documents des deux pages http://www.example.com/a.html et http://example.com/b. html Définissez simplement .domain sur le même nom de domaine. Mais il convient de noter que le paramétrage de document.domain est limité. Nous ne pouvons définir document.domain que sur lui-même ou sur un domaine parent de niveau supérieur, et le domaine principal doit être le même.Par exemple : le document.domain d'un document dans a.b.example.com peut être défini sur a.b.example.com, b.example.com et example.com, mais il ne peut pas être défini sur c.a.b.example.com car cela est le sous-domaine actuel du domaine ne peut pas être défini sur baidu.com car le domaine principal n'est plus le même.

Définissez document.domain dans la page http://www.example.com/a.html :

Document.domain est également défini dans la page http://example.com/b.html, et cela est également nécessaire Bien que le domaine de ce document soit example.com, la valeur de document.domain doit toujours être. définir explicitement :

De cette façon, nous pouvons accéder à divers attributs et objets dans l'iframe via js.

Cependant, si vous souhaitez demander directement la page http://example.com/b.html via ajax dans la page http://www.example.com/a.html, même si vous définissez le même document .domain Ne fonctionne toujours pas, donc la méthode de modification de document.domain n'est applicable qu'aux interactions entre les frameworks de différents sous-domaines. Si vous souhaitez interagir avec des pages de différents sous-domaines via la méthode ajax, en plus d'utiliser la méthode jsonp, vous pouvez également utiliser une iframe cachée comme proxy. Le principe est de laisser cette iframe charger une page dans le même domaine que la page cible sur laquelle vous souhaitez obtenir des données via ajax, afin que la page de cette iframe puisse utiliser ajax pour obtenir les données que vous souhaitez normalement, puis via nous La méthode de la modification de document.domain que nous venons de mentionner nous permet de contrôler entièrement cette iframe via js, afin que nous puissions laisser l'iframe envoyer une requête ajax, et ensuite nous pouvons également obtenir les données reçues.​

3. Utilisez window.name pour les domaines croisés

L'objet window a un attribut name, qui a une caractéristique : c'est-à-dire que dans le cycle de vie d'une fenêtre (window), toutes les pages chargées par la fenêtre partagent un window.name, et chaque page a une relation unique avec le nom de la fenêtre dispose d'autorisations de lecture et d'écriture. window.name est persistant dans toutes les pages chargées dans une fenêtre et ne sera pas réinitialisé lorsqu'une nouvelle page est chargée.

Par exemple : il y a une page a.html, qui contient ce code :

Regardez à nouveau le code de la page b.html :

3 secondes après le chargement de la page a.html, elle passe à la page b.html. Le résultat est :

Nous voyons que la valeur définie pour window.name par sa page précédente a.html a été obtenue avec succès sur la page b.html. Si window.name n'est pas modifié dans toutes les pages chargées suivantes, alors la valeur de window.name obtenue par toutes ces pages sera la valeur définie par la page a.html. Bien entendu, si nécessaire, n'importe laquelle des pages peut modifier la valeur de window.name. Notez que la valeur de window.name ne peut être que sous la forme d'une chaîne. La taille maximale de cette chaîne peut permettre une capacité d'environ 2 Mo ou plus, selon les différents navigateurs, mais elle est généralement suffisante.

Dans l'exemple ci-dessus, les pages a.html et b.html que nous avons utilisées sont dans le même domaine, mais même si a.html et b.html sont dans des domaines différents, la conclusion ci-dessus est également applicable. aussi le principe d'utiliser window.name pour le cross-domain.

Voyons comment obtenir des données sur tous les domaines via window.name. Ou donnez un exemple.

Par exemple, s'il y a une page www.example.com/a.html, vous devez utiliser le js dans la page a.html pour obtenir les données dans une autre page www.cnblogs.com/data.html située sur un autre domaine.

Le code de la page data.html est très simple, il s'agit de définir une valeur de données que la page a.html veut obtenir pour le window.name actuel. Code dans data.html :

Alors dans la page a.html, comment charge-t-on la page data.html ? Évidemment, nous ne pouvons pas charger directement la page data.html en modifiant le window.location dans la page a.html, car nous voulons obtenir les données dans data.html même si la page a.html ne saute pas. La réponse est d'utiliser une iframe cachée dans la page a.html pour agir comme intermédiaire. L'iframe obtient les données de data.html, puis a.html obtient les données de l'iframe.

Si l'iframe agissant comme intermédiaire souhaite obtenir les données définies par window.name dans data.html, il lui suffit de définir le src de cette iframe sur www.cnblogs.com/data.html.Ensuite, si a.html veut obtenir les données obtenues par l'iframe, c'est-à-dire s'il veut obtenir la valeur du window.name de l'iframe, il doit également définir le src de l'iframe sur le même domaine que a. Page .html Sinon, selon la politique précédente concernant la même origine, a.html ne peut pas accéder à l'attribut window.name dans l'iframe. Il s’agit de l’ensemble du processus inter-domaines.

Regardez le code de la page a.html :

Le code ci-dessus n'est que le code de démonstration de principe le plus simple. Vous pouvez utiliser js pour encapsuler le processus ci-dessus, comme la création dynamique d'iframe, l'enregistrement dynamique de divers événements, etc. Bien sûr, pour des raisons de sécurité, après avoir obtenu les données. , vous pouvez détruire l'iframe faisant office de proxy. Il existe de nombreux codes similaires prêts à l'emploi sur Internet. Si vous êtes intéressé, vous pouvez les rechercher.

Le cross-domain se fait via window.name, c'est comme ça que ça marche.​

4. Utilisez la méthode window.postMessage nouvellement introduite dans HTML5 pour transmettre des données entre domaines

La méthode window.postMessage(message,targetOrigin) est une fonctionnalité nouvellement introduite dans HTML5. Vous pouvez l'utiliser pour envoyer des messages à d'autres objets fenêtre, que l'objet fenêtre appartienne à la même origine ou à des origines différentes. , FireFox, Chrome et les navigateurs tels qu'Opera prennent déjà en charge la méthode window.postMessage.

L'objet window qui appelle la méthode postMessage fait référence à l'objet window qui souhaite recevoir le message. Le premier paramètre message de cette méthode est le message à envoyer, et le type ne peut être qu'une chaîne targetOrigin ; est utilisé pour limiter la réception. Le domaine où se trouve l'objet fenêtre du message. Si vous ne souhaitez pas limiter le domaine, vous pouvez utiliser le caractère générique *.

L'objet fenêtre qui doit recevoir des messages peut obtenir le message entrant en surveillant son propre événement de message. Le contenu du message est stocké dans l'attribut data de l'objet événement.

L'envoi de messages à d'autres objets fenêtre mentionnés ci-dessus fait en fait référence à la situation où une page comporte plusieurs cadres, car chaque cadre possède un objet fenêtre. En discutant de la deuxième méthode, nous avons dit que les frameworks de différents domaines peuvent obtenir les objets window les uns des autres et qu'ils peuvent également utiliser la méthode window.postMessage. Regardons un exemple simple avec deux pages

Les résultats que nous avons obtenus après avoir exécuté la page a :

Nous voyons que la page b a reçu le message avec succès.

Utiliser postMessage pour transmettre des données entre domaines est relativement intuitif et pratique, mais l'inconvénient est que IE6 et IE7 ne le prennent pas en charge, donc son utilisation ou non dépend des besoins réels.