recherche

Maison >interface Web >js tutoriel >Exercice pratique : js pour transférer des données entre des pages Web

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

php是最好的语言
php是最好的语言original
2018-08-10 16:16:372770parcourir

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>

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>
4. Le résultat est le suivant :

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

Quatre façons d'implémenter le transfert de paramètres entre des pages html à l'aide de javascript

Comment implémenter des pages HTML Passer les paramètres lors du saut

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html5 ajax html JS
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment corriger le logo du service client en ligne sur un côté de la page en utilisant js ? (Code test réel)Article suivant：Comment corriger le logo du service client en ligne sur un côté de la page en utilisant js ? (Code test réel)

Articles Liés

Voir plus