postMessage实现跨域、跨窗口消息传递
这次给大家带来postMessage实现跨域、跨窗口消息传递，postMessage实现跨域、跨窗口消息传递的注意事项有哪些，下面就是实战案例，一起来看一下。
平时做web开发的时候关于消息传递，除了客户端与服务器传值还有几个经常会遇到的问题
1.页面和其打开的新窗口的数据传递
2.多窗口之间消息传递
3.页面与嵌套的iframe消息传递
4.上面三个问题的跨域数据传递
postMessage()
这些问题都有一些解决办法，但html5引入的message的API可以更方便、有效、安全的解决这些难题。postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
postMessage(data,origin)方法接受两个参数
1.data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果。
2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。
http://test.com/index.html
<p style="width:200px; float:left; margin-right:200px;border:solid 1px #333;"> <p id="color">Frame Color</p> </p> <p> <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe> </p>
我们可以在http://test.com/index.html通过postMessage()方法向跨域的iframe页面http://lsLib.com/lsLib.html传递消息
window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}test.com上面的页面向lslib.com发送了消息，那么在lslib.com页面上如何接收消息呢，监听window的message事件就可以
http://lslib.com/lslib.html
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);这样我们就可以接收任何窗口传递来的消息了，为了安全起见，我们利用这时候的MessageEvent对象判断了一下消息源,MessageEvent是一个这样的东东
有几个重要属性
1.data：顾名思义，是传递来的message
2.source：发送消息的窗口对象
3.origin：发送消息窗口的源（协议+主机+端口号）
这样就可以接收跨域的消息了，我们还可以发送消息回去，方法类似
简单的demo
在这个例子中，左边的p会根据右边iframe内p颜色变化而变化
<!DOCTYPE html>
<html>
<head>
<title>Post Message</title>
</head>
<body>
<p style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
<p id="color">Frame Color</p>
</p>
<p>
<iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
</p>
<script type="text/javascript">
window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}
window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);
</script>
</body>
</html>
http://test.com/index.html<!doctype html>
<html>
<head>
<style type="text/css">
html,body{
height:100%;
margin:0px;
}
</style>
</head>
<body style="height:100%;">
<p id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
click to change color
</p>
<script type="text/javascript">
var container=document.getElementById('container');
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);
function changeColor () {
var color=container.style.backgroundColor;
if(color=='rgb(204, 102, 0)'){
color='rgb(204, 204, 0)';
}else{
color='rgb(204,102,0)';
}
container.style.backgroundColor=color;
window.parent.postMessage(color,'*');
}
</script>
</body>
</html>
http://lslib.com/lslib.html在例子中页面加载的时候主页面向iframe发送’getColor‘ 请求（参数没实际用处）
window.onload=function(){
window.frames[0].postMessage('getcolor','http://lslib.com');
}iframe接收消息，并把当前颜色发送给主页面呢
window.addEventListener('message',function(e){
if(e.source!=window.parent) return;
var color=container.style.backgroundColor;
window.parent.postMessage(color,'*');
},false);主页面接收消息，更改自己p颜色
window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);当点击iframe事触发其变色方法，把最新颜色发送给主页面
function changeColor () {
var color=container.style.backgroundColor;
if(color=='rgb(204, 102, 0)'){
color='rgb(204, 204, 0)';
}else{
color='rgb(204,102,0)';
}
container.style.backgroundColor=color;
window.parent.postMessage(color,'*');
}主页面还是利用刚才监听message事件的程序处理自身变色
window.addEventListener('message',function(e){
var color=e.data;
document.getElementById('color').style.backgroundColor=color;
},false);相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
spring mvc+localResizeIMG实现H5端图片压缩上传
以上是postMessage实现跨域、跨窗口消息传递的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
消息已发出但被对方拒收是什么意思
Mar 07, 2024 pm 03:59 PM
消息已发出但被对方拒收是所发送的信息已经成功地从设备发送出去，但由于某种原因，对方并没有接收到这条信息。更具体地说，这通常是因为对方已经设置了某些权限或采取了某些操作，导致你的信息无法被正常接收。
什么是 Windows 11 中的传递优化文件，您可以删除它们吗？
Sep 29, 2023 pm 04:09 PM
传递优化是帮助Windows更新和Windows应用商店更快地运行和交付更新的功能。传递优化中的缓存文件应该在一段时间后删除，但对于我们的一些读者来说，它们不断堆积并占用不必要的空间。删除传递优化文件是否安全？是的，删除传递优化文件是安全的，在本文中，您会发现在Windows11中这样做非常容易。尽管不建议手动删除传递优化文件，但可以自动执行此操作。如何删除Windows11上的传递优化文件？单击搜索栏，键入磁盘清理，然后从结果中打开该工具。如果您有多个驱动器，请选择带有系统的驱动器（通常是C：
如何在iOS 17上的iMessage中向右滑动并快速回复
Sep 20, 2023 am 10:45 AM
如何在iPhone上使用滑动在iMessages中回复注意：滑动回复功能仅适用于iOS17中的iMessage对话，不适用于“信息”应用程序中的常规SMS对话。在iPhone上打开“消息”应用。然后，前往iMessage对话，只需在您要回复的iMessage上向右滑动即可。完成此操作后，所选的iMessage将成为焦点，而所有其他消息将在背景中模糊不清。您将看到一个文本框，用于键入回复以及“+”图标，用于访问iMessage应用程序，如“签到”、“位置”、“贴纸”、“照片”等。只需输入您的消息，
iOS 17：如何在消息中使用表情符号作为贴纸
Sep 18, 2023 pm 05:13 PM
在iOS17中，Apple在其消息应用程序中添加了几项新功能，以使与其他Apple用户的交流更具创意和乐趣。其中一个功能是能够使用表情符号作为贴纸。贴纸已经在消息应用程序中存在多年了，但到目前为止，它们并没有太大变化。这是因为在iOS17中，Apple将所有标准表情符号视为贴纸，允许它们以与实际贴纸相同的方式使用。这本质上意味着您不再局限于在对话中插入它们。现在，您还可以将它们拖到消息气泡上的任何位置。您甚至可以将它们堆叠在一起，以创建小表情符号场景。以下步骤向您展示了它在iOS17中的工作方式
消息已发出但被对方拒收了是拉黑还是删除
Mar 12, 2024 pm 02:41 PM
1、被加入黑名单：消息已发出但被对方拒收了一般是被拉黑了，这时你将无法向对方发送消息，对方也无法收到你的消息。2、网络问题：如果接收方的网络状况不佳，或者存在网络故障，就可能导致消息无法成功接收。此时，可以尝试等待网络恢复正常后再次发送消息。3、对方设置了免打扰：如果接收方在微信中设置了免打扰功能，那么在一定时间内，发送方的消息将不会被提醒或显示。
如何在iPhone上编辑消息
Dec 18, 2023 pm 02:13 PM
iPhone上的原生“信息”应用可让您轻松编辑已发送的文本。这样，您可以纠正您的错误、标点符号，甚至是自动更正可能已应用于您的文本的错误短语/单词。在这篇文章中，我们将了解如何在iPhone上编辑消息。如何在iPhone上编辑消息必需：运行iOS16或更高版本的iPhone。您只能在“消息”应用程序上编辑iMessage文本，并且只能在发送原始文本后的15分钟内编辑。不支持非iMessage信息文本，因此无法检索或编辑它们。在iPhone上启动消息应用程序。在“信息”中，选择要从中编辑消息的对话
小米14Pro怎么设置来消息亮屏？
Mar 18, 2024 pm 12:07 PM
小米14Pro是一款性能配置非常出色的旗舰机型，自从正式发布以来就拥有很高的销量，小米14Pro的很多小功能是会被大家忽视的，比如说是设置来消息亮屏，功能虽小，但是是十分实用的，在使用手机的过程中大家会遇到各种问题，那么小米14Pro怎么设置来消息亮屏呢？小米14Pro怎么设置来消息亮屏？步骤一：打开手机的“设置”应用。步骤二：向下滑动直到找到“锁定屏幕和密码”选项，并点击进入。步骤三：在“锁定屏幕和密码”菜单中，找到并点击“接收通知时亮屏”选项。步骤四：在“接收通知时亮屏”页面中，打开开关以启
Vivox100s发布日期确定！最新消息抢先知
Mar 22, 2024 pm 02:18 PM
Vivox100s发布日期确定！最新消息抢先知近日，科技界掀起了一股关于Vivox100s的热潮，这款备受期待的产品终于确定了发布日期，让众多消费者和科技爱好者为之兴奋不已。据悉，Vivox100s将在本月底正式发布，届时将带来哪些惊喜，备受关注的新品到底有何亮点，让我们一同揭开这个科技谜团。Vivox100s作为Vivox系列的最新力作，自曝光以来就备受关
