众所周知，由于前端javascript对跨域访问做了安全限制，javascript只能访问与包含它的文档在同一域下的内容。而实际编码时我们会遇到使用iframe跨域访问、Ajax跨域通信等操作，这个时候如何突破跨域操作的问题，本文将结合实例讲述解决方案。
iframe不同子域通信
在同一主域不同子域如何进行Javascript调用？这个问题好解决，例如现有主域xuebuyuan.com和子域abc.xuebuyuan.com，在xuebuyuan.com有一个页面嵌入iframe的指向了abc.xuebuyuan.com下的某个页面，iframe页面需要访问xuebuyuan.com这个页面的js函数代码，那么解决办法是：在两个页面顶部加上document.domain信息，如：
<script type="text/javascript">
document.domain = "xuebuyuan.com";
</script>
这样一来，两个页面就变成同域，那么就可以像同域下正常进行javascript调用了。
iframe完全跨域通信
iframe跨域通信，可以通过url后面加参数并编码等获取不同域下返回的信息，关于该方法的应用大家可以网上搜索下相关知识。而本文我会给大家介绍HTML5的postMessage跨域通信功能，结合实例，以下是在主域xuebuyuan.com下的页面，我们在该页面上可以将消息发送到iframe不同域名demo.xuebuyuan.com下的页面，注意是完全不同的域名，而在被iframe嵌入的demo.xuebuyuan.com域下的页面可以接受到xuebuyuan.com发来的消息。
<p class="demo">
<input type="text" id="message" value="Helloweba欢迎您！"> <button onclick="sendMessage()">向子窗口发数据</button>
<p id="msg"></p>
<br/>
<iframe id="ifr" src="http://demo.xuebuyuan.com/demo/iframe.html"></iframe>
</p>
window.postMessage是一个安全的实现直接跨域通信的方法，被大多数现代浏览器支持。在接收信息iframe窗口，需要设置一个事件处理函数addEventListener来接收发过来的消息。
function sendMessage(){
// 通过 postMessage 向子窗口发送数据
document.getElementById("ifr").contentWindow.postMessage(
document.getElementById("message").value,
"http://demo.xuebuyuan.com"
);
}
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.xuebuyuan.com
出于安全性考虑，使用window.postMessage，必需要使用消息的origin和source属性来验证发送者的身份，否则会造成XSS漏洞。window.postMessage跨域功能非常强大，并且使用简单，效率高。
以上就上有关iframe跨域通信的全部内容，学步园全面介绍编程技术、操作系统、数据库、web前端技术等内容。