Exercice pratique : js pour transférer des données entre des pages Web-js tutoriel-php.cn

Exercice pratique : js pour transférer des données entre des pages Web

php是最好的语言

Libérer： 2018-08-10 16:16:37

original

2720 Les gens l'ont consulté

1. On estime que peu de gens savent qu'il existe une API window.postMessage dans l'API HTML5. La fonction de window.postMessage permet aux programmeurs d'envoyer des informations de données entre deux fenêtres/cadres à travers des domaines. Fondamentalement, c'est comme AJAX inter-domaines, mais au lieu d'interagir entre le navigateur et le serveur, il communique entre deux clients. Jetons un coup d'œil au fonctionnement de window.postMessage. Tous les navigateurs, à l'exception d'IE6 et IE7, prennent en charge cette fonctionnalité.

2. Créez d'abord un fichier index.html. (Lors du test, vous devez utiliser le serveur pour tester ; le début de l'adresse file:// est erroné et ne permet pas l'accès à l'envoi (car window.postMessage cette méthode est cross-domain et est presque le même qu'ajax, donc c'est très similaire) )

<!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>

Copier après la connexion

3 Le code lors de la création du fichier lister.html est le suivant :

<🎜. >

<!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>

Copier après la connexion