转载

iframe跨域通信

众所周知，由于前端javascript对跨域访问做了安全限制，javascript只能访问与包含它的文档在同一域下的内容。而实际编码时我们会遇到使用iframe跨域访问、Ajax跨域通信等操作，这个时候如何突破跨域操作的问题，本文将结合实例讲述解决方案。

查看演示下载源码

iframe不同子域通信

在同一主域不同子域如何进行Javascript调用？这个问题好解决，例如现有主域helloweba.com和子域abc.helloweba.com，在helloweba.com有一个页面嵌入iframe的指向了abc.helloweba.com下的某个页面，iframe页面需要访问helloweba.com这个页面的js函数代码，那么解决办法是：在两个页面顶部加上document.domain信息，如：

 <script type="text/javascript">     document.domain = "helloweba.com"; </script>

这样一来，两个页面就变成同域，那么就可以像同域下正常进行javascript调用了。

iframe完全跨域通信

iframe跨域通信，可以通过url后面加参数并编码等获取不同域下返回的信息，关于该方法的应用大家可以网上搜索下相关知识。而本文我会给大家介绍HTML5的postMessage跨域通信功能，结合实例，以下是在主域helloweba.com下的页面，我们在该页面上可以将消息发送到iframe不同域名demo.helloweba.net下的页面，注意是完全不同的域名，而在被iframe嵌入的demo.helloweba.net域下的页面可以接受到helloweba.com发来的消息。

 <div class="demo">  <input type="text" id="message" value="Helloweba欢迎您！"> <button onclick="sendMessage()">向子窗口发数据</button>  <div id="msg"></div>  <br/>  <iframe id="ifr" src="http://demo.helloweba.net/demo/iframe.html"></iframe> </div>

window.postMessage是一个安全的实现直接跨域通信的方法，被大多数现代浏览器支持。在接收信息iframe窗口，需要设置一个事件处理函数addEventListener来接收发过来的消息。

 function sendMessage(){    // 通过 postMessage 向子窗口发送数据   document.getElementById("ifr").contentWindow.postMessage(     document.getElementById("message").value,    "http://demo.helloweba.net"     );     }  window.addEventListener('message', function(e){  if(e.source!=window.parent) return;  document.getElementById("msg").innerHTML+=e.data; }, false);

postMessage(data,origin)方法接受两个参数， data ：要传递的数据， origin ：字符串参数，指明目标窗口的源，如：http://demo.helloweba.net

出于安全性考虑，使用window.postMessage，必需要使用消息的origin和source属性来验证发送者的身份，否则会造成XSS漏洞。window.postMessage跨域功能非常强大，并且使用简单，效率高。

正文到此结束