Zusammenfassung der domänenübergreifenden JavaScript-Lösungen (Code)

Der Inhalt dieses Artikels ist eine Zusammenfassung (Code) von domänenübergreifenden Lösungen. Ich hoffe, dass er für Sie hilfreich ist.

Gleiche Ursprungsrichtlinie: Das Protokoll, der Domänenname und der Port sind alle gleich.

Nicht ursprüngliche Einschränkung:

Cookie, localStorage und indexDB können nicht gelesen werden.

DOM kann nicht abgerufen werden.

Die AJAX-Anfrage konnte nicht gesendet werden.

Lösung:

1. JSONP

Prinzip: Fordern Sie JSON-Daten vom Server an, indem Sie dynamisch ein hinzufügen. Der Server empfängt die Anfrage und gibt sie an die angegebene benannte Rückruffunktion zurück.

zB:

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) } Hinweis: 1. Der Rückruf in der URL der -Abfrage muss den Namen der Rückruffunktion angeben. 2. Wenn als Code ausgeführt wird, wird die definierte getData-Funktion sofort aufgerufen. 3. Die zurückgegebenen JSON-Parameter werden als JavaScript-Objekte und nicht als Zeichenfolgen verwendet und erfordern keine JSON-Konvertierung. 4. $.getJSON() der jquery-Bibliothek kann ebenfalls implementiert werden.

$.getJSON("https://segmentfault.com/data?callback=?", function(data) { console.log(data) }) Defekt: wird über GET abgerufen und unterstützt POST nicht.

2. window.postMessage

window.postMessage ermöglicht fensterübergreifende Kommunikation unabhängig von der Herkunft. Der erste Parameter von postMessage besteht darin, den Inhalt zu übergeben, und der zweite Parameter ist Protokoll + Domänenname + Port oder (* bedeutet, dass kein Domänenname eingeschränkt ist)

页面一："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"); } } rrree Ereignisempfang window.addEventListener('message', Funktion (){}); Das Nachrichtenereignisobjekt event hat drei Attribute: 1. das Fenster zum Senden der Nachricht 2 an den die Nachricht gesendet wird 3. event.data: Nachrichteninhalt

页面二："https://www.example.com/page2.html" //接收页面 window.addEventListener('message', function(e) { console.log(e.data); },false); //引用父窗口发送信息给下一个窗口 window.addEventListener('message', receiveMessage); function receiveMessage(event) { event.source.postMessage('Nice to see you!', '*'); } 3. iframe

iframe-Laden Die Seite und die Zieldomäne in src sind dieselben. Die Domäne kann Ajax-Anfragen initiieren (Eltern-Kind-Fenster). //Die Voraussetzung ist, dass die Quelle aus derselben Quelle stammt. Ajax-Anfragen können nicht von verschiedenen Quellen initiiert werden.

Das Fensterobjekt kann zwischen verschiedenen Fenstern mit derselben Quelle abgerufen werden, die Eigenschaften und Methoden des Fensterobjekts können jedoch nicht abgerufen werden. //Verschiedene Quellen melden Fehler

1. document.domain + iframe (gleiche Quelle verfügbar – domänenübergreifend)

document.domain-Attribut: Der Domänenname der ersten Ebene ist derselbe, und Der Domänenname der zweiten Ebene ist unterschiedlich. Implementieren Sie die Erfassung von Fensterobjekten.

//过滤不是发给本窗口的信息 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); } } rrree Fehler: Der primäre Domänenname muss konsistent sein .

2. window.name + iframe (verfügbar für nicht originale Quellen) window.name Attribut: Während des Lebenszyklus eines Fensters, ob Ob es sich um dieselbe Quelle handelt oder nicht, die Eigenschaft window.name der Ladeseite desselben Fensters wird gemeinsam genutzt und jede Seite kann bedient werden.

页面一："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() {}) } Defekte: Schlechte Kompatibilität

3. location.hash + iframe (nicht Originalquelle verfügbar) Fragment Bezeichner: Der Fragmentbezeichner bezieht sich auf den Teil nach der URL-Nummer. Durch einfaches Ändern der Fragment-ID-Seite wird keine Aktualisierung durchgeführt.

页面一："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设置成当前域的一个页面地址 } 页面一："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); Nachteile: Daten werden in der URL offengelegt und die Länge ist ebenfalls begrenzt.

4. WebSocket

WebSocket: Der Browser sendet eine Anfrage an den Server, um eine WebSocket-Verbindung über JavaScript herzustellen Verbindung über TCP herstellen. Daten direkt austauschen.

Legen Sie die WebSocket-Anfrage-Header-Informationen fest und der Server wird sie unterstützen.

页面二："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); } } Nachteile: Hohe Implementierungskosten.

5. CORS

Cors ist eine domänenübergreifende gemeinsame Nutzung von Ressourcen. Der Schlüssel zur aktuellen CORS-Kommunikation ist der Server. Solange der Server die CORS-Schnittstelle implementiert, ist eine Cross-Origin-Kommunikation möglich.

Nachteile: Serverkonfiguration, die die Bandbreite der Hauptdomäne belegt.

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Video-Tutorial auf der chinesischen PHP-Website!