iframe子页面position的fixed

最新推荐文章于 2022-12-15 16:58:53 发布

香蕉猪

最新推荐文章于 2022-12-15 16:58:53 发布

阅读量1.7w

点赞数 3

分类专栏：前端文章标签：前端微信 iframe js position

本文链接：https://blog.csdn.net/gy127132060/article/details/50161947

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言：

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

<style>
	html,body,iframe{margin:0px;padding:0px;border:0px;width:100%;height:100%;}
</style>
<iframe src="demo.html" scrolling="No"></iframe>

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

<style>
.content{
<span style="white-space:pre">	</span>overflow:auto;//滚动条就靠它了
<span style="white-space:pre">	</span>width: 100%;
<span style="white-space:pre">	</span>position: absolute;
}
.bottom{
<span style="white-space:pre">	</span>position: fixed;
<span style="white-space:pre">	</span>bottom: 0px;
<span style="white-space:pre">	</span>width: 100%;
<span style="white-space:pre">	</span>height: 40px;
<span style="white-space:pre">	</span>line-height: 40px;
<span style="white-space:pre">	</span>text-align: center;
<span style="white-space:pre">	</span>background-color:#eee;
<span style="white-space:pre">	</span>color: #fff;
<span style="white-space:pre">	</span>font-size: 14px;
<span style="white-space:pre">	</span>z-index: 99;
}
</style>

<pre name="code" class="html"><body>
	<div class="content">
		<div>撑起高度的div</div>
		<div class="bottom">菜单</div>
	</div>
</body>

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

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

/**滚动条高**/
function getWindowScrollTop(win){
	var scrollTop=0; 
	if(win.document.documentElement&&win.document.documentElement.scrollTop){
		scrollTop=win.document.documentElement.scrollTop;
	}else if(win.document.body){ 
		scrollTop=win.document.body.scrollTop;}return scrollTop;
	}
	return scrollTop;
}
/**获取**/
function getWindowHeight(win){
	var clientHeight=0;
	if(win.document.body.clientHeight&&win.document.documentElement.clientHeight){
		clientHeight = (win.document.body.clientHeight<win.document.documentElement.clientHeight)?win.document.body.clientHeight:win.document.documentElement.clientHeight;
	}else{
		clientHeight = (win.document.body.clientHeight>win.document.documentElement.clientHeight)?win.document.body.clientHeight:win.document.documentElement.clientHeight;
	}
	return clientHeight;
}

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

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

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