这是想要的效果：

样式设置是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. SDOI 2016 征途 决策单调性

    题目大意:有一个数列,将其分成m段,求最小方差 先弄出n^3的dp,打出决策点,然后发现决策点是单调递增的,决策单调性搞一搞就可以了 #include<bits/stdc++.h> #de ...

  2. 关于bootstrap和响应式布局

    bootstrap导入 首先需要安装好插件 然后就是在代码器写导入代码 代码如下 <html lang="zh-CN"> <head> <meta c ...

  3. 验证码类库CaptchaMvc

    CaptchaMvc是一个有弹性的.简单的解决方案,它能够解决你项目中所有与验证码相关的问题.你需要做的所有事情就是向你的项目中添加一个类库,添加之后验证码就准备就绪了.该项目拥有使用验证码所需要的所 ...

  4. Lesson 11 One good turn deserves another

    Text I was having dinner at a restaurant when Tony Steele came in. Tony worked in a layer's office y ...

  5. js框架模版

    (function() { //注册命名空间zzw到window对象上 window['zzw'] = {} //定义一个$函数 function $() { alert("hello $& ...

  6. .Net组件程序设计之线程、并发管理（一）

    .Net组件程序设计之线程.并发管理(一) 1.线程 线程 线程的创建 线程的阻塞 线程挂起 线程睡眠 加入线程 线程中止 现在几乎所有的应用程序都是多线程的,给用户看来就是一个应用程序界面(应用程序 ...

  7. Viewport---响应式 Web 设计----在路上（13）

    什么是 Viewport? viewport 是用户网页的可视区域. viewport 翻译为中文可以叫做"视区". 手机浏览器是把页面放在一个虚拟的"窗口"( ...

  8. easyui 数据库修改部分（基于数据添加逻辑功能修改）

    {iconCls:'icon-edit',text:'修改', handler:function(){ type="edit"; //判断是否选中一条数据 var data = $ ...

  9. 模拟jsonp的实现

    function prescript(s) { if (s.cache === undefined) { s.cache = false; } if (s.crossDomain) { s.type ...

  10. jQuery源码分析系列(37) : Ajax 总结

    综合前面的分析,我们总结如下3大块: jQuery1.5以后,AJAX模块提供了三个新的方法用于管理.扩展AJAX请求 前置过滤器 jQuery. ajaxPrefilter 请求分发器 jQuery ...