Praktische Übung – js zum Übertragen von Daten zwischen Webseiten-js-Tutorial-php.cn

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

php是最好的语言

Freigeben： 2018-08-10 16:16:37

Original

2760 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!