Domänenübergreifende Probleme in js

Der Inhalt dieses Artikels handelt von den domänenübergreifenden Problemen von js. Jetzt können Freunde in Not darauf verweisen

Der Beispielcode befindet sich unter E/AjaxGGW/Informationen zu domänenübergreifenden Problemen finden Sie in den Lesezeichen-Nuggets (domänenübergreifend korrekt anzeigen, keine Panik)

1. Domänenübergreifend: Der Browser kann keine Skripte von anderen Websites ausführen. Es wird durch die Same Origin -Richtlinie des Browsers verursacht, die Sicherheitseinschränkungen durchsucht implementiert vom Server auf

2. Die Same-Origin-Richtlinie schränkt die folgenden Verhaltensweisen ein:

Cookie, LocalStorage und IndexDB können nicht gelesen werden

• DOM- und JS-Objekte können nicht abgerufen werden

• Ajax-Anfrage kann nicht gesendet werden

• 3.

Häufige domänenübergreifende Szenarien Gleicher Ursprung: gleicher Domainname, gleiches Protokoll und gleicher Port

http://www.nealyang.cn/index.html

Anruf
• http://www.nealyang.cn/server.php

  Nicht gekreuzt -domain

  http://www.nealyang.cn/index.html

• Anruf http://www.neal.cn/server.php Domainübergreifend, verschiedene Hauptdomains

  http://abc.nealyang.cn/index.html

• Anruf http://def.neal.cn/server.php Domainübergreifend , Subdomainnamen sind unterschiedlich http://www.nealyang.cn:8080/index.html

Aufruf
• http://www.nealyang.cn/server.php

  Domänenübergreifend, verschiedene Portshttps ://www.nealyang.cn/index.html

Aufruf
• http://www.nealyang.cn/server.php

  Cross-domain , verschiedene Protokolle

  4.

Domänenübergreifende Lösung1)

jsonp domänenübergreifend

Auf der HTML-Seitedas Laden statischer Ressourcendateien von verschiedenen Domänennamen über entsprechende Tags ist erlaubt durch den Browser. Im Allgemeinen können wir dynamisch das Skript-Tag erstellen und dann eine URL mit Parametern anfordern, um eine domänenübergreifende Kommunikation zu erreichen.

Der größte Fehler ist jedoch, dass nur Anfrage erhalten

$(function(){
/*jQuery支持jsonp的实现方式  */
$.ajax({
url:"www.baidu.com",
type:"GET",
dataType:"jsonp",  //请求方式为：jsonp
jsonpCallback:"callback",
data:{
"username":"yaofan"
}
})
})

2) document.domain + iframe Cross-Domain (1.html und document.domain+iframe Cross-Domain.html)

Die wichtigste Voraussetzung ist, dass der Hauptdomänenname derselbe istund zwei HTML-Seiten erforderlich sind

<!-- 这种方式最主要的要求是主域名相同,假设目前a.nealyang.cn和b.nealyang.cn分别对应指定不同的ip服务器
a.nealyang.cn下有一个test.html文件
b.nealyang.cn下有一个1.html文件
  -->
 <p>A页面</p> 
 <!-- 利用iframe加载其他域下的文件 ，src中 -->
<iframestyle = "display:none" name = "iframe1" id = "iframe" src = "http://b.nealyang.cn/1.html" frameborder = "0">
     </iframe>  
     <script type="text/javascript">
     $(function(){
     try{
     document.domain = "nealyang.cn" //将document.domain设置为nealyang.cn，当iframe加载完毕后就可以获取nealyang.cn域下的全局对象
     }catch(e){
     $("#iframe").load(function(){
   var jq = document.getElementById("iframe").contentWindow.$; 
    jq.get("http://nealyang.cn/test.json",function(data){
     console.log(data);
     });
     })
     }
     })
     </script>

3)window.name + iframe Cross-domain (origin.html und target.html sind nicht in Nuggets)

window.name-Attribut Kann eine Zeichenfolge festlegen oder zurückgeben, in der der Fenstername gespeichert ist. Ihre Magie besteht darin, dass der Namenswert weiterhin vorhanden ist, wenn er auf verschiedenen Seiten oder in verschiedenen Domänen geladen wird. Er ändert sich nicht ohne Änderung und kann sehr lange Namen (2 MB) speichern

Angenommen, die -Indexseite fordert Daten auf dem Remote-Server an. Der src des iframe zeigt auf die Adresse der Serverdatei (der iframe-Tag src kann domänenübergreifend sein). wird in der Serverdatei festgelegt und dann der Wert von window.name im iframe in index.html gelesen

Wenn der index.html Seite und Seite Wenn der SRC des Iframes nicht aus einer anderen Quelle stammt, können Sie im Frame nichts bedienen. Die beiden Seiten befinden sich in unterschiedlichen Domänen und die Quellseite kann den Namenswert der Zielseite nicht abrufen, da der Namenswert nur für Seiten in derselben Domäne sichtbar ist.

4) Location.hash + iframe domänenübergreifend

Dies Die domänenübergreifende Methode ähnelt der oben vorgestellten Methode. Sie fügt außerdem dynamisch einen iframe ein und legt dann dessen Quelle als Serveradresse fest. Der Server gibt außerdem einen JS-Code aus und schließt die Datenübertragung durch die Kommunikation mit dem Kind ab Fenster. .

Und location.hash ist tatsächlich der Ankerpunkt der URL, zum Beispiel nach dem Öffnen der URL von http://www.nealyang.cn#Nealyang , geben Sie es in die Konsole ein. Der Hash gibt das Feld #Nealyang zurück.

[Hinweis] Tatsächlich sind location.hash und window.hash ähnlich. Beide Methoden verwenden globale Objekteigenschaften, und diese beiden Methoden sind es auch das Gleiche wie jsop. Das Gleiche ist, dass nur Get-Anfragen implementiert werden können

<script type="text/javascript">
function getData(url,fn){
var iframe = document.createElement("iframe");
iframe.style.display = "none";
iframe.src = url;
iframe.onload = function(){
fn(iframe.contentWindow.location.hash.substring(1));
window.location.hash = "";
document.body.removeChild(iframe);
};
document.body.removeChild(iframe);
}
//get data from server
var url = "http://localhost:8080/data.php";
getData(url,function(data){
var jsondata = JSON.parse(data);
console.log(jsondata.name + "" +jsondata.age);
});
</script>

5) postMessage domänenübergreifend ( a.html und b.html)

Dies ist eine coole API, die von H5 vorgeschlagen wurde, einschließlich der postMessage-Methode zum Senden von Informationen und der Nachrichtenzeit zum Empfangen von Informationen.

① 发送信息的postMessage方法是向外界窗口发送信息

otherWindow.postMessage(message,targetOrigin);

l otherWindow指的是目标窗口，是window.frames属性的成员或者是window.open方法创建的窗口。

l Message是要发送的消息，类型是String、Object

l targetOringin是限定消息接收范围，不限制用星号*

② 接受信息的message事件

var onmessage = function(event){
var data = event.data;
var origin = event.origin;
}
if(typeof window.addEventListener != 'undefined'){
    window.addEventListener('message',onmessage,false);
}else if(typeof window.attachEvent != 'undefined'){
    window.attachEvent('onmessage', onmessage);
}

6) 跨域资源共享CORS

目前主流的跨域解决方案

1）简介

CORS是一个W3C标准，全称是“跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而客服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

相关推荐：

JS跨域处理详解

js跨域请求服务实例分析

关于js跨域问题的总结

Das obige ist der detaillierte Inhalt vonDomänenübergreifende Probleme in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!