ホームページ > 記事 > ウェブフロントエンド > 実践的な演習 - Web ページ間でデータを転送する js

実践的な演習 - Web ページ間でデータを転送する js

php是最好的语言オリジナル: 2018-08-10 16:16:372722ブラウズ

1. HTML5 API に window.postMessage API があることを知っている人はほとんどいないと思われます。 window.postMessagewindow.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。

2. 先创建一个index.html 文件。（在测试的的时候必须用服务器测试呀； file:// 这样地址的开头是错误的不准许访问发送（因为window.postMessage この機能は、プログラマーがドメインを越えて通信できるようにすることです。 2 つのウィンドウ/フレーム間でデータ情報を送信します。基本的にはクロスドメイン AJAX に似ていますが、ブラウザとサーバーの間で対話するのではなく、2 つのクライアント間で通信します。 window.postMessage がどのように機能するかを見てみましょう。 IE6 と IE7 を除くすべてのブラウザがこの機能をサポートしています。

2. まず、index.html ファイルを作成します。 (テストするときは、サーバーを使用してテストする必要があります。file:// このアドレスの先頭が間違っているため、アクセスは送信できません (

window.postMessage

このメソッドはクロスドメインであり、ajax に似ているため、非常によく似ています))

<!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. コードlister.html ファイルの作成手順は次のとおりです: 実践的な演習 - Web ページ間でデータを転送する js

<!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. 結果は次のとおりです:

実践的な演習 - Web ページ間でデータを転送する js

関連記事