time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > HTML5初探通信API实现跨域和数据推送

HTML5初探通信API实现跨域和数据推送

时间:2013-05-03 21:52 点击:11836次 字体:[ ]




前言

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

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

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

跨文档消息传输

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

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

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

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

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

  1. post信息  
  2.  <!DOCTYPE html> 
  3.  <html xmlns="http://www.w3.org/1999/xhtml"> 
  4.  <head> 
  5.      <title></title> 
  6.      <script src="../jquery-1.7.1.js" type="text/javascript"></script> 
  7.      <script type="text/javascript"> 
  8.          $(document).ready(function () {  
  9.              window.addEventListener('message', function (ev) {  
  10.                  //应该要检查消息来源  
  11.                  $('#msg_box').html(ev.origin + ' 发来消息:' + ev.data);  
  12.              }, false);  
  13.    
  14.              $('#send').click(function () {  
  15.                  var frame = window.frames[0];  
  16.                  frame.postMessage($('#msg').val(), 'http://localhost:3317/html5%E4%B8%8Ecss3/06%E9%80%9A%E8%AE%AFapi/02.htm');  
  17.              });  
  18.          });  
  19.        
  20.      </script> 
  21.  </head> 
  22.  <body> 
  23.      <input type="text" id="msg" /> 
  24.      <button id="send"> 
  25.          发送信息</button> 
  26.      <iframe src="02.htm" width="400"></iframe> 
  27.      <div id="msg_box"> 
  28.      </div> 
  29.  </body> 
  30.  </html> 

HTML5初探通信API实现跨域和数据推送_www.fengfly.com



本文地址 : http://www.fengfly.com/plus/view-212672-1.html
标签: HTML5
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: