前端跨域html5方法

同源策略：

所谓同源策略，指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。比如源a的js不能读取或设置引入的源b的元素属性。那么先定义下什么是同源，所谓同源，就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。

同源策略限制的不同源之间的交互主要针对的是js中的XMLHttpRequest等请求，下面这些情况是完全不受同源策略限制的。

页面中的链接，重定向以及表单提交是不会受到同源策略限制的。链接就不用说了，导航网站上的链接都是链接到其他站点的。而你在域名www.foo.com下面提交一个表单到www.bar.com是完全可以的。

跨域资源嵌入是允许的，当然，浏览器限制了Javascript不能读写加载的内容。如前面提到的嵌入的<script src="..."></script>，<img>，<link>，<iframe>等。

跨域：

受浏览器同源策略的限制，本域的js不能操作其他域的页面对象（比如DOM）。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。所以我们要通过一些方法使本域的js能够操作其他域的页面对象或者使其他域的js能操作本域的页面对象（iframe之间）。

这里需要明确的一点是：所谓的域跟js的存放服务器没有关系，比如baidu.com的页面加载了google.com的js，那么此js的所在域是baidu.com而不是google.com。也就是说，此时该js能操作baidu.com的页面对象，而不能操作google.com的页面对象。

html5跨域：

这个功能主要包括接受信息的"message"事件和发送消息的"postMessage"方法。比如baidu.com域的A页面通过iframe嵌入了一个google.com域的B页面，可以通过以下方法实现A和B的通信

A页面通过postMessage方法发送消息：

[html]  view plain  copy

 print ?

1. window.onload = function() {  
2.     var ifr = document.getElementById('ifr');  
3.     var targetOrigin = "http://www.google.com";  
4.     ifr.contentWindow.postMessage('hello world!', targetOrigin);  
5. };  

postMessage的使用方法：

otherWindow.postMessage(message, targetOrigin);

otherWindow:   指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口

message:   是要发送的消息，类型为 String、Object (IE8、9 不支持)

targetOrigin:  是限定消息接收范围，不限制请使用 '*'

B页面通过message事件监听并接受消息:

[html]  view plain  copy

 print ?

1. var onmessage = function (event) {  
2.   var data = event.data;//消息  
3.   var origin = event.origin;//消息来源地址  
4.   var source = event.source;//源Window对象  
5.   if(origin=="http://www.baidu.com"){  
6.   console.log(data);//hello world!  
7.   }  
8. };  
9. if (typeof window.addEventListener != 'undefined') {  
10.   window.addEventListener('message', onmessage, false);  
11. } else if (typeof window.attachEvent != 'undefined') {  
12.   //for ie  
13.   window.attachEvent('onmessage', onmessage);  
14. }  

同理，也可以B页面发送消息，然后A页面监听并接受消息。