这是想要的效果:

样式设置是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. angularjs 自定义服务的三种方式

    angularjs 中可通过三种($provider,$factory,$service)方式自定义服务,以下是不同的实现形式: // 定义module , module中注入$providevar ...

  2. 基于OWin的Web服务器Katana发布版本3

    当 ASP.NET 首次在 2002 年发布时,时代有所不同. 那时,Internet 仍处于起步阶段,大约有 5.69 亿用户,每个用户平均每天访问 Internet 的时间为 46 分钟,大约有 ...

  3. 采访Philipp Crocoll:安卓平台上整合Java和C#

    在这个采访中,我们跟开源开发者Philipp Crocoll讨论了关于Keepass2Android的相关话题.Keepass2Android不仅具有强大的密码存储的功能,还是在一个单独的安卓应用同时 ...

  4. Microsoft .NET Framework 4.0.3版下载

    适用于 Microsoft .NET Framework 4 的更新 4.0.3,其中包含一系列新增功能,用于满足高端客户的功能需求和重要 .NET Framework 方案的需求. http://w ...

  5. 浅谈WEB安全性(前端向)

    相信进来的时候你已经看到alert弹窗,显示的是你cookie信息(为配合博客园要求已删除).单纯地在你的客户端弹出信息只是类似于迫使你在自己的房间脱衣服——没人看得到,自然也不算啥恶意行为.那么如果 ...

  6. NoSQL初探之人人都爱Redis:(4)Redis主从复制架构初步探索

    一.主从复制架构简介 通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一 ...

  7. Some warning were found during validation

    前几天做一个iOS下的App更新,到上传的时候出了问题,一直传了大半个小时,结果还是没传完,再试依然不行,于是只好关机,把电脑带回家弄. 回家后出现了更奇怪的事,经过漫长等待后,竟然出现这个提示: 我 ...

  8. MySQL 忘记root密码解决办法

    标签:root密码不为空 概述 很多时候mysql安装完root用户的默认密码不为空,这时候就需要通过其它办法登入到mysql重置密码. 步骤 方法1:查看/root/.mysql_secret文件 ...

  9. Step by step 如何创建一个新森林

    原创地址:http://www.cnblogs.com/jfzhu/p/4006118.html 转载请注明出处 创建一个新森林就是在一台计算机上安装AD DS,并将这台计算机提升为域控制器. 演示环 ...

  10. 机器学习理论知识部分--偏差方差平衡(bias-variance tradeoff)

    摘要: 1.常见问题 1.1 什么是偏差与方差? 1.2 为什么会产生过拟合,有哪些方法可以预防或克服过拟合? 2.模型选择例子 3.特征选择例子 4.特征工程与数据预处理例子 内容: 1.常见问题 ...