一道很难的前端开发面试题，请假高人解答（题目如下）：

用最简单的方法实现iframe双向通信

<iframe id="myIf" src="http;//aa.com/bb"></iframe>

7 个解决方案

#1

双向通信指的是？跨域了吗？

#2

html5 postmessage

#3

引用 2 楼 functionsub 的回复:

html5 postmessage

兼容性不太好，可以用两层iframe的方式，虽然麻烦点，但可以兼容到IE6

#4

父页面和子iframe通讯
每次在父页面中先删除已有子iframe，然后再创建iframe，然后把参数通过iframe的src属性传进去
子iframe和父页面通讯
跨域时：给个具体例子吧，怕说不明白
http://blog.csdn.net/ivyandrich/article/details/24372909
不跨域时，直接通过parent即可调用父级页面的内容

#5

各位大神我还有一个问题<div class="shang"><ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>
<div class="xia"><div class="one">sd</div><div class="two">sdsd</div><div class="three">sdsd</div><div class="four">sdsd</div></div>现在这些个one，two等等都是隐藏的，但是当鼠标移动到第一个li上one显示，移动到第二个li上two显示，移走就消失。。。怎么做到？ 

#6

引用 5 楼 u011554685 的回复:

各位大神我还有一个问题<div class="shang"><ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul></div>
<div class="xia"><div class="one">sd</div><div class="two">sdsd</div><div class="three">sdsd</div><div class="four">sdsd</div></div>现在这些个one，two等等都是隐藏的，但是当鼠标移动到第一个li上one显示，移动到第二个li上two显示，移走就消失。。。怎么做到？ 

$('.shang li').hover(function(){$('.xia div').eq($('.shang li').index(this)).show();},function(){$('.xia div').eq($('.shang li').index(this)).hide();})

#7

引用 4 楼 ivyandrich 的回复:

父页面和子iframe通讯
每次在父页面中先删除已有子iframe，然后再创建iframe，然后把参数通过iframe的src属性传进去
子iframe和父页面通讯
跨域时：给个具体例子吧，怕说不明白
http://blog.csdn.net/ivyandrich/article/details/24372909
不跨域时，直接通过parent即可调用父级页面的内容

说的太好了