HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦


Posted in HTML / CSS onApril 25, 2013

前言

HTML5新增通信相关两个API,跨文档消息传输与WEB Sockets API,

跨文档消息传输功能,可以在不同网页文档,不同端口(跨域情况下)进行消息传递。

使用web sockets api 可以让客户端与服务器端通过socket端口传递数据,这样便可以使用数据推送技术。

跨文档消息传输

在之前我们若想跨域获取信息会花很多功夫,现在只要获取网页所在窗口对象实例变可以实现互相通信。

首先要想从其他窗口接受发过来的消息需要对其窗口对象进行监听:

window.addevntListener('message', function () {}, false)

使用windows对象的postMessage方法向其他窗口发生信息:

otherWindow.postMessage(message, targetOrigin)第一个参数为发送文本,也可以是js对象(json)第二个参数为接收消息对象窗口的URL,可以使用通配符

简单示例:

复制代码
代码如下:

post信息
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
window.addEventListener('message', function (ev) {
//应该要检查消息来源
$('#msg_box').html(ev.origin + ' 发来消息:' + ev.data);
}, false);

$('#send').click(function () {
var frame = window.frames[0];
frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm');
});
});

</script>
</head>
<body>
<input type="text" id="msg" />
<button id="send">
发送信息</button>
<iframe src="02.htm" width="400"></iframe>
<div id="msg_box">
</div>
</body>
</html>


HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

在以上基础上我们做一点修改,我们在子页面给出高宽按钮,用于告诉父窗口怎么改变iframe高宽:

复制代码
代码如下:

父层代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
window.addEventListener('message', function (ev) {
//应该要检查消息来源
$('#msg_box').html(ev.origin + ' 发来消息:' + ev.data);

var w_h = ev.data;
//未做格式检查
$('#f').css('width', w_h.split(',')[0] + 'px');
$('#f').css('height', w_h.split(',')[1] + 'px');

}, false);

function p() {
var frame = window.frames[0];
frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm');
}
$('#send').click(function () {
p();
});
setTimeout(p, 200);

});

</script>
</head>
<body>
<input type="text" id="msg" />
<button id="send">
发送信息</button>
<iframe src="02.htm" width="400" id="f"></iframe>
<div id="msg_box">
</div>
</body>
</html>

复制代码
代码如下:

子层代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../jquery-1.7.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var url = '';
var source = '';
window.addEventListener('message', function (ev) {
//此处需要做来源验证
if (ev.origin) { }
$('#msg').html(ev.origin + ' 发来消息:' + ev.data);
url = ev.origin;
source = ev.source;
//ev.source.postMessage('这里是:' + this.location, ev.origin);
});

$('#send').click(function () {
source.postMessage($('#w_h').val(), url);
});
});
</script>
</head>
<body>
<div id='msg'>
</div>
<input type="text" id="w_h" />
<button id="send">
改变外层高度</button>
</body>
</html>


HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

最后为我们的e截个图:

HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦

更加灵活的运用,该api还可以更厉害的运用,我们可以传递函数名什么的,反正可做很多事情了。

web sockets 通信

web sockets 是HTML5提供的在web应用程序中客户端与服务器端之间进行非HTTP的通信机制

他实现了http不容易实现的服务器的数据推送等智能通信技术,因此受到了很高的关注。

使用web sockes api 可以在服务器端与客户端建立非HTTP的双向连接,这个连接是实时的也是永久的,除非显式关闭

这意味着当服务器想向客户端发送数据时,可以立即将数据推送到客户浏览器中,无需重新建立连接。

只要客户端有一个被打开的socket并且与服务器建立了连接,服务器就可以将数据推送到这个socket上,服务器不再需要轮询客户端请求,化被动为主动。

web sockets api

复制代码
代码如下:

