Javascript中实现iframe跨域通信的例子

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

iframe不同子域通信

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

这样一来，两个页面就变成同域，那么就可以像同域下正常进行javascript调用了。
iframe完全跨域通信
iframe跨域通信，可以通过url后面加参数并编码等获取不同域下返回的信息，关于该方法的应用大家可以网上搜索下相关知识。而本文我会给大家介绍HTML5的postMessage跨域通信功能，结合实例，以下是在主域111com.net下的页面，我们在该页面上可以将消息发送到iframe不同域名m.111com.net下的页面，注意是完全不同的域名，而在被iframe嵌入的m.111com.net域下的页面可以接受到111com.net发来的消息。
 

window.postMessage是一个安全的实现直接跨域通信的方法，被大多数现代浏览器支持。在接收信息iframe窗口，需要设置一个事件处理函数addEventListener来接收发过来的消息。
 
function sendMessage(){ 
     // 通过 postMessage 向子窗口发送数据
     document.getElementById("ifr").contentWindow.postMessage( 
         document.getElementById("message").value, 
        "http://m.111com.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://m.111com.net

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