以下是多种使用方法：
1、同域下嵌套：
父页面：

<iframe src="iframe2.html" id="iframe2" name="iframe2"></iframe>
window.onload=function(){//父页面修改iframevar docu=document.querySelector('#iframe2');docu.contentWindow.document.querySelector('#div1').innerHTML='div1'//根据name调用//iframe2.window.document.getElementById('div1').innerHTML='update'//调用子方法docu.contentWindow.child();
}
function fu(){console.log('父方法')
}

子页面：

<div id="div1"></div>
<script>//子改父用parent.documentwindow.parent.document.querySelector('#iframe2').style.backgroundColor='#ccc'//window.parnet.fun 调用父方法window.parent.fu();function child(){console.log('子方法')}
</script>

父页面调用子页面：

iframename.window.document.XX

iframename.window.function

idel.contentWindow.document.XX

idel.contentWindow.function

子调用父页面：

parent.document.XX

parent.function

2、跨域下hash传递值：

在页面如果只是修改了url的标签符页面是不会刷新的。

但会触发hashChange方法

可以利用这个来实现双方通信

父页面：

<input type="text" id="id_name">
<iframe id="iframe1" src="http://localhost:8032/2015_project/html5/iframe3.html">
</iframe>
<script >var url='http://localhost:8032/2015_project/html5/iframe3.html'//监听hash 变动//获取子修改了的url上的hash实现传递值window.addEventListener('hashchange',function(e){var m=location.hash;console.log(m);document.querySelector('#id_name').value=m.substr(1)})window.onload=function(){//获取iframe修改其url的hashvar iframe1=document.querySelector('#iframe1');iframe1.contentWindow.location.href=url+'#name_xiaoyun'}
</script>

子页面：

<button id="but1">修改hash传递值</button>
<script>var url='http://127.0.0.1:8020/2015_project/html5/iframebody2.html';//监听hash修改window.addEventListener('hashchange',function(){var m=location.hash;console.log(m);})var but1=document.querySelector('#but1');but1.addEventListener('click',function(){window.parent.location.href=url+'#name_star'})
</script>

父和子页面绑定onhashChange
通过location.hash来获取#XX

父页面修改url

idel.contentWindow.location.href=‘XX#XX’

子页面修改url

window.parent.location.href=‘Xx#xx’

3、子页面单方面传递值到父通过window.name 或#has

window.name属性它不论同源，只要在同一窗口，前页面修改了name，后加载的页面是可以访问到的。

可以利用这点在b.com页面下设置name然后跳转到a.com b的页面。

此页面获取到name再调用父页面也就是a.com a的方法了。

或者a页面监听firame的Load事件然后获取name

其实b.com页面可以通过url把值传递给a.com b。

<iframe id="iframe1" src="http://localhost:8032/2015_project/html5/iframe4.html">
</iframe>
<script >var iframe1=document.querySelector('#iframe1');iframe1.onload=function(){var name=iframe1.contentWindow.name;console.log(name)}function fn(name){console.log('父方法',name)}
</script>

b.com

<button id="but1">传递值</button>
<script>var url='http://127.0.0.1:8020/2015_project/html5/iframe5.html';var but1=document.querySelector('#but1');but1.addEventListener('click',function(){window.name="name=star";location.href=url+'#hashname';})window.onload=function(){console.log(window.name)}
</script>

a.com b:

<script>window.onload=function(){console.log(window.name)console.log(location.hash)window.parent.fn(location.hash)}</script>

以上这些取巧的方法以前是经常用的。
现在有了html5，有了新的办法：

4、postMessage

为window增加了postMessage(),允许跨域通信

其参数1：发送的内容，参数2是接收消息的窗口的源，也就是url，当然也可以用*.向所有窗口发送

子窗口向父窗口也类似：

opener.postMessage(‘xx’,‘url’)

opener 属性返回创建此窗口的window对象引用

父子窗口通过监听message来获取值

event.source 发送消息窗口

event.origin:消息发向的窗口

event.data消息内容

source 可判断发送源url,进行过滤

父页面：

<div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;"><div id="color">Frame Color</div></div><div><iframe id="child" src="http://localhost:8038/html5/message2.html"></iframe></div><script type="text/javascript">window.onload=function(){//postmessage(参数,子页面域名)document.querySelector("#child").contentWindow.postMessage('getcolor','http://localhost:8038');}window.addEventListener('message',function(e){console.log(e);var color=e.data;document.getElementById('color').style.backgroundColor=color;},false);</script>

子页面：

<div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">click to change color
</div>
<script type="text/javascript">var container=document.getElementById('container');window.addEventListener('message',function(e){console.log(e);if(e.source!=window.parent) return;var color=container.style.backgroundColor;window.parent.postMessage(color,'*');},false);function changeColor () {            var color=container.style.backgroundColor;if(color=='rgb(204, 102, 0)'){color='rgb(204, 204, 0)';}else{color='rgb(204,102,0)';}container.style.backgroundColor=color;window.parent.postMessage(color,'*');}
</script>

还有一种跨域写法：

a.com 上的a页面嵌套了b.com 上的b页面。b需要和a通信。

b页面上又嵌套 了a.com 上的c页面。

b页面不直接和a页面通信，b修改c url 的hash。

c监听onhashChange获取值。

由c和a页面通信，因为c和a是在同域下的。

c可以用parent.parent.fn() 来向a传递值。

因为是三层嵌套所以要两次parent.

通过iframe实现post 提交。

以前在post提交时form 时不想跳转页面，就有一利用target 提交到iframe

iframe来接收信息。

如果想父页面知道接收信息，可以在服务器返回时输出script

window.parent.fn(xx) 调用父级方法把信息传递。

作者：starwmx520
来源：CSDN
原文：https://blog.csdn.net/starwmx520/article/details/51595085
版权声明：本文为博主原创文章，转载请附上博文链接！