IOS下的webview页面,内嵌iframe元素,将其样式指定为宽高100%:

.iframe {
width: %;
height: %;
}

在安卓下运行均无问题,但是在IOS下会出现异常。

具体表现为iframe页面内的子元素一旦超出原先的边界,只要能影响到html元素的宽高,就会自动撑开iframe,即使html元素设置了overflow:hidden也没用。
比如一个body元素下的弹层需要从下往上滑动进场,这个弹层的位置就会导致html高度的变化,因此页面底部的tabbar就会在弹层运动期间先消失再出现。

解决方法就是使用具体的宽高数值锁定iframe元素:

 
function onLoadIFrame (index) {
// 修复IOS下轮播图初始化瞬间会让iframe宽度自行扩大问题
if (this.ENV.isIOS) {
const iframe = this.$el.querySelector('#iframe' + index)
iframe.style.width = iframe.clientWidth + 'px'
iframe.style.height = iframe.clientHeight + 'px'
}
}

内嵌iframe页面在IOS下会受内部元素影响自动撑开的问题的更多相关文章

  1. app内嵌h5页面在ios手机端滑动卡顿的解决方法

    1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%

  2. ios应用内嵌h5页面数据自动变色识别为手机号码的解决方法——手机号码拨号禁用IOS手机页面数字自动识别为手机号

    异常如下: ios应用内嵌h5页面,本来是设置了白色的数字,两三秒之后会自动变为黑色,然后点击的时候就会弹出是否拨号的提示: 解决方法: 添加如下meta标签,即可解决: <meta name= ...

  3. easyui内嵌iframe问题解决

    项目中使用easyui的tab页,每个tab页均内嵌iframe,现在要在tab页中控制新增一个同级别的tab页,记录如下: 首先是main.html主页面: <div class=" ...

  4. APP中内嵌H5页面为什么不能下载?

    在APP中内嵌H5页面,若页面上存在下载链接,没有任何反应,为什么呢? 原因是app中内嵌的H5页面是WebView解析的,什么是WebView呢? 在Android手机中内置了一款高性能webkit ...

  5. 小程序中webview内嵌h5页面

    小程序内嵌h5页面跳转小程序指定页面,  需要引用  JSSDK:   <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2 ...

  6. ios下app内嵌h5页面是video适配问题

    ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...

  7. 弹出窗口内嵌iframe 框口自适应

    说一下,弹出窗口还有内嵌一个iframe 这种模式应该是不科学的,但是公司项目里面就偏偏用到了,它这高低还不能只适应,所以我痛苦的日子来了 分析一下: 首先window.showDialog 方法的时 ...

  8. 客户端内嵌Vue页面

    目前很多应用都存在网页端和客户端形式,例如常用的:钉钉.微信等.按传统的开发形式,需要为客户端开发一套界面.基于当前Web应用可以利用三大前端框架和UI框架快速开发出各种酷炫的界面,于是出现了客户端嵌 ...

  9. 内嵌iframe撑高父容器,底部有4px留白问题解决办法

    由于iframe是特殊标签, 1,iframe默认是块元素,其display样式默认值是block2,frame应该说即不是块元素也不是行内元素,它虽然有display样式,但其默认值是none3,f ...

随机推荐

  1. Java实现选择问题

    选择问题是求一个n个数列表的第k个最小元素的问题. 那么如何寻找n个元素中第k个最小元素呢? package com.liuzhen.chapter4; public class SelectProb ...

  2. Linux 终止进程

    kill命令 kill -l,查看可用的进程号 支持64种,常用的三种,1代表重启,9代表强制终止,15代表正常终止 kill -1 进程ID号,重启进程 killall -9 进程名,杀死对应的全部 ...

  3. java关键字volatile用法详解

    volatile关键字想必大家都不陌生,在java 5之前有着挺大的争议,在java 5之后才逐渐被大家接受,同时作为java的关键字之一,其作用自然是不可小觑的,要知道它是java.util.con ...

  4. js 不同时间格式介绍以及相互间的转换

    首先必须要提到的是 Date 对象,它用来处理时间和日期. 使用 new Date() 语句可创建 Date 对象,创建出来的时间格式如下(后面提到的标准时间都是指该格式): Wed Jul 17 2 ...

  5. Netty 中的内存分配浅析

    Netty 出发点作为一款高性能的 RPC 框架必然涉及到频繁的内存分配销毁操作,如果是在堆上分配内存空间将会触发频繁的GC,JDK 在1.4之后提供的 NIO 也已经提供了直接直接分配堆外内存空间的 ...

  6. Com训练_1

    初次接触Com大概是2001年,离现在多年了,那时认识比较肤浅,再次接触学习下. //ComPort + D7, 稍后将训练ComPort6 + D10.3.2环境 //MSComm + D7,D10 ...

  7. TensorFlow从0到1之TensorFlow损失函数(12)

    正如前面所讨论的,在回归中定义了损失函数或目标函数,其目的是找到使损失最小化的系数.本节将介绍如何在 TensorFlow 中定义损失函数,并根据问题选择合适的损失函数. 声明一个损失函数需要将系数定 ...

  8. numpy中np.array()与np.asarray的区别以及.tolist

    array 和 asarray 都可以将 结构数据 转化为 ndarray,但是主要区别就是当数据源是ndarray时,array仍然会copy出一个副本,占用新的内存,但asarray不会. 1.输 ...

  9. 07.DRF-序列化

    Serializer序列化器 序列化器的作用: 进行数据的校验 对数据对象进行转换 一.定义Serializer 1.1 定义方法 Django REST framework中的Serializer使 ...

  10. Spring Boot 分离资源文件打包

    Spring Boot项目默认的会打包成单一的jar文件,但是有时候我们并不想让配置文件.依赖包都跟可执行文件打包到一起.这时候可以在pom.xml文件中进行配置,从而使资源文件.依赖包和可执行文件分 ...