var webSocket = new WebSocket('ws://localhost:8005/socket');
url必须使用ws或者wss(加密)作为头,这个url设定好后,在javascript脚本中可以通过访问websocket对象的url来重新获取
通信建立连接后,就可以双向通信了,使用websocket对象的send方法加json数据便可将任何形式数据传往服务器:</p> <p>webSocket.send(msg);
通过onmessage事件来接收服务器传送过来数据:
webSocket.onmessage = function (e) {

var data = e.data;
};
通过onopern事件监听socket打开事件:
webSocket.onopen = function (e) { };
通过onclose监听socket关闭事件:
webSocket.onclose = function (e) {};
通过webSocket.close()方法关闭socket连接;</p> <p>通过readyState属性获取websocket对象状态:
CONNECTION 0 正在连接
OPEN 1 已经连接
CLOSING 2 正在关闭
CLOSE 2 已经关闭


PS:,因为我不会配置服务器块的socket相关,所以暂时不能进行测试,该问题留待二次学习时解决。

整个代码还是很简单的:

复制代码
代码如下:

// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); </p> <p>// 打开Socket
socket.onopen = function(event) { </p> <p> // 发送一个初始化消息
socket.send('I am the client and I\'m listening!'); </p> <p> // 监听消息
socket.onmessage = function(event) {
console.log('Client received a message',event);
}; </p> <p> // 监听Socket的关闭
socket.onclose = function(event) {
console.log('Client notified socket has closed',event);
}; </p> <p> // 关闭Socket....
//socket.close()
};
HTML / CSS 相关文章推荐
基于CSS3特效之动画:animation的应用
May 09 HTML / CSS
css3 自定义字体font-face使用介绍
May 14 HTML / CSS
一款CSS3实现多功能下拉菜单(带分享按)的教程
Nov 05 HTML / CSS
纯css3实现的鼠标悬停动画按钮
Dec 23 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
canvas绘制表情包的示例代码
Jul 09 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
Oct 20 HTML / CSS
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
Jan 30 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
html5中 media(播放器)的api使用指南
Dec 26 HTML / CSS
HTML5学习心得总结(推荐)
Jul 08 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 #HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 #HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 #HTML / CSS
HTML5 Web Workers之网站也能多线程的实现
Apr 24 #HTML / CSS
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
Apr 22 #HTML / CSS
基于IE10/HTML5 开发
Apr 22 #HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
Apr 22 #HTML / CSS
You might like
dedecms模板标签代码官方参考
2007/03/17 PHP
PHP 定界符 使用技巧
2009/06/14 PHP
解析Linux下Varnish缓存的配置优化
2013/06/20 PHP
PHP+FastCGI+Nginx配置PHP运行环境
2014/08/07 PHP
基于PHP实现商品成交时发送短信功能
2016/05/11 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
Javascript 自定义类型方法小结
2010/03/02 Javascript
ExtJS PropertyGrid中使用Combobox选择值问题
2010/06/13 Javascript
jquery 查找select ,并触发事件的实现代码
2011/03/30 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
javascript内存管理详细解析
2013/11/11 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
angularjs $http实现form表单提交示例
2017/06/09 Javascript
原生JS实现移动端web轮播图详解(结合Tween算法造轮子)
2017/09/10 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
Python and、or以及and-or语法总结
2015/04/14 Python
Python编程之属性和方法实例详解
2015/05/19 Python
编写Python脚本把sqlAlchemy对象转换成dict的教程
2015/05/29 Python
python解决网站的反爬虫策略总结
2016/10/26 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python3实现zabbix告警推送钉钉的示例
2019/02/20 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
Python内置函数property()如何使用
2020/09/01 Python
pymysql模块使用简介与示例
2020/11/17 Python
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
澳大利亚在线划船、露营和钓鱼商店:BCF Australia
2020/03/22 全球购物
迟到检讨书800字
2014/01/13 职场文书
经贸韩语专业大学生职业规划
2014/02/14 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
大专学生求职自荐信
2014/07/06 职场文书
2014年公务员转正工作总结
2014/11/07 职场文书
《地。-关于地球的运动-》单行本第七集上市,小说家朝井辽献上期待又害怕的推荐文
2022/03/31 日漫