Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der domänenübergreifenden JavaScript-Funktion: Domänenübergreifende Datenübertragung, implementiert durch die Fähigkeiten von window.name_javascript

Zusammenfassung der domänenübergreifenden JavaScript-Funktion: Domänenübergreifende Datenübertragung, implementiert durch die Fähigkeiten von window.name_javascript

WBOY
WBOYOriginal
2016-05-16 15:34:281204Durchsuche

Ich habe es selbst ausprobiert und es funktioniert wirklich gut. Die spezifische Implementierungsmethode wird wie folgt aufgezeichnet

Es gibt drei Seiten:

a.com/app.html: Anwendungsseite.
a.com/proxy.html: Proxy-Datei, normalerweise eine HTML-Datei ohne Inhalt, muss sich in derselben Domäne wie die Anwendungsseite befinden.
b.com/data.html: Die Seite, auf der die Anwendungsseite Daten abrufen muss, kann als Datenseite bezeichnet werden.

Die grundlegenden Schritte zur Umsetzung sind wie folgt:

Erstellen Sie einen Iframe auf der Anwendungsseite (a.com/app.html) und verweisen Sie dessen Quelle auf die Datenseite (b.com/data.html).
Die Datenseite hängt die Daten an den window.name dieses Iframes an. Der data.html-Code lautet wie folgt:

  <script type="text/javascript">
    window.name = 'I was there!';  // 这里是要传输的数据,大小一般为2M,IE和firefox下可以大至32M左右
                     // 数据格式可以自定义,如json、字符串
  </script>

Hören Sie sich das Onload-Ereignis des Iframes auf der Anwendungsseite (a.com/app.html) an. Stellen Sie in diesem Ereignis den Quellcode dieses Iframes so ein, dass er auf die Proxy-Datei der lokalen Domäne verweist (die Proxy-Datei und). die Anwendungsseite befindet sich unter derselben Domain, sodass Sie miteinander kommunizieren können). Ein Teil des Codes in app.html lautet wie folgt:

<script type="text/javascript">
    var state = 0, 
    iframe = document.createElement('iframe'),
    loadfn = function() {
      if (state === 1) {
        var data = iframe.contentWindow.name;  // 读取数据
        alert(data);  //弹出'I was there!'
      } else if (state === 0) {
        state = 1;
        iframe.contentWindow.location = "http://a.com/proxy.html";  // 设置的代理文件
      } 
    };
    iframe.src = 'http://b.com/data.html';
    if (iframe.attachEvent) {
      iframe.attachEvent('onload', loadfn);
    } else {
      iframe.onload = loadfn;
    }
    document.body.appendChild(iframe);
  </script>

Zerstören Sie den Iframe nach Erhalt der Daten und geben Sie den Speicher frei. Dadurch wird auch die Sicherheit gewährleistet (kein Zugriff durch andere Domain-Frame-JS).

<script type="text/javascript">
    iframe.contentWindow.document.write('');
    iframe.contentWindow.close();
    document.body.removeChild(iframe);
  </script>

Um es zusammenzufassen: Das src-Attribut des Iframes wird von der externen Domäne auf die lokale Domäne übertragen, und die domänenübergreifenden Daten werden über den window.name des Iframes von der externen Domäne auf die lokale Domäne übertragen. Dies umgeht geschickt die domänenübergreifenden Zugriffsbeschränkungen des Browsers, ist aber gleichzeitig ein sicherer Vorgang.

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