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加载页面
- <style>
- html,body,iframe{margin:0px;padding:0px;border:0px;width:100%;height:100%;}
- #navbar{background:url(http://www.yxccc.com/logo.png) no-repeat left center;}
- </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,底部的菜单定位问题都得到了完美解决。代码简单好用,博主表示很开心
iframe子页面position的fixed的更多相关文章
- 获取iframe子页面内容高度给iframe动态设置高度
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta nam ...
- 父子页面之间元素相互操作(iframe子页面)
js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...
- js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- Js动态获取iframe子页面的高度////////////////////////zzzz
Js动态获取iframe子页面的高度 Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...
- jquery读取iframe子页面和父页面的处理
1. jquery 在iframe子页面获取父页面元素代码如下: $("#objid", parent.document) 2. jquery在父页面 获取iframe子页面的元素 ...
- iframe子页面调用父页面javascript函数的方法
1.iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.parent就可以了.比如调用a()函数,就写成: window.parent.a(); 2.iframe父页面 ...
- js 在iframe子页面获取父页面元素,或在父页面 获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
- CRM 2016 IFrame 子页面执行 父页面函数
CRM 中定义以下函数: windows.parent.functionname(){ //do somethion } IFrame 子页面调用 JS: windows.parent.functio ...
- iframe父页面获取iframe子页面的元素 与 iframe子页面获取父页面元素
一.在iframe子页面获取父页面元素代码如下:$('#objld', parent.document); 二.在父页面获取iframe子页面的元素代码如下:$("#objid", ...
随机推荐
- git checkout -b
创建分支: $ git branch mybranch切换分支: $ git checkout mybranch创建并切换分支: $ git checkout -b mybranch 更新master ...
- nginx学习要点记录
IO多路复用: 1.轻量 2.cpu亲和性:把CPU核心和nginx工作进程绑定,把每个worker进程固定在一个CPU上执行,减少切换cpu的cache miss,获得更好的性能 3.IO多路复用e ...
- PAT乙级1005
1005 继续(3n+1)猜想 (25 分) 卡拉兹(Callatz)猜想已经在1001中给出了描述.在这个题目里,情况稍微有些复杂. 当我们验证卡拉兹猜想的时候,为了避免重复计算,可以记录下递推过程 ...
- C#只能lock 引用类型的值 (转载)
Lock: C#只能lock 引用类型的值,如果lock一个int, bool,编译器会报错. 当一个互斥锁已被占用时,在同一线程中执行的代码仍可以获取和释放该锁.但是,在其他线程 ...
- Angular7教程-01-Angular开发环境配置
本教程基于angular7(2018-11-04) 1. 安装node.js 下载地址: http://nodejs.cn/download/ 下载对应自己操作系统的版本安装即可. 2.安装 angu ...
- Hadoop(16)-MapReduce框架原理-自定义FileInputFormat
1. 需求 将多个小文件合并成一个SequenceFile文件(SequenceFile文件是Hadoop用来存储二进制形式的key-value对的文件格式),SequenceFile里面存储着多个文 ...
- ES6的Module系统
http://es6.ruanyifeng.com/#docs/module Module 的语法 概述 严格模式 export 命令 import 命令 模块的整体加载 export default ...
- 洛谷 P1306 斐波那契公约数
洛谷 P1306 斐波那契公约数 题目描述 对于Fibonacci数列:1,1,2,3,5,8,13......大家应该很熟悉吧~~~但是现在有一个很“简单”问题:第n项和第m项的最大公约数是多少? ...
- RTTI(运行时类型识别)
C++为了能够在运行时正确判断一个对象确切的类型,加入了RTTI和type_info. type_info 为每一个类型增加一个type_info对象. 为了能够在运行时获得对象的类型信息type_i ...
- lemon批量蒯
RT,很久以前写的拿出来骗一骗访问量 把sh文件扔进source里面运行sh *.sh 从子目录蒯出来: #!/bin/bash for file in ./*/*/*.cpp do name=${f ...