这是想要的效果:

样式设置是iframe外面的宽度为100%,iframe的宽度为父元素的90%,高度为宽度 除以1.6,固定比例,

正常显示就是上面的样子,但是,问题出现在iphone特定手机特定版本的safari浏览器上,在它上面会出现:

这样的情况。检查了一下,发现原因了:

在iframe里面的页面没加载出来之前,iframe的宽和高是正常的,当里面的页面加载完了之后,宽度就会发生变化,当然,

高度也相应改变。父页面中显示出来的iframe宽和高其实是子页面的真实宽高!也就是说子页面的宽高没有收到CSS跟JS

的限制(js有改变width的值)。

后来谷歌了一下,找到了解决方法,特来记下:

1:<iframe src="" frameborder="0" id="pptFrame" scrolling="no"></iframe>,

在iframe标签中,加上scrolling强制没有滚动条

2:采用width: 1px !important,用最高的权限改变iframe的宽(如果不用这个,子页面元素的宽会将iframe撑开);

如果再需要改变iframe的宽,可以选择min-width,或者使用width:XXpx !important

iframe在iphone6 plus的safari下子页面的宽度不受父页面控制的bug的更多相关文章

  1. iphone在iframe页面的宽度不受父页面影响,避免撑开页面

    工作中有个需求,就是产品页面通过iframe引用显示产品协议页,要求不要横向滑动,只需要竖向滑动,但在iphone中引用的iframe会撑开父页的宽度,而在android端浏览器这不会. <di ...

  2. js 两个页面的传值 可以用父页面 子页面做

    js  两个页面的传值  可以用父页面 子页面做 比如弹窗  将值传到子页面的时候  用get超长

  3. Jbox 弹出窗口 子页面操作完成后关闭 父页面刷新

    父页面js //父页面js <script> var isFreshFlag = '1'; //添加会议活动 function addMeetingAct(){ var attendVip ...

  4. HTML子页面保存关闭并刷新父页面

    1.思路是子页面保存后,后台传递成功的js到前台. 2.js的原理是——子页面调用父页面的刷新 子页面 function Refresh() {            window.parent.Re ...

  5. layer.open({}) 子页面传参并调用父页面的方法

    闲话少说先看效果!!! 说明适用场景:在a.jsp页面,点击查看一个文件,layer.open弹出b.jsp页面,在b.jsp页面可以修改文件的名称(其实是去改了数据库),但是关闭弹窗的后,要求不刷新 ...

  6. javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,

    javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...

  7. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

  8. IFrame父页面和子页面的交互

    现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...

  9. iframe交互(一)父页面自动高度

    //父页面源码 <body style="border:1px solid red;width:200px;height:500px;" onload="IFram ...

随机推荐

  1. Android课程---远程服务器存储

    在使用Volley进行获取数据时,需要事先准备环境:在libs里面导入一个Volley.jar包,在网上都有,可以下载下来导入,或者自己电脑上有DT的,自己合成一个包也行. WebActivity.j ...

  2. js 获取浏览器高度和宽度值(多浏览器)(转)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  3. IOS网络第六天 ASI (略)

    **** 02-ASI01-基本使用(了解) 03-ASI02-其他用法(了解) 04-ASI03-POST请求(了解) 05-ASI04-文件下载(了解) 06-ASI05-文件上传(了解) 07- ...

  4. PostgreSQL配置优化

    硬件和系统配置 操作系统 Ubuntu13.04 系统位数 64 CPU Intel(R) Core(TM)2 Duo CPU 内存 4G 硬盘 Seagate ST2000DM001-1CH164 ...

  5. 简单明了区分escape、encodeURI和encodeURIComponent

    一.前言 讲这3个方法区别的文章太多了,但是大部分写的都很绕.本文试图从实践角度去讲这3个方法. 二.escape和它们不是同一类 简单来说,escape是对字符串(string)进行编码(而另外两种 ...

  6. LibSVM for Python 使用

    经历手写SVM的惨烈教训(还是太年轻)之后,我决定使用工具箱/第三方库 Python libsvm的GitHub仓库 LibSVM是开源的SVM实现,支持C, C++, Java,Python , R ...

  7. imagepool前端图片加载管理器(JavaScript图片连接池)

    前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片 ...

  8. 分享一个css3写的气泡对话框,适合于即时通讯和留言本的动态内容

    效果预览: css code .message_content{width:100%;margin-top:10px;clear:both;float:left;} .face{float:left; ...

  9. Linux学习之Exam系统发布

    配置时间:2015年11月27日 配置人:撰写人:微冷的雨   Happy 01.Linux安装图 欢迎页面 桌面 02.Linux命令之文件目录操作 给北大青鸟五道口校区创建三个机房(L4,L5,L ...

  10. CSS效果集锦(持续更新中)

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...