总结一下最近用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,为什么我就想不通了。