iframe在iphone6 plus的safari下子页面的宽度不受父页面控制的bug
这是想要的效果:
样式设置是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的更多相关文章
- iphone在iframe页面的宽度不受父页面影响,避免撑开页面
工作中有个需求,就是产品页面通过iframe引用显示产品协议页,要求不要横向滑动,只需要竖向滑动,但在iphone中引用的iframe会撑开父页的宽度,而在android端浏览器这不会. <di ...
- js 两个页面的传值 可以用父页面 子页面做
js 两个页面的传值 可以用父页面 子页面做 比如弹窗 将值传到子页面的时候 用get超长
- Jbox 弹出窗口 子页面操作完成后关闭 父页面刷新
父页面js //父页面js <script> var isFreshFlag = '1'; //添加会议活动 function addMeetingAct(){ var attendVip ...
- HTML子页面保存关闭并刷新父页面
1.思路是子页面保存后,后台传递成功的js到前台. 2.js的原理是——子页面调用父页面的刷新 子页面 function Refresh() { window.parent.Re ...
- layer.open({}) 子页面传参并调用父页面的方法
闲话少说先看效果!!! 说明适用场景:在a.jsp页面,点击查看一个文件,layer.open弹出b.jsp页面,在b.jsp页面可以修改文件的名称(其实是去改了数据库),但是关闭弹窗的后,要求不刷新 ...
- javascript获取iframe框架中页面document对象,获取子页面里面的内容,iframe获取父页面的元素,
javascript获取iframe框架中,加载的页面document对象 因为浏览器安全限制,对跨域访问的页面,其document对象无法读取.设置属性 function getDocument(i ...
- Iframe父页面与子页面之间的调用
原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下: Iframe:iframe元素是文档中的文档. window对象: 浏览器会在其打 ...
- IFrame父页面和子页面的交互
现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面 ...
- iframe交互(一)父页面自动高度
//父页面源码 <body style="border:1px solid red;width:200px;height:500px;" onload="IFram ...
随机推荐
- 微软借力.NET开源跨平台支持,布局物联网平台开发
今天科技类最大的新闻,莫过于微软宣布.NET开发框架开源计划..NET 开源,集成 Clang 和 LLVM 并且自带 Android 模拟器,这意味着 Visual Studio 这个当下最好没有之 ...
- 一步步学习javascript基础篇(2):作用域和作用域链
作用域和作用域链 js的语法用法非常的灵活,且稍不注意就踩坑.这集来分析下作用域和作用域链.我们且从几道题目入手,您可以试着在心里猜想着答案. 问题一. if (true) { var str = & ...
- log4j2.xml实用例子
一个多月前,我写了篇关于log4j.xml配置的文章,点击此处查看:http://www.cnblogs.com/guogangj/p/3931397.html 最近,我把自己的log4j升级到2.0 ...
- JBoss AS
即 JBoss Application Server - JBoss Community The JBoss AS community project has been renamed to the ...
- 2013 duilib入门简明教程 -- 其他 (18)
一.超链接按钮 代码很简单,参见360Demo: <Button text="{u}{a}求助{/a}{/u}" showhtml="true& ...
- Select count(*)和Count(1)的区别和执行方式
在SQL Server中Count(*)或者Count(1)或者Count([列])或许是最常用的聚合函数.很多人其实对这三者之间是区分不清的.本文会阐述这三者的作用,关系以及背后的原理. ...
- jQuery 2.0.3 源码分析 样式操作
根据API分类 CSS addClass() jQuery.cssHooks .hasClass() .removeClass() .toggleClass() .addClass() 对元素的样式操 ...
- .Net 转战 Android 4.4 日常笔记(10)--ADT集成环境更新SDK
今天下载了一份原来来参考,却发现SDK版本偏低我没有安装 用SDK Manager却一直更新不了出现 Failed to fetch URL https://dl-ssl.google.com/and ...
- Android okHttp网络请求之文件上传下载
前言: 前面介绍了基于okHttp的get.post基本使用(http://www.cnblogs.com/whoislcj/p/5526431.html),今天来实现一下基于okHttp的文件上传. ...
- ASP.NET MVC之Unobtrusive Ajax(五)
前言 这一节我们来讲讲Unobtrusive中的Ajax提交,大部分情况下我们是利用JQuery来进行Ajax请求,当然利用JQuery来进行表单Ajax请求也不例外,但是相对于Unobtrusive ...