在开发中我们会遇到因为不同域的原因造成无法互相发送信息，这时就可以通过window.postMessage()来实现；例如在一个页面中嵌入iframe页面，此刻就需要用到跨源通信。

先来说说什么是跨源通信，由于浏览器的同源限制,只有在相同协议、ip以及端口号的两个页面才能相互通信。而window.postMessage()采取了某种机制规避这种限制,可以实现安全的跨源通信。

如何发送信息？

发送消息通过Window.postMessage(message, targetOrigin, [transfer])

方法
Window.postMessage(message, targetOrigin, [transfer])

三个参数的意义：
message
发送到其他window的信息
targetOrigin
发送信息的目标url，如果没有指定目标url用字符串*表示；但是为了安全，如果你知道目标url建议使用目标url。
transfer(可选参数)
是一串和 message 同时传递的 Transferable 对象。这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

如何接收信息？

Window.postMessage(message, targetOrigin, [transfer])这个方法只是单纯的将信息进行了发送（发送到window)，接收信息需要通过window进行监听，并且发送过来的数据都保存在message中：

监听的方法
window.addEventListener(“message”, receiveMessage, false);

message有三个属性：
data
从其他 window 中传递过来的对象。
orgin
通过Window.postMessage()发送过来的源地址
source
对发送消息的窗口对象的引用; 您可以使用此来在具有不同 origin 的两个窗口之间建立双向通信。

看实例：

在1.html文件中触发Window.postMessage()将数据发送到2.html文件中，并通过点击事件进行赋值。
在这里插入图片描述

触发前：

在这里插入图片描述

触发后：

在这里插入图片描述

测试代码：

1.html:

<!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>Document</title>
</head>
<style>
    .fa {
        width: 100px;
        height: 100px;
        background: yellow;
    }
</style>
<body>
    <div class="fa">  
        窗口1
        <button onclick="btn()">调用postMessage</button>
    </div>
    <iframe src="./2.html" frameborder="1" id='123' name="abc"></iframe>
    <script>
        function btn() {
            window.top.postMessage({ content: '通过窗口1发送的数据'}, '*')
        }
    </script>
</body>
</html>

2.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>
    <div>窗口2</div>
    <span class="text"></span>
    <script>
        top.addEventListener('message',(e)=>{
            let spanText = document.querySelector('.text')
            // 接收窗口1的 window.postMessage() 发送的数据，比并给 span 标签赋值
            spanText.innerHTML = e.data.content
            console.log(e);
        },false)
    </script>
</body>
</html>
# html5 # 前端框架 # 程序人生
Logo
View Design

基于 Vue 的企业级 UI 组件库和中后台系统解决方案，为数万开发者服务。

更多推荐

cover

vue+element ui实现好看的登录界面

avatar ViewDesign

vue3.0中使用elementUi(element-plus的使用)

element-plus的使用小朋友，你是不是有很多问号❓❓❓甲：为什么在vue3.0中不能使用Element UI了？乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。甲：那有什么方法能解决吗？乙：使用Element UI的升级

avatar ViewDesign

ElementUI 整体页面布局

一、概述一般后台页面的顶部导航栏和左侧导航栏一般是固定的，我们可以布局成下面的样式二、整体项目布局因为我们的首页是个公共的组件，点击首页，会员管理，都不会变，所以我们可以放在一个单独文件夹里面。需要分别对头部，左侧区域，主区域拆分成不同的文件。创建项目创建一个全新的ElementUI 项目，请参考链接：https://www.cnblogs.com/xiao987334176/p...

avatar ViewDesign