如何使用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="net/demo/iframe.html"></iframe>
</div>

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

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

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

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

下载地址