iframe子页面position的fixed

Posted wangxuanyou

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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. 

  2. function getWindowScrollTop(win){  
    3. 

  3.     var scrollTop=0;   
    4. 

  4.     if(win.document.documentElement&&win.document.documentElement.scrollTop){  
    5. 

  5.         scrollTop=win.document.documentElement.scrollTop;  
    6. 

  6.     }else if(win.document.body){   
    7. 

  7.         scrollTop=win.document.body.scrollTop;}return scrollTop;  
    8. 

  8.     }  
    9. 

  9.     return scrollTop;  
    10. 

  10. }  
    11. 

  11. /**获取**/  
    12. 

  12. function getWindowHeight(win){  
    13. 

  13.     var clientHeight=0;  
    14. 

  14.     if(win.document.body.clientHeight&&win.document.documentElement.clientHeight){  
    15. 

  15.         clientHeight = (win.document.body.clientHeight<win.document.documentElement.clientHeight)?win.document.body.clientHeight:win.document.documentElement.clientHeight;  
    16. 

  16.     }else{  
    17. 

  17.         clientHeight = (win.document.body.clientHeight>win.document.documentElement.clientHeight)?win.document.body.clientHeight:win.document.documentElement.clientHeight;  
    18. 

  18.     }  
    19. 

  19.     return clientHeight;  
    20. 

  20. }  
    21. 









 


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


 






[javascript] view plain copy

 

 print?




    

  1. $(function(){  
    2. 

  2.     var H = parseInt(getWindowHeight(top))+parseInt(getWindowScrollTop(top)) - 40;//此处的40是class为bottom的div元素高  
    3. 

  3.     $(".content").css("height",H + "px");  
    4. 

  4. });  
    5. 




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



以上是关于iframe子页面position的fixed的主要内容，如果未能解决你的问题，请参考以下文章
 

 css里面的position:fixed在iframe里面无效


 iframe 子页面获取父页面的元素并且控制样式


 iframe中的模态框遮罩父窗口原理


 怎么让设置fixed层里的内容跟随滚动条滚动


 子元素使用position：fixed,导致他的宽度不能和父元素保持一致的解决方案


 chrome 下 position：fixed失效（react）