Heim > Artikel > Web-Frontend > Drei Möglichkeiten, domänenübergreifenden Zugriff in js_javascript-Kenntnissen zu erreichen

Drei Möglichkeiten, domänenübergreifenden Zugriff in js_javascript-Kenntnissen zu erreichen

WBOYOriginal: 2016-05-16 15:26:511653Durchsuche

Der domänenübergreifende JavaScript-Zugriff ist ein Problem, auf das Webentwickler häufig stoßen. Was ist domänenübergreifend? Ein auf einer Domäne geladenes Skript erhält oder betreibt Dokumentattribute auf einer anderen Domäne. :
1. Domainübergreifende Implementierung auf Basis von Iframe
Eine domänenübergreifende Implementierung basierend auf IFrame erfordert, dass die beiden Domänen die Merkmale aa.xx.com und bb.xx.com aufweisen, dh die beiden Seiten müssen zu einer Basisdomäne gehören (z. B. beide xxx). com oder xxx .com.cn) verwenden dasselbe Protokoll (z. B. sind beide http) und denselben Port (z. B. sind beide 80). Auf diese Weise wird document.domain gleichzeitig zu beiden Seiten hinzugefügt kann die Funktion der übergeordneten Seite realisieren, die die untergeordnete Seite aufruft. Der Code lautet wie folgt:
Seite 1:

<html> 
<head> 
 <script> 
  document.domain = "xx.com"; 
  function aa(){ 
   alert("p"); 
  } 
 </script> 
</head> 
<body> 
  <iframe src="http://localhost:8080/CmsUI/2.html" id="i"> 
   
  </iframe> 
  <script> 
 document.getElementById('i').onload = function(){ 
   var d = document.getElementById('i').contentWindow; 
   d.a(); 
    
 }; 
  </script> 
 </body> 
</html>

Seite 2:

<html> 
 <head> 
 <script> 
  document.domain = "xx.com"; 
  function a(){ 
  alert("c"); 
   } 
 </script> 
 </head> 
 <body> 
 </body> 
</html>

Zu diesem Zeitpunkt kann die übergeordnete Seite die A-Funktion der untergeordneten Seite aufrufen, um einen domänenübergreifenden Zugriff auf js zu erreichen
2. Domänenübergreifende Implementierung basierend auf Skript-Tags
Das Skript-Tag selbst kann auf Ressourcen in anderen Domänen zugreifen und ist nicht durch die Same-Origin-Richtlinie des Browsers eingeschränkt. Sie können dynamisch ein Skript-Tag auf der Seite erstellen:

var script = document.createElement('script'); 
script.src = "http://aa.xx.com/js/*.js"; 
document.body.appendChild(script);

Auf diese Weise können JS-Dateien aus anderen Domänen geladen werden, indem Skript-Tags dynamisch erstellt werden. Anschließend kann die Funktion der geladenen JS-Datei über diese Seite aufgerufen werden. Der Nachteil besteht darin, dass Dokumente aus anderen Domänen nicht geladen werden können Auf diese Weise werden nur JS-Dateien implementiert. JSONP übergibt einen Rückrufparameter an andere Domänen und verpackt den Rückrufparameterwert und die JSON-Zeichenfolge über den Hintergrund anderer Domänen Das Skript-Tag, der Browser Die zurückgegebene Zeichenfolge wird gemäß JavaScript analysiert und ausgeführt, wodurch die Datenübertragung zwischen Domänen realisiert wird.
Auch die Unterstützung von JSONP in JQuery basiert auf dieser Lösung.
3.Backend-Proxy-Methode
Diese Methode kann alle domänenübergreifenden Probleme lösen, das heißt, das Backend wird als Proxy verwendet und jede Anfrage für andere Domänen wird an das Backend dieser Domäne weitergeleitet. Das Backend dieser Domäne greift auf andere Domänen zu, indem es http-Anfragen simuliert Gibt dann die zurückgegebenen Ergebnisse zurück. Für die Rezeption besteht der Vorteil darin, dass der Zugriff domänenübergreifend erfolgen kann, unabhängig davon, ob es sich um ein Dokument oder eine JS-Datei handelt.

Die oben genannten drei Methoden zum Erreichen eines domänenübergreifenden Zugriffs in js werden Ihnen zuerst vorgestellt. Wenn Sie sorgfältig studieren und studieren, werden Sie auf jeden Fall etwas gewinnen

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：jQuery implementiert ein vollständiges Beispiel für den Fortschrittsbalkeneffekt, der oben in page_jquery angezeigt wirdNächster Artikel：jQuery implementiert ein vollständiges Beispiel für den Fortschrittsbalkeneffekt, der oben in page_jquery angezeigt wird

In Verbindung stehende Artikel

Mehr sehen