HTML5的跨消息传输—案例

雾眠气泡水@

于 2021-09-26 19:55:55 发布

阅读量166

点赞数

分类专栏： html5 文章标签： html5 html

本文链接：https://blog.csdn.net/m0_60489011/article/details/120336724

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、了解跨消息传输

1.跨消息传输的定义

它指的是将一个地方的数据传输到另一个地方。

2.语法

src里是要将消息传输到那个文件夹的路径。

3.绑定事件的方法：postMessage()方法

这个方法接收两个参数：第一个参数是一条消息；第二个参数是一个表示消息接收方来自哪个域的字符串，这个参数对保障安全通信非常重要，可以防止浏览器把消息发送到不安全的地方。

二、案例

这个案例有两个页面，分别是A1页面和B1页面。A1页面时发送消息的，B1页面是接受页面的。

1.先写有消息的A1页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨文档消息传输  A1页面</title>
    <script>
        
        window.onload=function(){
            //获取按钮
            var btn=document.querySelector('button');
            //获取发送数据按钮
            var sendBtn=document.querySelector('#send');
            //给第一个按钮绑定事件 
            //给内联框架B1发送消息
            var iframe=document.querySelector('#iframe');
            iframe.onclick=function(){
                //获取B1内联窗口，给B1发送消息
                win=document.querySelector('iframe').contentWindow;
            }
            var win; 
            btn.onclick=function(){
                //获取B1窗口
                win=window.open("./25-B1.html")
            }
            //给发送数据按钮绑定事件
            sendBtn.onclick=function(){
                //发送的消息目标原
                var obj={
                    //注意：这里一定是":"，不是"="
                    name:'张三',
                    age:18
                }
                win.postMessage(obj)
            }
        }
    </script>
</head>
<body>
    <button>打开B1窗口</button>
    <button id="send">发送数据</button>
    <button id="iframe">获取内联框架B1，给B1发送消息</button>
    <!-- 在A1页面上展现出B1页面 -->
    <iframe src="./25-B1.html" frameborder="0"></iframe>
</body>
</html>

2.再写B1页面，来接收消息的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨文档B1页面</title>
    <style>
        body{
            background-color: cornflowerblue;
            height: 400px;
        }
    </style>
    <script>
        window.onmessage=function(event){
            //获取传输过来的数据
            console.log(event.data);
            //获取目标源
            console.log(event.origin);
        }
    </script>
</head>
<body>
    b的页面
</body>
</html>

3.得到A1的页面效果