首页 > 代码库 > iframe子页面position的fixed

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=http://www.mamicode.com/"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,底部的菜单定位问题都得到了完美解决。代码简单好用,博主表示很开心技术分享

iframe子页面position的fixed