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>
分享到：
相关推荐
在本文中，我们将深入探讨Qt6中的QML网络设置，特别是关于Web Sockets的应用。Qt6是Qt框架的最新版本，提供了丰富的功能和性能优化，而QML是Qt的声明式用户界面语言，使得UI设计变得直观且高效。在Qt6 QML中，Web ...
【标题解析】 "Guess:使用Web Sockets和Socket.io制作的猜谜...通过以上分析，我们可以看出这个项目涵盖了从客户端交互到服务器端处理，再到实时通信的多个层面，是学习和实践Web开发，尤其是实时应用开发的好案例。
3. **SSL/TLS支持**：AppWeb支持SSL（Secure Sockets Layer）和TLS（Transport Layer Security）协议，允许通过加密连接提供安全的Web服务，防止数据在传输过程中被窃取或篡改。 4. **模块化设计**：AppWeb的模块化...
总结，"Windows Sockets 源码.rar"这个压缩包是学习和研究Windows环境下网络编程的宝贵资源，它可以帮助开发者深入理解Winsock API的工作原理，从而更好地构建网络应用。通过阅读和实践其中的源码，可以提升网络编程...
总的来说，这个资源对于想要深入学习Windows环境下C++网络编程，特别是寻求高性能解决方案的开发者来说，是一份宝贵的学习资料。它将帮助你理解Winsock API，掌握网络编程的基本原理，同时了解如何利用高级技术如...
深入学习Windows Sockets API，开发者可以构建各种网络应用，如Web服务器、FTP客户端、邮件客户端、聊天程序等。理解并熟练运用这些API，需要掌握网络基础，如TCP/IP协议栈、套接字概念、面向连接与无连接服务的区别...
### Windows Sockets 规范及应用 ...通过深入学习本书提供的内容，开发者不仅能够掌握 Windows Sockets 的基础知识，还能了解到其实现细节和实际应用技巧，这对于提高网络应用程序的质量和性能具有重要意义。
总结，这个“简单的Web Server程序”是一个学习和理解Web服务器基础运作的实用案例。通过使用VC6.0和基本的TCP/IP网络编程，它可以作为初学者进入网络服务编程领域的起点，同时也是对已有网络编程经验者的一个复习和...
《WinCC技术手册——WinCC/WebNavigator 使用入门》是一份专为中文用户设计的...提供的“WebNavigatorInformationSystem_zh-CHS.pdf”文件应包含了所有这些关键信息，是学习和应用WinCC/WebNavigator的重要参考资料。
1. **套接字（Sockets）编程**：Web服务器通过套接字与客户端进行通信。套接字是进程间通信的一种方式，用于在网络中传输数据。在Linux中，我们使用`socket()`函数创建套接字，`bind()`函数绑定IP地址和端口，`...
Windows Sockets，通常简称为Winsock，是Microsoft Windows操作系统中实现网络通信的一种API（应用程序编程接口）。...通过深入学习和实践，开发者能够利用这一强大的工具创建高效、可靠的网络通信解决方案。
它引入了一系列新特性，如Canvas元素用于图形渲染，Video和Audio元素支持多媒体播放，Web Workers和Web Sockets增强了交互性和实时通信能力。更重要的是，HTML5提供了对本地存储的支持，如Web Storage和Web SQL ...
套接字编程是所有网络应用程序的基础，包括Web服务器、邮件客户端、聊天应用等。 压缩包子文件的文件名称列表只给出了“sockets”，这可能是压缩包内的目录名或者是包含多个套接字编程示例的主文件。在实际的学习或...
**套接字（Sockets）**是网络编程中的基本组件，它为进程间通信提供了接口，使得不同计算机上的应用程序能够相互通信。在操作系统中，套接字是网络通信的抽象概念，允许发送和接收数据。本文将深入探讨三种主要类型...
在进行性能测试时，LoadRunner提供了强大的调试和日志功能，通过`web_set_log_options()`和`web_set_sockets_option()`等函数可以调整日志级别和内容，帮助找出脚本问题或性能瓶颈。 总的来说，理解并掌握...
标题 "revisa026032021:修订Geral Nodejs montando um servidor Web com sockets.io" 暗示了这是一个关于使用Node.js构建Web服务器，并结合...学习和掌握这些知识点，你就能构建出能够处理实时交互的现代Web应用。
在VC++环境中，调用Web服务器通常涉及到网络编程和HTTP协议的应用。这个“vc调用web服务器”的项目可能是一个简单的示例，展示了如何...通过这个项目，你可以深入学习如何在VC++环境下实现客户端与Web服务器的交互。
7. **Web_set_sockets_option()**：用于设置网络连接相关的选项，如超时时间、重试次数等，对网络环境的适应性有重要作用。 8. **Web_set_user()**：此函数用于设置虚拟用户的登录信息，如用户名和密码，它可以模拟...