iframe跨域、同域 – 随身笔记

在同域的情况下

 // $($("#iframepage")[0].contentDocument).find('body') 从父页获取到iframe 里面的body元素
 // $(document.frames["iframepage"].document.body) 从父获取到iframe 里面的body元素 //兼容IE7
 
 // $(window.parent.document.body) //从子iframe里面获取到 父元素内容（代码要写在iframe加载的页面中）
 // window.parent.papa() //从子iframe里面调用父的方法 papa();

跨域情况下

以下方法兼容IE8

1,父页面传值给iframe下的子页面。

父页面：

<script src="iframe/js/jquery-1.8.3.min.js"></script>
<script src="cross.js"></script>

<script>
 $(function(){
   var ifw = $("#ifr")[0].contentWindow;
   $('button').click(function(){
      Cross.call(ifw,"https://sdeno.com/wp-content/uploads/2016/06/cross_iframe/b.html","test",{
         t: $("#txt").val()
      });
   });
 });
</script>

输入要传递的值：<input id="txt" type="text"/> 
               <button>回调</button>

<iframe id="ifr" src="https://sdeno.com/wp-content/uploads/2016/06/cross_iframe/b.html"></iframe>

子页面：

<script src="https://sdeno.com/jquery-1.8.3.min.js"></script>
<script src="https://sdeno.com/cross.js"></script>

 //对外公开一个接口命名为test
<script>
$(function(){
    Cross.on("test", function(data){
      $('input').val(data.t);
    });
});
</script>
<input type="text" placeholder="等待父页面传值过来">

cross.js

http://pan.baidu.com/s/1gedVafx

案例下载：cross_iframe.rar

2，父页面获取子页面的数据

实现技巧就是利用一个代理iframe，它嵌入到子页面中，并且和父页面必须保持是同域，然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe，然后由于代理的iframe和主页面是同域的，所以主页面就可以利用同域的方式获取到这些数据。使用 window.top或者window.parent.parent获取浏览器最顶层window对象的引用。

http://www.jb51.net/article/49809.htm