suchen

Heim >Web-Frontend >js-Tutorial >Praktische Übung – js zum Übertragen von Daten zwischen Webseiten

Praktische Übung – js zum Übertragen von Daten zwischen Webseiten

php是最好的语言
php是最好的语言Original
2018-08-10 16:16:372769Durchsuche

1. Es wird geschätzt, dass nur wenige Menschen wissen, dass es in HTML5-APIS eine window.postMessage-API gibt. Die Funktion von window.postMessage ermöglicht es Programmierern, Dateninformationen zwischen zwei Fenstern/Frames domänenübergreifend zu senden. Im Grunde ist es wie domänenübergreifendes AJAX, aber anstatt zwischen dem Browser und dem Server zu interagieren, kommuniziert es zwischen zwei Clients. Werfen wir einen Blick darauf, wie window.postMessage funktioniert. Alle Browser außer IE6 und IE7 unterstützen diese Funktion.

2. Erstellen Sie zunächst eine index.html-Datei. (Beim Testen müssen Sie den Server zum Testen verwenden; der Anfang der Datei://-Adresse ist falsch und erlaubt keinen Zugriff zum Senden (da window.postMessage diese Methode domänenübergreifend und ähnlich ist zu Ajax, daher ist es sehr ähnlich) )

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
     body,p{
        margin: 0px;
        padding: 0px;
     }
    </style>
</head>
<body>
    
    <script>
        //弹出一个新窗口
        var domain = &#39;http://localhost:8080/chenzhenhua/&#39;;
        var myPopup = window.open(domain+&#39;lister.html&#39;,&#39;myWindow&#39;);//打开另一个网址
        //  var array=["100","liyoubing","200"];
        var array=[{"姓名":"李友冰"},{"性别":"男"}]

        //周期性的发送消息
        setInterval(function(){
           //var message = &#39;Hello!  The time is: &#39; + (new Date().getTime());
          //  console.log(&#39;blog.local:  sending message:  &#39; + message);
             //array:发送消息de数据,domain: 是url;
            myPopup.postMessage(array,domain);
        },6000);
    </script>
</body>
</html>

3. Der Code beim Erstellen der Lister.html-Datei lautet wie folgt: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
         //监听消息反馈
       window.addEventListener(&#39;message&#39;,function(event) {
            console.log(event);
            if(event.origin !== &#39;http://localhost:8080&#39;) return;
            console.log(&#39;received response:  &#39;,event.data);

        },false);
    </script>
</body>
</html>

4. Das Ergebnis ist wie folgt:

Praktische Übung – js zum Übertragen von Daten zwischen Webseiten Verwandte Empfehlungen:

Vier Möglichkeiten zur Implementierung der Parameterübertragung zwischen HTML-Seiten mithilfe von Javascript

So implementieren Sie die HTML-Übertragung bei Seitensprungparametern

Das obige ist der detaillierte Inhalt vonPraktische Übung – js zum Übertragen von Daten zwischen Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript html5 ajax html JS
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：Wie kann ich das Online-Kundendienstlogo mit js auf einer Seite der Seite reparieren? (Code tatsächlicher Test)Nächster Artikel：Wie kann ich das Online-Kundendienstlogo mit js auf einer Seite der Seite reparieren? (Code tatsächlicher Test)

In Verbindung stehende Artikel

Mehr sehen