HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
本文主要为广大网友提供“HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦”，希望对需要HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦网友有所帮助，学习一下!
前言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="/uploadfile/201307/25/9123465899.jpg" />
在以上基础上我们做一点修改，我们在子页面给出高宽按钮，用于告诉父窗口怎么改变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('','') + ''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 () {