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

时间： 2024-10-11 05:19:59

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

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

因为工作需要在H5小游戏中插入广告,所以小游戏要放在iframe里面,但是那样的话在iphone手机上iframe的宽度限制不住,在Android设备上面是正常的所以要单独对iframe里面的body进行宽度限制才能实现效果.可以用css也可以用js来控制: css就不写啦,js控制如下:判断浏览器设备,然后修改样式: if (!navigator.userAgent.match(/iPad|iPhone/i)){ }else{ //如果是iphone,ipad,则重新修改body宽度值 ale

JQuery iframe页面通过parent方法操作父页面中的元素与方法(实例讲解)

1)在iframe中查找父页面元素的方法: $('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量: parent.method parent.value 3)实例 1.父页面 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="If

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

专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者iframe标签),浏览器就会为原始文档创建一个window对象,再为每个iframe创建额外的window对象,这些额外的window对象是原始窗口的子窗口. contentWindow: 是指指定的iframe或者iframe所在的window对象.

iframe交互（一）父页面自动高度

//父页面源码 <body style="border:1px solid red;width:200px;height:500px;" onload="IFrameResize()"> <script> function IFrameResize() { //alert(this.document.body.scrollHeight); //弹出当前页面的高度 var obj = parent.document.getElementById

IFrame父页面和子页面的交互

现在在页面里面用到iframe的情况越来越少了,但有时还是避免不了,甚至这些页面之间还需要用js来做交互,那么这些页面如何操作彼此的dom呢?下面将会逐步介绍. 1.父页面操作子页面里面的dom 下面提供了四中方法来操作iframe里面的dom: a. contentWindow: 以window对象返回iframe中的文档,所有主流浏览器都支持. 用法: // 获取id为iframeId的子页面中的div01元素 document.getElementById('iframeId').cont

父页面调用子页面的方法

其实一句话就可以调用子页面的方法了,何必整得那么纠结是吧,感谢java大神: var dsjg1=document.getElementById("div-dsjg").contentWindow.checkEmpty(); 我的子页面有一个方法: 子页面js: function checkEmpty(){ alert("我是儿子!"); } 子页面body内容省略. 父页面: <iframe id="div-dsjg" src="

刷新父页面

用iframe.弹出子页面修改内容后刷新父页面iframe <script language=JavaScript> parent.location.reload(); </script>

父页面获取子页面的内容

需求说明:两个JSP页面,父页面需要子页面的内容,但子页面是隐藏的,具体来说,子页面是一系列的模板,父页面要通过id来获取这些模板,不愿意通过<include>方式导入,因为如果模板过多,就导致整个父页面太大,加载缓慢,以下两个方案,不知有没有解决这个问题. 1,通过ajax方式 实现过程:通过ajax请求到子页面中,子页面获取参数id使用java和js变量的交互后,返回需要的模板信息 缺点:把js变量转换成java变量比较麻烦,需要使用form表单来提交,而且jsp中的java脚本是在服务器

菜鸟解决“子页面关闭刷新父页面局部”问题的历程

引子 昨天晚上做一个项目,遇到的一个问题,这个项目是一个在线考试系统,新建一份试卷的页面,要添加一些试题策略.点击添加试题策略,弹出添加策略的页面,策略编辑好之后提交,添加策略页关闭,当前添加试题页面策略列表刷新.那么就遇到一个问题,在“添加试卷页”中点击“添加策略”按钮弹出添加策略页,添加策略后,父页面只能局部刷新(整体刷新会丢掉页面输入框未保存的数据). 综上总结,浓缩成一句话啊,就是“父页面打开子页面,子页面完成操作后触发父页面的事件.” 过程 我在百度和必应里面搜一下,很多解决方案是用w