Le tableau suivant donne les résultats de la détection homologue par rapport à http://store.company.com/dir/page.html:
Pour résoudre les problèmes de domaine croisé, nous pouvons utiliser les méthodes suivantes:
1. Domain croisé via JSONP
Dans JS, il n'est pas possible de demander directement des données sur différents domaines à l'aide de XMLHTTPRequest. Cependant, il est acceptable d'introduire des fichiers de script JS sur différents domaines de la page, et JSONP utilise cette fonctionnalité pour le réaliser.
Par exemple, il existe une page A.HTML, et le code doit utiliser AJAX pour obtenir des données JSON sur un domaine différent. Dans a.html, c'est tout:
Nous voyons qu'il existe un paramètre de rappel après l'adresse de l'acquisition de données. Bien sûr, si la page d'adresse JSONP pour obtenir des données n'est pas contrôlée par vous, vous devez fonctionner en fonction du format spécifié de la partie qui fournit les données.
Parce qu'il est introduit comme un fichier JS, le retour de http://example.com/data.php doit être un fichier JS exécutable, de sorte que le code PHP de cette page peut ressembler à ceci:
Le résultat final de la sortie de cette page est:
Ainsi, le fichier JS obtenu via http://example.com/data.php?callback=dosomething est la fonction de dosage que nous avons définie auparavant, et ses paramètres sont les données JSON dont nous avons besoin, nous obtenons donc le domaine croisé dont nous avons besoin de données.
De cette façon, le principe de JSONP est très clair. passé en tant que paramètres. Par conséquent, JSONP exige que la page côté serveur coopère en conséquence.
Après avoir connu le principe du domaine transversal de JSONP, nous pouvons utiliser JS pour générer dynamiquement des balises de script pour les opérations de domaine croisé, sans écrire délibérément les balises de script manuellement. Si votre page utilise jQuery, la méthode d'encapsulation peut être utilisée pour effectuer des opérations JSONP très commodément.
Le principe est le même, sauf que nous n'avons pas besoin d'insérer manuellement les balises de script et de définir la fonction. JQuery générera automatiquement une fonction globale pour remplacer le point d'interrogation dans Callback =?, puis il détruira automatiquement les données après l'avoir obtenue. La méthode $ .getjson déterminera automatiquement si elle est un domaine croisé. Chargement des fichiers JS.
2. Cross sous-domaine en modifiant le document.domain
Les navigateurs ont une politique homologue, et l'une de ses limites est que dans la première méthode, nous avons dit que les documents provenant de différentes sources ne peuvent pas être demandés par le biais de la méthode AJAX. Sa deuxième limitation est que l'interaction JS ne peut pas être effectuée entre les cadres de différents domaines du navigateur. Une chose à noter est que différents cadres (père et fils ou génération de pairs) peuvent obtenir des objets de fenêtre les uns des autres, mais la douleur est que vous ne pouvez pas utiliser les propriétés et les méthodes des objets de fenêtre obtenus (méthode de post-message dans HTML5, c'est une exception. Certains navigateurs tels que IE6 peuvent également utiliser quelques attributs tels que le haut et le parent). Par exemple, il y a une page dont l'adresse est http://www.example.com/a.html. Cette page a des domaines différents du framework IFRAME à l'intérieur, nous ne pouvons donc pas obtenir des choses dans l'IFRAME en écrivant du code JS dans la page:
À l'heure actuelle, Document.Domain peut être utile. Réglez-le sur le même nom de domaine. Mais il convient de noter que le réglage de Document.Domain est limité. Par exemple: le document.domain d'un document dans abexample.com peut être défini sur l'un des abexampes.com, b.example.com et example.com, mais il ne peut pas être défini sur cabexample.com, car il s'agit d'un enfant Du domaine actuel, vous ne pouvez pas le définir sur baidu.com, car le domaine principal n'est plus la 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.
De cette façon, nous pouvons accéder à diverses propriétés 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, Cela ne fonctionnera toujours pas. 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 un iframe caché pour agir comme un proxy. Le principe consiste à laisser cet iframe charger une page avec le même domaine que la page cible que 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 à travers nous, je viens de mentionner que la méthode de modification du document.Domain nous permet de contrôler pleinement cet iframe via JS, afin que nous puissions laisser le nom d'IFRAME envoyer une demande AJAX, et nous pouvons également obtenir les données reçues.
3. Utilisez la fenêtre.
L'objet Window a un attribut de nom, qui a une fonctionnalité: c'est-à-dire pendant le cycle de vie d'une fenêtre, toutes les pages chargées par la fenêtre partagent une fenêtre.name, et chaque page a une fenêtre. et les autorisations d'écriture, Window.Name persiste dans toutes les pages chargées d'une fenêtre et ne sera pas réinitialisée en raison du chargement de nouvelles pages.
Par exemple: il y a une page A.HTML, qui contient le code suivant:
Jetons un coup d'œil au code de la page B.HTML:
3 secondes après le chargement de la page A.HTML, il passe à la page B.HTML, et le résultat est:
Nous voyons que la valeur définie par sa page précédente a.html à la fenêtre. Le nom a été obtenu avec succès sur la page B.HTML. Si toutes les pages chargées n'ont pas modifié Window.name après, la valeur de Window.name obtenue par toutes ces pages est la valeur définie par la page A.HTML. Bien sûr, si nécessaire, l'une des pages peut modifier la valeur de Window.name. Notez que la valeur de la fenêtre. Le nom ne peut être que sous la forme d'une chaîne.
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 différents domaines, la conclusion ci-dessus est également applicable, ce qui est exactement le même. Le principe du domaine croisé à l'aide de Window.name.
Voyons comment obtenir des données sur les domaines via Window.name. Donnons un exemple.
Par exemple, il existe une page www.example.com/a.html, et vous devez utiliser JS dans la page A.HTML pour obtenir les données dans une autre page située sur un domaine différent www.cnblogs.com/data.html .
Le code dans la page Data.html est très simple, qui consiste à définir la valeur de données que la page A.HTML souhaite obtenir pour la fenêtre actuelle.Name. Code dans data.html:
Donc, dans la page A.HTML, comment charger la page Data.html? De toute évidence, nous ne pouvons pas charger directement la page Data.html en modifiant 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 un iframe caché dans la page A.HTML pour agir comme intermédiaire, et l'IFRAME obtient les données de Data.html, puis A.HTML obtient les données obtenues par l'IFRAME.
Si un iframe agissant en tant que intermédiaire souhaite obtenir la définition de données via Window.name de data.html, il vous suffit de définir le SRC de cet iframe sur www.cnblogs.com/data.html. Alors a.html veut obtenir les données obtenues par l'Iframe, c'est-à-dire pour obtenir la valeur de la fenêtre de l'Iframe.Name, vous devez définir le SRC de ce iframe au même domaine que la page A.Html, sinon selon à La précédente dans la même stratégie d'origine, a.html ne peut pas accéder à la propriété Window.name dans l'IFRAME. Il s'agit de l'ensemble du processus de domaine croisé.
Regardez le code de la page A.HTML:
Le code ci-dessus est juste le code de démonstration de principe le plus simple. un proxy. Il existe également de nombreux codes prêts à l'emploi similaires sur Internet.
Domain croisé à travers Window.Name, c'est tout.
4. Utilisez la méthode de la fenêtre nouvellement introduite.
Window.PostMessage (Message, Targetorigin) est une fonctionnalité nouvellement introduite de HTML5. , Opera, etc. Toutes les machines prennent déjà en charge la méthode Window.PostMessage.
L'objet de fenêtre qui appelle la méthode PostMessage fait référence à l'objet de fenêtre qui est de recevoir le message. Le message reçu.
L'objet Window qui doit recevoir des messages peut être obtenu en écoutant son propre événement de message, et le contenu du message est stocké dans l'attribut de données de l'objet Event.
L'envoi suspendu ci-dessus à d'autres objets de fenêtre fait référence à la situation où une page a plusieurs cadres, car chaque trame a un objet de fenêtre. Lors de la discussion de la deuxième méthode, nous avons dit que l'objet Windows de l'autre partie peut être obtenu entre des cadres de différents domaines, et la méthode de la fenêtre.PostMessage peut également être utilisée. Voici un exemple simple avec deux pages
Le résultat que nous obtenons après avoir exécuté une page:
Nous avons vu que la page B a reçu avec succès le message.
Il est assez intuitif et pratique d'utiliser le postmessage pour transmettre des données dans les domaines, mais l'inconvénient est que IE6 et IE7 ne le soutiennent pas, donc s'il faut l'utiliser ou non dépend des besoins réels.