前言：

首先说一说我昨天天的苦逼经历。中午吃饭时一同事跟我说，他做的项目嵌套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加载页面

  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

  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>
  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方法了




  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. }










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




  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. });




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


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

    
								
  1. 获取iframe子页面内容高度给iframe动态设置高度
		
    <!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...
    
		
    2. 
						
  2. 父子页面之间元素相互操作(iframe子页面)
		
    js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function()  ...
    
		
    3. 
						
  3. js之iframe子页面与父页面通信
		
    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
    
		
    4. 
						
  4. Js动态获取iframe子页面的高度////////////////////////zzzz
		
    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
    
		
    5. 
						
  5. jquery读取iframe子页面和父页面的处理
		
    1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...
    
		
    6. 
						
  6. iframe子页面调用父页面javascript函数的方法
		
    1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
    
		
    7. 
						
  7. js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式
		
    用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码  ...
    
		
    8. 
						
  8. CRM 2016 IFrame 子页面执行 父页面函数
		
    CRM 中定义以下函数: windows.parent.functionname(){ //do somethion } IFrame 子页面调用 JS: windows.parent.functio ...
    
		
    9. 
						
  9. iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素
		
    一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. SSM框架之RestFul示例
			
    演示环境:maven+Spring+SpringMVC+MyBatis Plus或MyBatis都行+JDK8 JDK7我想应该没有问题,原因是用的基本都是JDK6或者JDK7的相关特性. 当然了,J ...
    
			
    2. 
						
  2. 输入一批考生的的准考证号码，如果是 15 位，表示输入正确，否则重新输入。然后判断这个人的考试类别（号码中如果是以奇数结尾则考试类别为“A 类”，否则为“B 类”），最后输出此准考证的前 5 位和后 4 位，其他位用“*”来代替。说明：使用 StringBuffer 类的相关方法完成实验内容。
			
    因为是一批考生,所以先创建一个字符数组存放一组准考证号. 此外这个程序涉及到包装类与基本数据类型的互相转换. string的substring方法,返回一个字符串是该字符串的子串.从第一个参数开始,第 ...
    
			
    3. 
						
  3. P1004 方格取数
			
    题目描述 设有N*N的方格图(N<=9),我们将其中的某些方格中填入正整数,而其他的方格中则放 人数字0.如下图所示(见样例): A 0 0 0 0 0 0 0 0 0 0 13 0 0 6 0 ...
    
			
    4. 
						
  4. P1474 货币系统 Money Systems
			
    题目描述 母牛们不但创建了它们自己的政府而且选择了建立了自己的货币系统.由于它们特殊的思考方式,它们对货币的数值感到好奇. 传统地,一个货币系统是由1,5,10,20 或 25,50, 和 100的单 ...
    
			
    5. 
						
  5. K2 4.7 升级 数据库排序规则更改
			
    介绍 在过去,K2没有指定安装过程中要在其数据库上使用的标准排序规则.然而,现在K2引入了标准排序规则,以便在之后使用(如果我没有错的话,它是在4.7). 因此, 问题出现在数据库的排序规则不是Lat ...
    
			
    6. 
						
  6. Linux Shell常用技巧(七)
			
    十六. 文件查找命令find: 下面给出find命令的主要应用示例:    /> ls -l     #列出当前目录下所包含的测试文件    -rw-r--r--. 1 root root 48 ...
    
			
    7. 
						
  7. Animate.css介绍
			
    Animate.css简介 animate.css 动画库,预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut).淡入淡出 ...
    
			
    8. 
						
  8. 名字&值
			
    1)名字VS值 名字和内存(存储)位置相关联. 名字—(环境)———>位置——(状态)——>值 这两个映射都在随着程序的运行而改变. 2)环境VS状态 环境是指一个名字到存储位置映射,也可 ...
    
			
    9. 
						
  9. jQuery Nestable2 使用总结
			
    最近,因为公司的一个新项目,用了一个基于bootstrap二次改造的国外友人的框架.感觉很一般吧,要求更换框架,客户拒绝.只能搞这个,发现里面一个jQuery插件-[Nestable]但是源作者长时间 ...
    
			
    10. 
						
  10. SAP查找用户的登录记录
			
    1.可以使用USR02中有个上次登陆日期和登陆时间. 2.用SE38跑下RSUSR200,输入用户名即可查询上次登陆日期 3.SU10可以查到
    
			
    11.