iframe子页面position的fixed

前言:

首先说一说我昨天天的苦逼经历。中午吃饭时一同事跟我说,他做的项目嵌套iframe后,子页面的position设置fixed失效了。

经过反复询问,得知他用了两层iframe,再加上最外的父页面,一共就是三层。

下午就其iframe子页面固定定位问题进行处理,上网找了各种解决方案:插件、js模拟等效果均不理想。页面不是代码过多就是效果卡顿、跳动(附:博主的同事架构的页面是用于手机微信端,部分PC端的优秀代码并不适用,非代码不行)。无奈之下只得另想出路,最终功能完美实现,现拿出来与大家共享。

BUG:

现有父页面A,子页面B,B页面制作了一个底部菜单,设置position:fixed;bottion:0;单独打开子页面B,底部菜单始终定位底部,不随页面滚动条滚动。在父页面A中,采用iframe映入页面B,google浏览器打开父页面A,菜单可以定位底部;google浏览器手机调试模式打开父页面A,菜单可以定位底部Android手机微信打开父页面A,菜单可以定位底部;iPhone手机微信打开父页面A,菜单未定位在页面底部,而是始终位于B页面内容的末尾

看到这,博主心都碎了,平时比垃圾还垃圾的Android,今天这么给力,倒是平时牛皮哄哄的iPhone,今天使出了这么大一个绊子。没办法,应下来的事,还要想办法改呀……

iframe原理:

我们首先准备一枝笔及一张A4白纸,这只笔就好比我们的父页面,白纸好比子页面。固定住笔并将白纸放于笔下,来回拖动白纸。无论我们怎么拖动,白纸的高度始终都是A4纸张的高度。所以,相对底部的菜单,就永远在子页面的底部。

那么,,,如果我们把A4白纸卷起来呢?这时子页面的高度就不再是A4白纸的高度了,由于底部菜单是定位在子页面的相对底部,这时底部菜单就位于了A4白纸折叠后高度的最底。

那么,所谓的卷起A4纸,其实就等于给子页面B一个新的高度,超出部分,用滚动条滚动显示。

解决方案:

知道了导致问题的原因,接下来就是解决了。

博主的小demo父页面很简单,就是最基本的iframe加载页面

[html] view plain copy

print?

  1. <style>
  2. html,body,iframe{margin:0px;padding:0px;border:0px;width:100%;height:100%;}
  3. #navbar{background:url(http://www.yxccc.com/logo.png) no-repeat left center;}
  4. </style>
  5. <iframe src="demo.html" scrolling="No"></iframe>

子页面被撑起的是一个class为bottom的div

[html] view plain copy

print?

  1. <style>
  2. .content{
  3. <span style="white-space:pre">    </span>overflow:auto;//滚动条就靠它了
  4. <span style="white-space:pre">    </span>width: 100%;
  5. <span style="white-space:pre">    </span>position: absolute;
  6. }
  7. .bottom{
  8. <span style="white-space:pre">    </span>position: fixed;
  9. <span style="white-space:pre">    </span>bottom: 0px;
  10. <span style="white-space:pre">    </span>width: 100%;
  11. <span style="white-space:pre">    </span>height: 40px;
  12. <span style="white-space:pre">    </span>line-height: 40px;
  13. <span style="white-space:pre">    </span>text-align: center;
  14. <span style="white-space:pre">    </span>background-color:#eee;
  15. <span style="white-space:pre">    </span>color: #fff;
  16. <span style="white-space:pre">    </span>font-size: 14px;
  17. <span style="white-space:pre">    </span>z-index: 99;
  18. }
  19. </style>

[html] view plain copy

print?

  1. <pre name="code" class="html"><body>
  2. <div class="content">
  3. <div>撑起高度的div</div>
  4. <div class="bottom">菜单</div>
  5. </div>
  6. </body>


撑起页面的代码,读者可自行添加

接下来就是两段很关键的js方法了

[html] view plain copy

