这是想要的效果：

样式设置是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. C# WinForm 导出导入Excel/Doc 完整实例教程[使用Aspose.Cells.dll]

    [csharp] view plain copy 1.添加引用: Aspose.Cells.dll(我们就叫工具包吧,可以从网上下载.关于它的操作我在“Aspose.Cells操作说明 中文版 下载 ...

  2. wampserver解决“不能切换在线”及运行“404问题”

    初次安装使用wampserver2.2,由于各个电脑安装的应用或是电脑型号不一样会出现以下问题: 1.安装后,不能出切换“服务器在线”或是“服务器离线” 2.设置站点后,运行编写好的代码出现404错误 ...

  3. 基于zookeeper实现统一资源管理

    分布式系统中经常涉及到配置资源的管理,比如,一个应用系统需要部署在多台服务器上,但是他们拥有某些的配置项是相同的,如果配置变更,需要修改这些配置,那么需要同时修改每台服务器,这样做比较麻烦而且容易出错 ...

  4. Hadoop学习笔记—17.Hive框架学习

    一.Hive:一个牛逼的数据仓库 1.1 神马是Hive? Hive 是建立在 Hadoop 基础上的数据仓库基础构架.它提供了一系列的工具,可以用来进行数据提取转化加载(ETL),这是一种可以存储. ...

  5. Google分布式构建软件之三：分布式执行构建步骤

    注:本文英文原文在google开发者工具组的博客上[需要FQ],以下是我的翻译,欢迎转载,但请尊重作者版权,注名原文地址. 之前两篇文章分别介绍了Google 分布式软件构建系统Blaze相关的为了提 ...

  6. percona5.7 源码安装

    200 ? "200px" : this.width)!important;} --> 介绍 主要为了测试percona的线程池的性能,这里就简单介绍一下percona5.7 ...

  7. sublime text2 安装less2css插件

    之前一直用PhpStorm,功能十分强大,各种插件也有,不过比较占内存,有时候,左边的项目列表都刷不出来,今天又出现了这个问题,于是果断换sublime了. 由于项目中要用less编译,所以得装个le ...

  8. 每天一个linux命令（18）：locate 命令

    locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了.在一般的 di ...

  9. css绝对定位如何在不同分辨率下的电脑正常显示定位位置？

    有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用. 首先要明白如下几个原理: 1.笔记本电脑的分辨率一般为1 ...

  10. iOS点击状态栏回到顶部底层实现原理

    在iOS开发中,苹果其实已经帮你实现了点击状态栏回到顶部这个功能,但我们在开发中会遇到点击不能回到顶部.其实这都和 ScrollView中的一个属性scrollsToTop有关,我们先看看苹果关于这个 ...