Heim  >  Artikel  >  Web-Frontend  >  Ausführliche Erläuterung des domänenübergreifenden Javascript-Iframes

Ausführliche Erläuterung des domänenübergreifenden Javascript-Iframes

高洛峰
高洛峰Original
2016-12-08 16:18:391182Durchsuche

1. Was verursacht das Problem, dass Ajax nicht domänenübergreifend sein kann?

Ajax selbst interagiert tatsächlich mit Daten über das XMLHttpRequest-Objekt und der Browser lässt aus Sicherheitsgründen keinen JS-Code zu. Domänenübergreifender Betrieb, daher wird eine Warnung ausgegeben.

2. Gibt es eine perfekte Lösung?

Nein. Es gibt viele Lösungen, aber Sie können nur basierend auf Ihrer tatsächlichen Situation eine Auswahl treffen.

Die spezifischen Situationen sind:

1. Gegenseitiger Zugriff zwischen dieser Domain und den Subdomains: www.aa.com und book.aa.com
Diese Domain und andere Domänen Gegenseitiger Zugriff: www.aa.com und www.bb.com verwenden iframe
3. Gegenseitiger Zugriff zwischen dieser Domäne und anderen Domänen: www.aa.com und www.bb.com verwenden XMLHttpRequest, um auf den Proxy zuzugreifen
4, gegenseitiger Zugriff zwischen dieser Domäne und anderen Domänen: www.aa.com und www.bb.com Verwenden Sie JS, um dynamische Skripte zu erstellen

Lösung:

1. Wenn Sie dies tun möchten Für die Dateninteraktion müssen www.aa.com und book.aa.com von Ihnen entwickelt werden. Sie können book.aa.com mithilfe eines Iframes zu einer Seite von www.aa.com hinzufügen und document.domain = "aa.com" sowohl zu www.aa.com als auch zum Iframe hinzufügen, sodass die Domänen vereinheitlicht werden können .Es kann ein domänenübergreifender Zugriff erreicht werden. Genau wie beim Einbetten eines Iframes in dieselbe Domäne können Sie den darin enthaltenen JS direkt aufrufen. (Ich habe diese Methode noch nicht ausprobiert, aber sie ist theoretisch machbar)

2. Wenn die beiden Domänen unterschiedlich sind und Sie sich gegenseitig anrufen möchten, müssen Sie auch beide Domänen entwickeln. Mittels iframe können Daten untereinander übertragen werden. Die Lösung besteht darin, die Hash-Eigenschaft des window.location-Objekts zu verwenden. Das Hash-Attribut ist #dshakjdhsjka in http://domian/web/a.htm#dshakjdhsjka. Wenn Sie JS verwenden, um den Hash-Wert zu ändern, wird die Webseite nicht aktualisiert. Sie können über JS auf den Hash-Wert zugreifen, um eine Kommunikation zu erreichen. Mit Ausnahme des IE zeichnen die meisten anderen Browser jedoch den Verlauf auf, solange sich der Hash ändert, und Sie müssen sich beim Vorwärts- und Rückwärtsgehen damit befassen, was sehr mühsam ist. Es kann jedoch weiterhin für eine einfache Verarbeitung verwendet werden. Ich werde den spezifischen Code unten herunterladen. Der allgemeine Prozess besteht darin, dass sich Seite a und Seite b in unterschiedlichen Domänen befinden, b über iframe zu a hinzugefügt wird, a den Hash-Wert von iframe über JS ändert und in b ein Monitor erstellt wird (da JS nur den Hash ändern kann, ob). Die geänderten Daten können nur von b geändert werden. Er beurteilt selbst, erkennt, dass der Hash-Wert von b geändert wurde, ruft den geänderten Wert ab, gibt nach der Verarbeitung den von a erforderlichen Wert zurück und ändert dann den Hash-Wert von a ( Dies sollten Sie beachten, wenn a selbst eine Abfrageseite ist. Beispiel: http://domian/web/a.aspx?id=3, die Daten können nicht direkt von parent.window.location in b abgerufen werden Es wird auch ein Fehler gemeldet, da dies nicht erforderlich ist, sodass dies problematischer ist. Wenn sich der Hash ändert, werden die zurückgegebenen Daten entsprechend verarbeitet .

3. Diese Situation kommt am häufigsten vor und wird am häufigsten verwendet. Sie können nur eine von www.aa.com und www.bb.com ändern, was bedeutet, dass die andere einer anderen Person gehört. Die Leute sagen Ihnen, wie die Verbindungsparameter aussehen, wenn Sie Daten abrufen möchten, und welches Format das Ergebnis zurückgibt Daten sind von. Sie müssen lediglich eine neue Webseite unter Ihrer Domain erstellen, den Server die Daten von den Websites anderer Personen abrufen lassen und diese dann an Sie zurückgeben. a unter Domäne1 fordert Daten von GetData.aspx unter derselben Domäne an, GetData.aspx sendet eine Anfrage an ResponseData.aspx unter Domäne2, ResponseData.aspx gibt die Daten an GetData.aspx zurück und GetData.aspx gibt sie an a zurück . Eine Datenanfrage. GetData.aspx fungiert als Proxy. Einzelheiten finden Sie in meinem Code.

4. Der Unterschied zwischen dieser und der vorherigen besteht darin, dass die Anfrage mit dem Tag 3f1c4e4b6b16bbbd69b2ee476dc4f83a gestellt wird. Diese Voraussetzung besteht darin, dass beide Domänen von Ihnen entwickelt werden müssen. Das Prinzip ist die JS-Dateiinjektion. In dieser Domäne wird ein JS-Tag generiert, und sein SRC zeigt auf eine Seite b in einer anderen angeforderten Domäne, und der JS-Code kann direkt zurückgegeben werden. Weil das src-Attribut des Skripts domänenübergreifend sein kann. Wenn man sich den Code genauer ansieht, ist dieser relativ einfach.

Rufen Sie die Elemente im Iframe im übergeordneten Fenster ab

格式:window.frames["iframe的name值"].document.getElementById("iframe中控件的ID").click();
实例:window.frames["ifm"].document.getElementById("btnOk").click();

Format:

var obj=document.getElementById("iframe的name").contentWindow;
var ifmObj=obj.document.getElementById("iframe中控件的ID");
ifmObj.click();
实例:
var obj=document.getElementById("ifm").contentWindow;
var ifmObj=obj.document.getElementById("btnOk");
ifmObj.click();

Elemente des übergeordneten Fensters im Iframe abrufen

格式:window.parent.document.getElementById("父窗口的元素ID").click();
实例:window.parent.document.getElementById("btnOk").click();

jquery

Holen Sie es sich im übergeordneten Fenster Elemente im Iframe

格式:$("#iframe的ID").contents().find("#iframe中的控件ID").click();//jquery 方法1
实例:$("#ifm").contents().find("#btnOk").click();//jquery 方法1

格式:$("#iframe中的控件ID",document.frames("frame的name").document).click();//jquery 方法2
实例:$("#btnOk",document.frames("ifm").document).click();//jquery 方法2

Elemente des übergeordneten Fensters im Iframe abrufen

格式:$('#父窗口中的元素ID', parent.document).click();
实例:$('#btnOk', parent.document).click();


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