print?

  1. /**滚动条高**/
  2. function getWindowScrollTop(win){
  3. var scrollTop=0;
  4. if(win.document.documentElement&&win.document.documentElement.scrollTop){
  5. scrollTop=win.document.documentElement.scrollTop;
  6. }else if(win.document.body){
  7. scrollTop=win.document.body.scrollTop;}return scrollTop;
  8. }
  9. return scrollTop;
  10. }
  11. /**获取**/
  12. function getWindowHeight(win){
  13. var clientHeight=0;
  14. if(win.document.body.clientHeight&&win.document.documentElement.clientHeight){
  15. clientHeight = (win.document.body.clientHeight<win.document.documentElement.clientHeight)?win.document.body.clientHeight:win.document.documentElement.clientHeight;
  16. }else{
  17. clientHeight = (win.document.body.clientHeight>win.document.documentElement.clientHeight)?win.document.body.clientHeight:win.document.documentElement.clientHeight;
  18. }
  19. return clientHeight;
  20. }



最后为子页面附上高度,,使其滚动条显露出来

[javascript] view plain copy

print?

  1. $(function(){
  2. var H = parseInt(getWindowHeight(top))+parseInt(getWindowScrollTop(top)) - 40;//此处的40是class为bottom的div元素高
  3. $(".content").css("height",H + "px");
  4. });

倒入jq插件,至此页面无论在iphone或android,底部的菜单定位问题都得到了完美解决。代码简单好用,博主表示很开心

时间: 2024-10-08 19:39:40

iframe子页面position的fixed的相关文章

在iframe子页面中添加导航功能代码

使用iframe嵌套页面,并在页面中添加导航功能,iframe只适应高度 效果图如下图 主页面 <div class="date_app" id="postRightContent" style="height: 725px; margin-bottom: 30px;"> <iframe id="rightIframePage" name="rightIframePage" scrolli

easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素       代码如下:       $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('# objId') 这样调用方法就不会报错 如: parent.$('# objId').tabs("add", { title: title, content: content, closabl

Js动态获取iframe子页面的高度总结

问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 给元素设置高度 这方法是用在父级页面里的,通过获取子级页面的高度给iframe设置高度 涉及了一些兼容问题: IE用attachEvent | 3C用onload来判断子页面是否加载完成. IE用contentWindow | 3C用contentDocument来获取子页面 IE用document.documentElement.scrollHeight(兼容ie6 ie7)|

转 easyUI的iframe子页面操作父页面元素

曾经试过这样的方法 在iframe子页面获取父页面元素      代码如下:      $('#objId', parent.document); 这样可以获得父页面的元素,但是调用EasyUI的方法的时候,就会报错. 郁闷了很久很久,最终找到方案,写法的区别,如下: parent.$('#objId') 这样调用方法就不会报错 如: parent.$('#objId').tabs("add", { title: title,      content: content,      c

js之iframe子页面与父页面通信

iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head> <scripttype="text/javascript"> function say(){ alert("parent.html"); } function callChild(){ myFrame.window.say(); myFrame.wi

iframe子页面内刷新父页面中另一个iframe子页面

框架页面如下: <div id="aa" style="float: left; height: 500px; border-right-style: solid; border-right-color: #CCCCFF; border-right-width: 2px;"> <IFRAME id="tree" name="tree" src="/ScienProjectWeb/commonjsp/

iframe子页面调用父页面javascript函数的方法

1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面调用 子页面js函数 这个就稍微复杂一些,下面的方法支持ie和firefox浏览器: document.getElementById('ifrtest').contentWindow.b();

父子页面之间元素相互操作(iframe子页面)

js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() { var oIframe = window.frames["oIframe"].document.getElementById("getFrame"); console.log(oIframe); } 注意:此处一定要加上window.onload或者DOMConte

JQuery调用iframe子页面函数/对象的方法例子

父页面有个ID为mainfrm.name为Iframe1的iframe,iframe连接b.html,该页面有个函数test 在父页面调用b.html的test方法为: $("#mainfrm")[0].contentWindow.test(); 或者 this.frames["Iframe1"].doQuery(); 在当前弹出的子页面中打开另一个打开页面中的函数,例如在弹出的edit.html页面中调用dataList.html页面中的函数test parent