iframe 自适应高度、父子页面传值、回调

总结一下最近用iframe遇到的问题与解决办法：

结构：主页面main.html，里面套用iframe。iframe不能出现滚动条，自适应子页面高度。内容多了滚动条是main.html页面的。

1.  主页面自适应iframe页面的高度

这个问题网上的大部分都是自适应静态iframe页面，而且代码较多，对于动态变化的iframe页面，解决的办法少。

我的解决办法很粗狂：获取iframe页面的高度，在设置父页面iframe标签的高度。兼容性我相信都没问题吧。

iframe页面：

setParentHeight()

function setParentHeight(){
    var nowHei=$('body').height();//获取当前页面高度
    parent.setIframeHeight(nowHei);//调用父页面设置高度函数
}

 主页面：记得设置iframe  scrolling="no"属性，这样iframe就没滚动条了。无边框是设置 frameborder="0"

//设置iframe高度
function setIframeHeight(hei){
    $('#m-iframe').height(hei)；//m-iframe是ifram的id
}

 （1） 这样的处理方式很简单，缺点就是iframe页面高度动态变化的时候，比如加载更多，这时还是需要调用  setParentHeight  函数来再次设置父页面iframe标签的高度。

 

2. 主页面与iframe页面传值和回调。

（1） 主页面调用iframe页面的函数： 假如iframe页面有个add函数：

$('#m-iframe')[0].contentWindow.add();

 　   （a） 主页面调用iframe都是通过contentWindow来调用iframe页面的window对象。

　　（b） 传值就直接传在调用的函数里面。

（2） iframe页面调用主页面函数。

　　 （a） 就如上面的设置高度一样，通过 parent 就能获取到主页面的window对象。

      （b） 传值就直接传在调用的函数里面。

（3）回调。 iframe调用父页面函数，父页面响应之后返回回调的值。例子：

//主页面：
var childCallback=null;
$('.box').on('click',function(){
    childCallback(1)
})
function show(callback){
   if(callback && typeof callback ==='function'){
         childCallback=callback;
    }      
}

//iframe页面：
parent.show(function(statu){
    console.log(statu); 
})

 　　（a）当iframe调用，主页面click事件响应之后，iframe页面就会返回回调的值。

　　   （b） 或者是不用定义变量，直接在调用的函数里面绑定点击事件再回调，不过要注意先取消绑定再绑定，不然会多次触发

 

3.  iframe的弹窗蒙层需要铺满主页面整个页面。例如：

（1） 我推荐的一种方式就是整个弹窗的内容放到主页面里面，iframe只提供触发显示的js就行了。

（2） 网上有些说iframe标签设置absolute和z-index也能达到iframe页面弹窗在主页面之上。我试过，不是不行，iframe页面里的有些内容也会出现在主页面之上。有时候会导致一些问题。

（3） iframe页面对于怎么响应并回调在主页面里面的弹窗，我第二点已经说明了。我认为弹窗放到主页面这样的处理方式比较好。

 

4.iframe更改了src之后，不出现后退或者前进按钮

要实现这种情况，就只有每次更改的时候，就新建一个iframe元素并替换原来的iframe，这样浏览器就不会产生history，后退和前进按钮就不会激活了

 

 

建议前台页面最好少用iframe来引入页面。但是qq邮箱就是用的iframe，为什么我就想不通了。