首页 > 上网技巧 > 电脑小技巧 > HTML5之跨域通信API 跨域数据推送初探

HTML5之跨域通信API 跨域数据推送初探

时间:2017-10-03 09:28 作者:QQ地带 我要评论

前言
 
HTML5新增通信相关两个API,跨文档消息传输与WEB Sockets API,
 
跨文档消息传输功能,可以在不同网页文档,不同端口(跨域情况下)进行消息传递。
 
使用web sockets api 可以让客户端与服务器端通过socket端口传递数据,这样便可以使用数据推送技术。
 
跨文档消息传输
 
在之前我们若想跨域获取信息会花很多功夫,现在只要获取网页所在窗口对象实例变可以实现互相通信。
 
首先要想从其他窗口接受发过来的消息需要对其窗口对象进行监听:
 
window.addevntListener('message', function () {}, false)
使用windows对象的postMessage方法向其他窗口发生信息:
 
otherWindow.postMessage(message, targetOrigin)
第一个参数为发送文本,也可以是js对象(json)
第二个参数为接收消息对象窗口的URL,可以使用通配符
简单示例:
 
post信息
 
  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <title></title> 
  5.     <script src="../jquery-1.7.1.js" type="text/javascript"></script> 
  6.     <script type="text/javascript"> 
  7.         $(document).ready(function () { 
  8.             window.addEventListener('message', function (ev) { 
  9.                 //应该要检查消息来源 
  10.                 $('#msg_box').html(ev.origin + ' 发来消息:' + ev.data); 
  11.             }, false); 
  12.  
  13.             $('#send').click(function () { 
  14.                 var frame = window.frames[0]; 
  15.                 frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm'); 
  16.             }); 
  17.         }); 
  18.      
  19.     </script> 
  20. </head> 
  21. <body> 
  22.     <input type="text" id="msg" /> 
  23.     <button id="send"> 
  24.         发送信息</button> 
  25.     <iframe src="02.htm" width="400"></iframe> 
  26.     <div id="msg_box"> 
  27.     </div> 
  28. </body> 
  29. </html> 
 
在以上基础上我们做一点修改,我们在子页面给出高宽按钮,用于告诉父窗口怎么改变iframe高宽:
 
父层代码
 
  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <title></title> 
  5.     <script src="../jquery-1.7.1.js" type="text/javascript"></script> 
  6.     <script type="text/javascript"> 
  7.         $(document).ready(function () { 
  8.             window.addEventListener('message', function (ev) { 
  9.                 //应该要检查消息来源 
  10.                 $('#msg_box').html(ev.origin + ' 发来消息:' + ev.data); 
  11.  
  12.                 var w_h = ev.data; 
  13.                 //未做格式检查 
  14.                 $('#f').css('width', w_h.split(',')[0] + 'px'); 
  15.                 $('#f').css('height', w_h.split(',')[1] + 'px'); 
  16.  
  17.             }, false); 
  18.  
  19.             function p() { 
  20.                 var frame = window.frames[0]; 
  21.                 frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm'); 
  22.             } 
  23.             $('#send').click(function () { 
  24.                 p(); 
  25.             }); 
  26.             setTimeout(p, 200); 
  27.  
  28.         }); 
  29.      
  30.     </script> 
  31. </head> 
  32. <body> 
  33.     <input type="text" id="msg" /> 
  34.     <button id="send"> 
  35.         发送信息</button><br /> 
  36.     <iframe src="02.htm" width="400" id="f"></iframe> 
  37.     <div id="msg_box"> 
  38.     </div> 
  39. </body> 
  40. </html> 
子层代码
 
  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4.     <title></title> 
  5.     <script src="../jquery-1.7.1.js" type="text/javascript"></script> 
  6.     <script type="text/javascript"> 
  7.         $(document).ready(function () { 
  8.             var url = ''
  9.             var source = ''
  10.             window.addEventListener('message', function (ev) { 
  11.                 //此处需要做来源验证 
  12.                 if (ev.origin) { } 
  13.                 $('#msg').html(ev.origin + ' 发来消息:' + ev.data); 
  14.                 url = ev.origin; 
  15.                 source = ev.source; 
  16.                 //ev.source.postMessage('这里是:' + this.location, ev.origin); 
  17.             }); 
  18.  
  19.             $('#send').click(function () { 
  20.                 source.postMessage($('#w_h').val(), url); 
  21.             }); 
  22.         }); 
  23.     </script> 
  24. </head> 
  25. <body> 
  26.     <div id='msg'> 
  27.     </div> 
  28.     <input type="text" id="w_h" /> 
  29.     <button id="send"> 
  30.         改变外层高度</button><br /> 
  31. </body> 
  32. </html> 
 
最后为我们的e截个图:
 
 
 
更加灵活的运用,该api还可以更厉害的运用,我们可以传递函数名什么的,反正可做很多事情了。
 
web sockets 通信
 
web sockets 是HTML5提供的在web应用程序中客户端与服务器端之间进行非HTTP的通信机制
 
他实现了http不容易实现的服务器的数据推送等智能通信技术,因此受到了很高的关注。
 
使用web sockes api 可以在服务器端与客户端建立非HTTP的双向连接,这个连接是实时的也是永久的,除非显式关闭
 
这意味着当服务器想向客户端发送数据时,可以立即将数据推送到客户浏览器中,无需重新建立连接。
 
只要客户端有一个被打开的socket并且与服务器建立了连接,服务器就可以将数据推送到这个socket上,服务器不再需要轮询客户端请求,化被动为主动。
 
web sockets api
 
 web sockets api 本身非常简单,将url作为参数,然后调用websocket对象的构造器来建立于服务器的通信:
 
复制代码
var webSocket = new WebSocket('ws://localhost:8005/socket');
url必须使用ws或者wss(加密)作为头,这个url设定好后,在javascript脚本中可以通过访问websocket对象的url来重新获取
通信建立连接后,就可以双向通信了,使用websocket对象的send方法加json数据便可将任何形式数据传往服务器:
 
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连接;
 
通过readyState属性获取websocket对象状态:
CONNECTION 0 正在连接
OPEN 1 已经连接
CLOSING 2 正在关闭
CLOSE 2 已经关闭
复制代码
PS:,因为我不会配置服务器块的socket相关,所以暂时不能进行测试,该问题留待二次学习时解决。
 
整个代码还是很简单的:
 
复制代码
// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 
 
// 打开Socket 
socket.onopen = function(event) { 
 
  // 发送一个初始化消息
  socket.send('I am the client and I\'m listening!'); 
 
  // 监听消息
  socket.onmessage = function(event) { 
    console.log('Client received a message',event); 
  }; 
 
  // 监听Socket的关闭
  socket.onclose = function(event) { 
    console.log('Client notified socket has closed',event); 
  }; 
 
  // 关闭Socket.... 
  //socket.close() 
};
复制代码
 
 
结语
 
这章东西其实还是非常有用的,但真要问我有什么用,我还确实说不出来。

标签: Html5
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告