1.postMessage()方法
在Javascript中，出于代码安全性的考虑，不允许跨域访问其他页面中的元素，这个不同区域的页面数据互访带来障碍。而在HTML5中，可以利用对象的postMessage方法，在两个不同域名与端口的页面之间，实现数据的接收与发送功能。
要实现跨域页面间的数据互访，需要调用对象的POSTMessage方法，其调用格式如下：
otherWindow.postMessage(Message, targetOrigin);
其中，
-
otherWindow为接收数据的页面的引用对象，可以是Window.open的返回值，也可以是iframe的contentWindow属性，或通过下标返回的window.frames单个实体对象；message表示所有发送的数据、字符类型，也可以是JSON对象转换后的字符内容；
- targetOrigin表示发送数据的URL来源，用于限制otherWIndow对象的接受范围，如果该值为通配符号（*），则表示不限制发送来源，指向全部的地址。
下面给出一个简单的学习例子：
WebSocketOfHTML5.html
<!DOCTYPE HTML>
<html>
<head>
<title>webSocket</title>
<meta charset="UTF-8" />
<script type="text/javascript">
function $$(id){
return document.getElementById(id);
}
var strOrigin = "http://127.0.0.1:8020";
/**
*自定义页面加载函数
*/
function pageload(){
window.addEventListener('message', function(event){
if(event.origin == strOrigin){ //判断各自请求来源是否符合约定的Origin值，是则进行以下操作，否则不就行任何数据交互
$$('pStatus').style.display = "block";
$$('pStatus').innerHTML += event.data; //将接收到的数据添加到页面显示中
}
}, false);
}
/**
*单击"请求"按钮时调用的函数
*/
function btn_Send(){
var strTxtValue = $$("txtNum").value; //获取需要发送的内容
if(strTxtValue.length > 0){
var targetOrigin = strOrigin;
//说明由iframe中的页面接收数据，targetOrigin为发送数据的URL源
$$("ifrA").contentWindow.postMessage(strTxtValue, targetOrigin);
$$("txtNum").value = "";
}
}
</script>
</head>
<body onload="pageload();">
<fieldset>
<legend>使用postMessage方法实现跨文档传输数据</legend>
<p id="pStatus"></p>
<input type="text" name="txtNum" value="" id="txtNum"/>
<input id="btn_add" type="button" value=" 请求 " onclick="btn_Send();"/>
<iframe id="ifrA" src="Message.html" width="0px" height="0px" frameborder="0"></iframe>
</fieldset>
</body>
</html>
Message.html
<!DOCTYPE HTML>
<html>
<head>
<title>message</title>
<meta charset="UTF-8" />
<script type="text/javascript" charset="utf-8">
var strOrigin = "http://127.0.0.1:8020";
/**
*iframe中子页面加载时调用的函数
*/
function pageLoadForMessage(){
window.addEventListener('message',function(event) {
if(event.origin == strOrigin){
var strRetHTML = "<span><b>";
strRetHTML += event.data + "</b>位随机数为：<b>";
strRetHTML += RetNumber(event.data);
strRetHTML += "</b></span><br>";
event.source.postMessage(strRetHTML, event.origin); //说明由发送数据过来的页面作为接收对象
}
}, false);
}
/**
*生成指定长度的随机数
*/
function RetNumber(n){
var strRnd = "";
for(var intI = 0; intI < n; intI++){
strRnd += Math.floor(Math.random()*10);
}
return strRnd;
}
</script>
</head>
<body onload="pageLoadForMessage();">
</body>
</html>
分享到：
相关推荐
乒乓球乒乓球游戏的简单实现。 我创建这个是为了学习目的，基本上是为了我可以玩 nodejs web sockets :-) 测试提交
第6~8章，讲解了路由、代理、Web服务器、中间件等基本概念，包括Express。第9章到第11章分别介绍了基于Redis、MongoDB以及关系型数据库的Node应用开发。第12章到第14章分别介绍了图形和媒体、Sockets.io模块、调试和...
#学习的101个经典例子,例子个个经典,涵盖C#的方方面面,带有说详尽的注释 Advanced - Multithreading - How-To Async Calls Advanced - Remoting - How-To TCP Remoting Advanced - Serialization - How-To ...
同步扩展目的：构建由Sockets驱动的Web应用程序。要求Flask-SocketIO jQuery + Socket.io 空闲时间和学习意愿我们计划构建什么。 同步的滑块（跨多个客户端同步）。 一个简单的聊天应用程序，可以与人们在线聊天。 ...
Flask框架是Python开发的一个基于Werkzeug和Jinja 2的web开发微框架，它的优势就是极其简洁， 但又非常灵活，而且容易学习和应用。因此Flask框架是Python新手快速开始web开发最好的选择，此外， 使用Flask框架的另一...
用c++/qt写的项目，可供自己学习，项目都经测试过，真实可靠，请放心使用。Qt支持 Windows、Linux/Unix、Mac OS X、Android、BlackBerry、QNX等多种平台，并为这些不同的平台提供了统一的开发环境。 面向对象 C++...
它很好地集成了其他技术，例如Web Sockets 。 它是用Node.js和Python开发的。 此处开发的所有应用程序均旨在进行实验和学习。 因此，您不能认为它们足够强大，无法投入生产。如何贡献如果您有任何FIWARE示例，您...
软件开发设计：PHP、QT、应用软件开发、系统软件开发、移动应用开发、网站开发C++、Java、python、web、C#等语言的项目开发与学习资料 硬件与设备：单片机、EDA、proteus、RTOS、包括计算机硬件、服务器、网络设备、...
Silverlight 2 Beta 1版本发布了，无论从Runtime还是Tools都给我们带来了很多的惊喜，如支持框架语言Visual Basic, Visual C#, IronRuby, Ironpython，对JSON、Web Service、WCF以及Sockets的支持等一系列新的特性。...
Chapter 4 - Core Library Classes （核心类库） Chapter 5 - Visual Controls （虚拟组件） Chapter 6 - Building the User Interface （建立用户界面） Chapter 7 - Working with Forms （从窗体开始学习） Part ...
本周我们学习了如何使用 express 和 web-sockets 在 node.js 中构建简单的应用程序。 规格 Chat Websocket Practice 是一个在线教程，它解释了如何使用 io 套接字来构建具有以下功能的基本聊天应用程序： 用户可以...
▲ 使用JAVA的Sockets机制进行网络通信 预备知识：学习本课程，您必须具备以下能力 ▲ 能够编译C或C++程序或者已经参加过SL-110课程，能够创建和编译简单的程序 ▲ 能够使用VI或者Open Windows的文件编辑器 ▲...
Developing Secure Web Applications Discuz 得到cookies的漏洞 Discuz! 漏洞 Discuz漏洞大全 Discuz论坛短消息未限制发送次数漏洞 Fingerprinting Port80 header-based-exploitation HotNews arbitary file ...
实时聊天应用 使用 socket.io 学习网络套接字实现的实时聊天应用程序
这是解决方案的开始：我学习了如何启动后台Java脚本，以及如何从php模板文件建立套接字连接。 然后，脚本和模板可以通过套接字来回发送消息。 首先，我必须从...购买专用的IP地址。
◆ 82.htm 用Sockets发送电子邮件 ◆ 83.htm 用VB 创 建 自 己 的 通 信 程 序 ◆ 84.htm 用VB5.0开发通信软件的技巧 ◆ 85.htm 用VB5开发IE ◆ 86.htm 用VB编写网络寻呼 ◆ 87.htm ...