Web Sockets 学习

最新推荐文章于 2024-09-09 13:10:14 发布

缘梦

最新推荐文章于 2024-09-09 13:10:14 发布

阅读量114

点赞数

分类专栏： html/css 文章标签： html5 Web Sockets

html/css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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 οnlοad="pageload();">
<fieldset>
<legend>使用postMessage方法实现跨文档传输数据</legend>
<p id="pStatus"></p>
<input type="text" name="txtNum" value="" id="txtNum"/>
<input id="btn_add" type="button" value=" 请求 " οnclick="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 οnlοad="pageLoadForMessage();">

</body>
</html>

缘梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web Sockets 学习

1.postMessage()方法在Javascript中，出于代码安全性的考虑，不允许跨域访问其他页面中的元素，这个不同区域的页面数据互访带来障碍。而在HTML5中，可以利用对象的postMessage方法，在两个不同域名与端口的页面之间，实现数据的接收与发送功能。要实现跨域页面间的数据互访，需要调用对象的POSTMessage方法，其调用格式...
复制链接

扫一扫

专栏目录