这篇文章主要介绍了详解HTML5 window.postMessage与跨域,非常具有实用价值，需要的朋友可以参考下
在前一篇文章中，讲到浏览器同源策略，即阻止不同域的页面间访问彼此的方法和属性，并对解决同源策略跨域问题提出的解决方案进行阐述：子域代理、JSONP、CORS。本篇将详细阐述HTML5 window.postMessage，借助postMessage API，文档间可以以安全可控的方式实现跨域通信，第三方JavaScript代码也可以与iframe内加载的外部文档进行通信。
HTML5 window.postMessage API
HTML5 window.postMessage是一个安全的、基于事件的消息API。
postMessage发送消息
在需要发送消息的源窗口调用postMessage方法即可发送消息。
源窗口
源窗口可以是全局的window对象，也可以是以下类型的窗口:
文档窗口中的iframe:
var iframe = document.getElementById('my-iframe');
var win = iframe.documentWindow;JavaScript打开的弹窗：
var win = window.open();
当前文档窗口的父窗口：
var win = window.parent;
打开当前文档的窗口：
var win = window.opener();
找到源window对象后，即可调用postMessage API向目标窗口发送消息：
``win.postMessage('Hello', 'ttp://jhssdemo.duapp.com/');"
postMessage函数接收两个参数：第一个为将要发送的消息，第二个为源窗口的源。
注：只有当目标窗口的源与postMessage函数中传入的源参数值匹配时，才能接收到消息。
接收postMessage消息
要想接收到之前源窗口通过postMessage发出的消息，只需要在目标窗口注册message事件并绑定事件监听函数，就可以在函数参数中获取消息。
window.onload = function() {
var text = document.getElementById('txt');
function receiveMsg(e) {
console.log("Got a message!");
console.log("nMessage: " + e.data);
console.log("nOrigin: " + e.origin);
// console.log("Source: " + e.source);
text.innerHTML = "Got a message!<br>" +
"Message: " + e.data +
"<br>Origin: " + e.origin;
}
if (window.addEventListener) {
//为窗口注册message事件，并绑定监听函数
window.addEventListener('message', receiveMsg, false);
}else {
window.attachEvent('message', receiveMsg);
}
};message事件监听函数接收一个参数，Event对象实例，该对象有三个属性：
data 发送的具体消息
origin 发送消息源
source 发送消息窗口的window对象引用
说明
可以将postMessage函数第二个参数设为*，在发送跨域消息时会跳过对发送消息的源的检查。
postMessage只能发送字符串信息。
实例
源窗口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5 postMessage</title>
<style>
#otherWin {
width: 600px;
height: 400px;
background-color: #cccccc;
}
</style>
</head>
<body>
<button id="btn">open</button>
<button id="send">send</button>
<!-- 通过 iframe 嵌入子页面(接收消息目标窗口) -->
<iframe src="http://jhssdemo.duapp.com/demo/h5_postmessage/win.html"
id="otherWin"></iframe>
<br/><br/>
<input type="text" id="message"><input type="button"
value="Send to child.com" id="sendMessage" />
<script>
window.onload = function() {
var btn = document.getElementById('btn');
var btn_send = document.getElementById('send');
var sendBtn = document.getElementById('sendMessage');
var win;
btn.onclick = function() {
//通过window.open打开接收消息目标窗口
win = window.open('http://jhssdemo.duapp.com/demo/h5_postmessage/win.html', 'popUp');
}
btn_send.onclick = function() {
// 通过 postMessage 向子窗口发送数据
win.postMessage('Hello', 'http://jhssdemo.duapp.com/');
}
function sendIt(e){
// 通过 postMessage 向子窗口发送数据
document.getElementById("otherWin").contentWindow
.postMessage(
document.getElementById("message").value,
"http://jhssdemo.duapp.com/");
}
sendBtn.onclick = function(e) {
sendIt(e);
};
};
</script>
</body>
</html>目标窗口win.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Html5 postMessage</title>
<style>
#txt {
width: 500px;
height: 300px;
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>The New Window</h1>
<p id="txt"></p>
<script>
window.onload = function() {
var text = document.getElementById('txt');
//监听函数，接收一个参数--Event事件对象
function receiveMsg(e) {
console.log("Got a message!");
console.log("nMessage: " + e.data);
console.log("nOrigin: " + e.origin);
text.innerHTML = "Got a message!<br>" +
"Message: " + e.data +
"<br>Origin: " + e.origin;
}
if (window.addEventListener) {
//为window注册message事件并绑定监听函数
window.addEventListener('message', receiveMsg, false);
}else {
window.attachEvent('message', receiveMsg);
}
};
</script>
</body>
</html>回顾
通过本篇的学习，了解了使用HTML5的postMessage API在窗口间进行通信，也知道可以借助其实现跨域通信；现代浏览器基本都支持postMessage，而对于一些老式浏览器如IE7-等，可以使用一定的替代方案，进行数据通信，如window.name、url查询字符和hash片段等。
【相关推荐】
1. 特别推荐：“php程序员工具箱”V0.1版本下载
2. 免费h5在线视频教程
以上是HTML5 window.postMessage与跨域的实例教程的详细内容。更多信息请关注PHP中文网其他相关文章！
理解H5：含义和意义May 11, 2025 am 12:19 AMH5是HTML5，是HTML的第五个版本。HTML5提升了网页的表现力和交互性，引入了语义化标签、多媒体支持、离线存储和Canvas绘图等新特性，推动了Web技术的发展。
H5：可访问性和网络标准合规性May 10, 2025 am 12:21 AM无障碍访问和网络标准遵循对网站至关重要。1）无障碍访问确保所有用户都能平等访问网站，2）网络标准遵循提高网站的可访问性和一致性，3）实现无障碍访问需使用语义化HTML、键盘导航、颜色对比度和替代文本，4）遵循这些原则不仅是道德和法律要求，还能扩大用户群体。
HTML中的H5标签是什么？May 09, 2025 am 12:11 AMHTML中的H5标签是第五级标题，用于标记较小的标题或子标题。1)H5标签帮助细化内容层次，提升可读性和SEO。2)结合CSS可定制样式，增强视觉效果。3)合理使用H5标签，避免滥用，确保内容结构逻辑性。
H5代码：Web结构的初学者指南May 08, 2025 am 12:15 AMHTML5构建网站的方法包括：1.使用语义化标签定义网页结构，如、、等；2.嵌入多媒体内容，使用和标签；3.应用表单验证和本地存储等高级功能。通过这些步骤，你可以创建一个结构清晰、功能丰富的现代网页。
H5代码结构：组织内容以实现可读性May 07, 2025 am 12:06 AM通过合理的H5代码结构可以让页面在众多内容中脱颖而出。1)使用语义化标签如、、等组织内容，使结构清晰。2)通过CSS布局如Flexbox或Grid控制页面在不同设备上的呈现效果。3)实现响应式设计，确保页面在不同屏幕尺寸上自适应。
H5与较旧的HTML版本：比较May 06, 2025 am 12:09 AMHTML5（H5）与旧版本HTML的主要区别包括：1）H5引入了语义化标签，2）支持多媒体内容，3）提供离线存储功能。H5通过新标签和API增强了网页的功能和表现力，如和标签，提高了用户体验和SEO效果，但需注意兼容性问题。
H5与HTML5：澄清术语和关系May 05, 2025 am 12:02 AMH5和HTML5的区别在于：1）HTML5是网页标准，定义结构和内容；2）H5是基于HTML5的移动网页应用，适用于快速开发和营销。
HTML5特征：H5的核心May 04, 2025 am 12:05 AMHTML5的核心特性包括语义化标签、多媒体支持、表单增强和离线存储与本地存储。1.语义化标签如、等提高了代码可读性和SEO效果。2.多媒体支持通过和标签简化了嵌入媒体内容的过程。3.表单增强引入了新的输入类型和验证属性，简化了表单开发。4.离线存储和本地存储通过ApplicationCache和localStorage等提高了网页性能和用户体验。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
Atom编辑器mac版下载
最流行的的开源编辑器
SublimeText3 英文版
推荐：为Win版本，支持代码提示！
Dreamweaver CS6
视觉化网页开发工具
EditPlus 中文破解版
体积小，语法高亮，不支持代码提示功能
DVWA
Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中
