window.postMessage

最新推荐文章于 2024-06-03 09:32:46 发布

小付君

最新推荐文章于 2024-06-03 09:32:46 发布

阅读量313

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/weixin_39889465/article/details/111900008

版权

本篇博客主要记录postMessage的应用实例。

应用

三个域名不同的html之间互相发送信息。html1向html2和html3发送信息，并在html2和html3中将收到的信息回显到页面上。html1同时可以接收html2和html3的信息，将信息回显到页面上。

效果图

附源码

域名为127.0.0.1:9989 的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>parent window</title>
</head>
<body>
    <input type="button" value="发送信息9990" id="button">
    <input type="button" value="发送信息9991" id="button1">
    <div>
        <ul id="list"></ul>
        <hr>
        <ul id="list2"></ul>
    </div>

    <script>
        window.onload = function() {
            let opup = window.open('http://127.0.0.1:9990/index.html');
            let opup1 = window.open('http://127.0.0.1:9991/index.html');
            let listIndex = 1;
            let list1Index = 10;

            document.getElementById('button').addEventListener('click', function() {
                opup.postMessage(`${listIndex}. &nbsp; hello, 我是9989......`, 'http://127.0.0.1:9990');   // opener作为信息接口端
                listIndex++;
            });

            document.getElementById('button1').addEventListener('click', function() {
                opup1.postMessage(`${list1Index}. &nbsp; hello, 我是9989......`, 'http://127.0.0.1:9991');   // opener作为信息接口端
                list1Index--;
            });

            function receiveMessage(event) {
                // 判断信息接收的来源 （也许这个接收者和我们最初打开的不是同一个页面）
                if(event.origin != 'http://127.0.0.1:9990' && event.origin != 'http://127.0.0.1:9991') {
                    return;
                }

                // event.source   通过window.open打开的弹出页popup
                // event.data     是popup发送给当前页面的消息
                let listDom;
                if(event.origin != 'http://127.0.0.1:9991') {
                    listDom = document.querySelector('#list2');
                } else {
                    listDom = document.querySelector('#list');
                }
                let li = document.createElement('li');
                li.innerHTML = event.data;
                listDom.appendChild(li);
            }

            window.addEventListener('message', receiveMessage);    // 监听本页面要接收的信息
        }
    </script>
</body>
</html>

域名为127.0.0.1:9990 的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="回复9989端口" id="reply">
   <ul id="receiveInfo">
       
   </ul>
   <ul id="receiveInfo1">
       
   </ul>

   <script>
       let index = 1;
       let targetWindow;

       document.querySelector('#reply').addEventListener('click', function() {
           targetWindow.postMessage(`${index}. &nbsp; hi, 我是9990......`, 'http://127.0.0.1:9989');  // 弹出页的来源作为回信的对象
           index++;
       })

       window.addEventListener('message', receiveMessage);

       function receiveMessage(event) {
           if(event.origin != 'http://127.0.0.1:9989') {
               return;
           }

            // event.source 就当前弹出页的来源页面
            // event.data 是 "hello there!"
            let listDom = document.querySelector('#receiveInfo');
            targetWindow = event.source;
            let li = document.createElement('li');
            li.innerHTML = event.data;
            listDom.appendChild(li);
       }
   </script>
</body>
</html>

域名为127.0.0.1:9991 的html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" value="回复9989" id="reply">
   <ul id="receiveInfo">
       
   </ul>

   <script>
       let index = 1;
       let targetWindow;

       document.querySelector('#reply').addEventListener('click', function() {
           targetWindow.postMessage(`${index}. &nbsp; hi, 我是9991......`, 'http://127.0.0.1:9989');  // 弹出页的来源作为回信的对象
           index++;
       })

       window.addEventListener('message', receiveMessage);

        function receiveMessage(event) {
           if(event.origin != 'http://127.0.0.1:9989') {
               return;
           }

            // event.source 就当前弹出页的来源页面
            // event.data 是 "hello there!"
            let listDom = document.querySelector('#receiveInfo');
            targetWindow = event.source;
            let li = document.createElement('li');
            li.innerHTML = event.data;
            listDom.appendChild(li);
        }
   </script>
</body>
</html>

小付君

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
window.postMessage

本篇博客主要记录postMessage的应用实例。应用三个域名不同的html之间互相发送信息。html1向html2和html3发送信息，并在html2和html3中将收到的信息回显到页面上。html1同时可以接收html2和html3的信息，将信息回显到页面上。效果图附源码域名为127.0.0.1:9989 的html页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"
复制链接

扫一扫