html5的跨域通信的原理实践

我们知道在html5能够实现两个页面的跨域通信,也就是说,如果你在一个浏览器里面打开两个窗口,他们之间能够实现不同域名之间的通信,这个就是说,你使用同一个浏览器打开多个页面,这些页面之间的数据是共享的,这个严重加大了浏览器的之间的数据共享性,之前我们使用html,或者是xhtml都是没办法做到的!~

现在我们直接来看演示吧

1.配置项目的信息

在index.html输入:

———————————————————————————————-

<!DOCTYPE HTML>
<html>
<head>
<title>跨域通信的实例</title>
<meta charset=”UTF-8″>
<script type=”text/javascript”>
window.addEventListener(“message”,function(ev){ //监听整个浏览器窗口的数据对象
if(ev.origin!=”http://localhost“){ //这里是指定我们这个文件接收的是哪一个域名传过来的数据
return;//如果不是指定的又域名,则返回
}
alert(“从”+ev.origin+”那儿传过来的信息,内容是”+ev.data);//这是打印别的页面传过来的数据
},false);

function hello(){
var iframe=window.frames[0];//获得子框架
iframe.postMessage(“你好”,”http://localhost/”);//指定你是传到哪儿去,这是可以指定你所传的地址
}
</script>
</head>
<body>
<h1>跨域通信的实例</h1>
<iframe width=”400″ src=’http://localhost/wendangmessage/test.html’ onload=”hello()”>
</iframe>
</body>
</html>

—————————————————————————————————-

另外一个页面代码:

———————————————————————————————————————

<!DOCTYPE HTML>
<html>
<head>
<title>跨域通信的实例</title>
<meta charset=”UTF-8″>
<script type=”text/javascript”>
window.addEventListener(“message”,function(ev){//这是监听整个浏览器窗口
if(ev.origin!=”http://localhost”){//获取指定的域名的数据,这是需要时域名加端口号
return;//不是则返回
}
document.body.innerHTML=”这是娱嘎嘎三稳的一个测试,这是从”+ev.origin+”那里传来的”+ev.data;
//这个是在自己的body里面输出信息,待会儿在框里面显示
ev.source.postMessage(“你好,我已经收到你传来的信息了”,ev.origin);
//ev.source就是数据的来源地址,让后转发信息回去
},false);
</script>
</head>
<body>
</body>
</html>

————————————————————————————————————————

效果截图:

共有 0 条评论

Top