Anforderung 1: Wie übertrage ich Daten von Hauptseite A auf Iframe B?
Auf diese Weise muss die Hauptseite Daten an Iframe B übergeben, und Iframe B führt dann nach Erhalt der Daten eine bestimmte Verarbeitung durch.
Implementierungsmethode
Der Trick bei der Implementierung besteht darin, den Hash-Wert des Standortobjekts zu verwenden, um Kommunikationsdaten darüber zu übertragen. Wir müssen nur den Quellcode von iframe B auf der Hauptseite A festlegen und danach einen #data-String hinzufügen (Daten sind die Daten, die Sie haben). passieren möchten), wie in der folgenden Abbildung gezeigt:
Dann können Sie in Iframe B die Daten hier sofort über eine Methode abrufen. Tatsächlich ist eine häufig verwendete Methode:
1. Stellen Sie den Timer über die setInterval-Methode in iframe B ein und überwachen Sie die Änderungen in location.href, um die oben genannten Dateninformationen zu erhalten.
2. Dann kann Iframe B basierend auf diesen Dateninformationen eine entsprechende logische Verarbeitung durchführen.
Anforderung 2: Wie übergibt Iframe B Daten an Hauptseite A?
Auf diese Weise muss Iframe B Daten an die Hauptseite übergeben, und die Hauptseite führt dann nach dem Abrufen der Daten eine bestimmte Verarbeitung durch.
Implementierungsmethode
Der Trick für die Implementierung besteht darin, einen Proxy-IframeC zu verwenden, der in Iframe B eingebettet ist und in derselben Domäne wie die Hauptseite A bleiben muss. Dann können wir ihn verwenden, um das Implementierungsprinzip der ersten Kommunikationsmethode oben vollständig zu nutzen, um die zu übertragen Daten von iframe B An iframeC stellt sich als nächstes die Frage, wie iframeC die Daten an die Hauptseite A übergeben kann, wie in der folgenden Abbildung dargestellt:
Da sich iframeC und die Hauptseite in derselben Domäne befinden, ist es viel einfacher, Daten zwischen ihnen zu übertragen. Unsere Methode besteht hier darin, ein häufig verwendetes Attribut window.top zu verwenden (Sie können auch window.parent.parent verwenden), das a zurückgibt Verweis auf das Fensterobjekt der obersten Ebene, das in den Browser geladen wird, sodass wir die Methode direkt auf Hauptseite A verwenden können, hahaha, einfach.
An dieser Stelle führen wir eine einfache Analyse und Zusammenfassung durch
Die Prämisse und der größte Nachteil dieser Implementierung besteht darin, dass der Inhalt im Iframe von uns kontrollierbar sein muss, aber zumindest basiert unsere Implementierung auf den Sicherheitsregeln des Browsers und beeinträchtigt nicht die Sicherheit der Anwendung selbst.
Einige Details, die bei der Implementierung berücksichtigt werden müssen
Versuchen Sie, Benutzerfreundlichkeit, Skalierbarkeit und Wartbarkeit zu berücksichtigen, wie zum Beispiel:
Lassen Sie Drittanbieter-Apps lediglich eine von uns bereitgestellte JS-Seed-Datei laden, um die verschiedenen Tools, die wir für sie bereitstellen, problemlos nutzen zu können.
Wir organisieren die oben genannten verschiedenen Tools in Form von Paketen, um das Laden bei Bedarf zu maximieren.
Die JS-Seed-Datei im ersten Element bietet nur die Implementierung grundlegender Methoden und enthält die am häufigsten verwendeten Toolkits, z. B. hochadaptive
Über Seed-Dateien stellen wir Apps von Drittanbietern auch einige häufig verwendete JS-Toolkits zur Verfügung. Die angegebenen Toolkits können mithilfe eines dynamischen Lademechanismus ähnlich dem YUI3-Modul direkt verwendet werden.
Von Drittanbieter-Apps und Hauptseiten weitergegebene Daten klassifizieren (Selbstaufruf, Anmeldebestätigung, weitergegebene Daten usw.)
Die übertragenen Daten verwenden das JSON-Format, das bestimmte Spezifikationen erfüllt, und werden über einen einheitlichen Serviceausgang gesendet. Die Hauptseite bietet eine einheitliche Serviceschnittstelle, um die Daten zu analysieren und die entsprechenden Methoden gemäß den Spezifikationen aufzurufen.
Es gibt auch das Problem der Versionskontrolle. Um die Auswirkungen auf Apps von Drittanbietern zu minimieren, verwenden die Versionen aller oben genannten JS-Dateien eine Abwärtskompatibilitätsstrategie, indem der Server verwendet wird, um die Ablaufzeit festzulegen SQUID-Cache mit einer bestimmten Häufigkeit. Aktualisierungen der Hauptversion werden manuell entsprechend den eigenen Anforderungen des Benutzers geändert
Natürlich ist das oben Genannte möglicherweise nicht die optimale Lösung, aber ich hoffe, dass es Ihnen etwas Hilfe und Anleitung geben kann. Wir verbessern auch nach und nach einige unserer Implementierungsmethoden, wie z. B. die Versionskontrolle. Wir haben auch einige Probleme, die behoben werden müssen gelöst.
spezifischer Code
Quellcode der Hauptseite A
Kopieren Sie den Codecode wie folgt:
Js-Code
/*Hauptseite A*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hauptseite A</title>
<script type="text/javascript">
Funktion init(){
document.domain = 'bai.sohu.com';
Alert('Ich bin der Hauptframe, eingebettet in eine Drittanbieteranwendung IframeB, die Anwendung wird unten geladen.');
var iframeTag = document.getElementById('frameB'),
iframeSrc = 'http://test.com/iframePage.html';
iframeTag.src = iframeSrc;
iframeTag.style.display = 'block';
};
Funktionsrückruf(h){
var iframeB = document.getElementById('frameB');
Alert('IframeC ruft meine (Hauptframe-)Schnittstelle auf und übergibt mir die Höhe von IframeB. Der spezifische Wert ist: ' + h);
iframeB.style.height= h + 10 + 'px';
iframeB.src += '#'+ h
};
</script>
</head>
<body onload="init();">
<p>Ich bin der Homepage-Frame und meine Domain ist: bai.sohu.com</p>
<iframe id="frameB" style="display:none;"></iframe>
</body>
</html>
Quellcode von iframeB (iframePage.html)
Kopieren Sie den Codecode wie folgt:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframeB</title>
</head>
<body onload="init();">
<p style="height:500px;">Ich bin eine Drittanbieteranwendung und meine Domain ist: test.com</p>
<iframe id="frameC" style="height:1px;width:1px;display:none;"></iframe>
</body>
</html>
<script type="text/javascript">
Funktion init(){
Alert('Ich bin eine Drittanbieter-App. Erstellen wir einen Kommunikationskanal IframeC in derselben Domäne wie der Hauptframe, legen Sie dessen Quelle fest und verwenden Sie das #-Zeichen, um den Höhenwert zu übergeben.');
var iframeTag = document.getElementById('frameC'),
iframeSrc = 'http://bai.sohu.com/iframePageC.html#',
pageHeight = document.documentElement.scrollHeight ||.
iframeTag.src = iframeSrc + pageHeight;
iframeTag.style.display = 'block';
window.setTimeout(function(){
warning('Die Hauptseite legt die Quelle meines (IframeB) fest und übergibt mir die Höhe, die sie über Hash (#) erhält: ' + location.hash);
},2000);
};
</script>
Quellcode von iframeC (iframePageC.html)
Kopieren Sie den Codecode wie folgt:
<script type="text/javascript">
document.domain = 'bai.sohu.com';
Alert('Ich (IframeC) habe iframeB erhalten und mir den Höhenwert über den Parameter (#) übergeben. Ich rufe jetzt die Hauptseitenmethode auf, um die Höhe von IframeB festzulegen.');
top.callback(window.location.href.split('#')[1]);
</script>