Résumé des solutions inter-domaines JavaScript (code)

Le contenu de cet article est un résumé (code) de solutions inter-domaines. Il a une certaine valeur de référence. J'espère qu'il vous sera utile.

Même politique d'origine : le protocole, le nom de domaine et le port sont tous identiques.

Restriction non originale :

les cookies, localStorage et indexDB ne peuvent pas être lus.

Le DOM ne peut pas être obtenu.

La requête AJAX n'a pas pu être envoyée.

Solution :

1. JSONP

Principe : Demander des données JSON au serveur en ajoutant dynamiquement un élément Le serveur reçoit la demande et la renvoie à la fonction de rappel nommée spécifiée.

par exemple :

function addScript(src) { var script = document.createElement('script'); script.setAttribute("type", "text/javscript"); script.src = src; document.body.appendChild(script); }

window.onload = function() { addScript("https://segmentfault.com/data?callback=getData"); }

function getData(data) { console.log(data) } Remarque : 1. Le rappel dans l'URL de la requête doit spécifier le nom de la fonction de rappel. 2. Lorsque est exécuté en tant que code dans le navigateur, la fonction getData définie sera appelée immédiatement. 3. Les paramètres JSON renvoyés sont utilisés comme objets JavaScript, pas comme chaînes, et ne nécessitent pas de conversion JSON. 4. $.getJSON() de la bibliothèque jquery peut également être implémenté.

$.getJSON("https://segmentfault.com/data?callback=?", function(data) { console.log(data) }) Défaut : est obtenu via GET et ne prend pas en charge POST.

2. window.postMessage

window.postMessage permet la communication entre fenêtres quelle que soit l'origine. Le premier paramètre de postMessage est de transmettre le contenu, et le deuxième paramètre est le protocole + nom de domaine + port ou (* signifie aucune restriction de nom de domaine)

页面一："https://www.segmentfault.com/page1.html" //传递页面 window.onload = function () { if (typeof window.postMessage === undefined) { alert("浏览器不支持postMessage！"); } else { window.open.postMessage({data: "Hello World"}, "https://www.example.com/page2.html"); } } 页面二："https://www.example.com/page2.html" //接收页面 window.addEventListener('message', function(e) { console.log(e.data); },false); Fenêtre de réception d'événement.addEventListener( 'message', function() L'événement d'objet d'événement de message dans {}); a trois attributs : 1 event.source : la fenêtre pour envoyer le message 2. event.origin : l'URL à laquelle le message est envoyé 3. event.data : contenu du message

//引用父窗口发送信息给下一个窗口 window.addEventListener('message', receiveMessage); function receiveMessage(event) { event.source.postMessage('Nice to see you!', '*'); } //过滤不是发给本窗口的信息 window.addEventListener('message', receiveMessage); function receiveMessage(event) { if (event.origin !== 'http://www.segmentfault.com/page1.html') return; if (event.data === 'Hello World') { event.source.postMessage('Hello', event.origin); } else { console.log(event.data); } } 3. iframe

chargement iframe La page et le domaine cible dans src sont le même domaine et peuvent lancer des requêtes ajax (fenêtre parent-enfant). //Le principe est que la source provient de la même source. Les requêtes Ajax ne peuvent pas être lancées à partir de sources différentes.

L'objet window peut être obtenu entre différentes fenêtres avec la même source, mais les propriétés et méthodes de l'objet window ne peuvent pas être obtenues. //Différentes sources signaleront des erreurs

1. document.domain + iframe (même source disponible - cross sous-domaine)

attribut document.domain : le nom de domaine de premier niveau est le même, le le nom de domaine de deuxième niveau est différent Implémenter l'acquisition d'objets de fenêtre.

页面一："https://segmentfault.com/page1.html" window.onload = function() { document.domain = "https://segmentfault.com/"; //设置domain window.getData = function() { //ajax请求 } } 页面二："https://segmentfault.com/page2.html" //动态创建iframe最佳，获取完数据销毁。 //document.domain设置成自身或更高一级的父域，主域必须相同。 document.domain = "https://segmentfault.com/" //设置domain function test() { var win = document.getElementById("iframe").contentWindow; win.getData("https://segmentfault.com/json_domain.php", function() {}) } Défaut : Le nom de domaine principal doit être cohérent .

2. window.name + iframe (disponible pour les sources non originales) window.name Attribut : Pendant le cycle de vie d'une fenêtre, que ce soit que ce soit la même source ou non, la propriété window.name de la page de chargement de la même fenêtre est partagée et chaque page peut être exploitée.

页面一："https://segmentfault.com/page1.html" window.name = "this is data!" 页面二："https://segmentfault.com/page2.html" //动态创建iframe最佳，获取完数据销毁。 //获取window.name function test() { var winName = document.getElementById("iframe").contentWindow.name; winName.src = "https://segmentfault.com/data.html"; //最后需要将iframe的src设置成当前域的一个页面地址 } Défauts : Mauvaise compatibilité

3.location.hash + iframe (source non originale disponible) Identifiant du fragment : l'identifiant du fragment fait référence à la partie située après le numéro d'URL. Le simple fait de changer la page d'identification du fragment ne s'actualise pas.

页面一："https://www.segmentfault.com/page1.html" function startRequest(){ var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = 'https://www.example.com/page2.html#messgae'; document.body.appendChild(ifr); } function checkHash() { var data = location.hash ? location.hash.substring(1) : ''; } setInterval(checkHash, 2000); 页面二："https://www.example.com/page2.html#messgae" function callBack(){ try { parent.location.hash = 'somedata'; } catch (e) { // ie、chrome的安全机制无法修改parent.location.hash， // 所以要利用一个中间的example域下的代理iframe var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = 'https:/www.segmentfault.com/page3html#somedata'; // 注意该文件在"segmentfault.com"域下 document.body.appendChild(ifrproxy); } } 页面三："ttps:/www.segmentfault.com/page3html#somedata" //因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1); Inconvénients : les données sont exposées dans l'URL et la longueur est également limitée.

4. WebSocket

WebSocket : le navigateur envoie une demande au serveur pour établir une connexion WebSocket via JavaScript. Une fois la connexion établie, le client et le serveur peuvent. connectez-vous directement via les données TCP Exchange.

Définissez les informations d'en-tête de requête WebSocket et le serveur les prendra en charge.

Origin: http://example.com //根据域名是否在白名单内来判断是否可以通信 Inconvénients : Coût de mise en œuvre élevé.

5. CORS

cors est le partage de ressources entre domaines. La clé de la communication CORS actuelle est le serveur. Tant que le serveur implémente l'interface CORS, la communication entre origines est possible.

Inconvénients : Configuration du serveur, occupant la bande passante principale du domaine.

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo JavaScript du site Web PHP chinois !