Web 通信技术 ——跨文档信息传输(JavaScript)
*/
* Copyright (c) 2016，烟台大学计算机与控制工程学院
* All rights reserved.
* 文件名：text.html
* 作者：常轩
* 微信公众号：Worldhello
* 完成日期：2016年11月2日
* 版本号：V1.0
* 程序输入：无
* 程序输出：见运行结果
*/
接收页面：
* Copyright (c) 2016，烟台大学计算机与控制工程学院
* All rights reserved.
* 文件名：text.html
* 作者：常轩
* 微信公众号：Worldhello
* 完成日期：2016年11月2日
* 版本号：V1.0
* 程序输入：无
* 程序输出：见运行结果
*/
Web 通信新技术 ——跨文档信息传输
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <meta http-equiv="refresh" content="5">-->
<title>postMessage子页面</title>
</head>
<body>
<div>
<p>接受来自:</p>
<h1 id="h1"></h1>
<p>的消息：</p>
<h1 id="p_text"></h1>
</div>
<input id="texts" type="text" name="textss">
<script type="text/javascript">
// 窗口事件监听：监听message
window.addEventListener("message",function(e){
var sts="123";
// e.origin:发送消息的地址，谁发的消息就是谁的
// 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据
//if( e.origin != "" ){
// return;
// }
document.getElementById("h1").innerHTML = e.origin;
// e.data:发消息的内容
document.getElementById("p_text").innerHTML = e.data;
// 接收到消息后，在回过去，回个话；
// 通过访问message的source的属性，来获取消息发送源的窗口对象，
// 也就是能知道是谁发的消息，在通过postMessage，给发消息者回个话
e.source.postMessage(sts,e.origin);
},false);
</script>
</body>
</html>接收页面：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- <meta http-equiv="refresh" content="5">-->
<title>postMessage主页面</title>
</head>
<body>
<div>
<p>接受来自:</p>
<h1 id="h1"></h1>
<p>的消息：</p>
<h1 id="p_text"></h1>
</div>
<iframe width="500px" height="500px" id="iframe"
src="http://1.aboutxuan.applinzi.com/test/test.html"
onload="send()">
</iframe>
<script type="text/javascript">
// 窗口事件监听：监听message
window.addEventListener("message",function(e){
// e.origin:发送消息的地址，谁发的消息就是谁的
// 接收时候，可以加个判断;避免接收来源不明的URL发过来的数据
//if( e.origin != "http://www.aboutxuan.applinzi.com" ){
// return;
//}
document.getElementById("h1").innerHTML = e.origin;
// e.data:发消息的内容
document.getElementById("p_text").innerHTML = e.data;
},false);
// 发消息
function send(){
// 获取嵌入的iframe
var iframe = window.frames[0],
send_origin = document.getElementById("iframe").getAttribute("src");
iframe.postMessage("我是父页面的消息",send_origin);
}
</script>
</body>
</html>
从自己想实现这一个功能到大体可以实现，花了点功夫。因为没有人带，所以走了些弯路。虽然现在只是有个雏形，不过还是有信心做出点东西的。加油！！！
