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. JPA入门及深入

    一:ORM介绍 ORM(Object-Relational Mapping) 表示对象关系映射.在面向对象的软件开发中,通过ORM,就可以把对象映射到关系型数据库中.只要有一套程序能够做到建立对象与数 ...

  3. RocketMQ系列(二)环境搭建

    RocketMQ的基本概念在上一篇中给大家介绍了,这一节将给大家介绍环境搭建.RocketMQ中最基础的就是NameServer,我们先来看看它是怎么搭建的. NameServer RocketMQ要 ...

  4. 记一次Docker中Redis连接暴增的问题排查

    周六生产服务器出现redis服务器不可用状态,错误信息为: 状态不可用,等待后台检查程序恢复方可使用.Unexpected end of stream; expected type 'Status' ...

  5. Spring Cloud微服务(一):公共模块的搭建

    本demo后台采用spring cloud微服务,前端选用vue,进行前后端分离搭建.具体项目见git:光头才能强 创建文件夹,并分别创建以下jar工程 创建公共模块(后续有需要,还会增加).无论是d ...

  6. 查看Android系统中硬件信息的文件

    文件目录: 使用Linux命令,进入到/proc目录 进入/proc目录,可以查看内存信息(memoinfo)或CPU信息(cpuinfo),使用cat命令

  7. MongoDB知识点总结

    一:MongoDB 概述    一.NoSQL 简介 1. 概念:NoSQL(Not Only SQL的缩写),指的是非关系型数据库,是对不同于传统的关系型数据库的数据库管理系统的统称.用于超大规模数 ...

  8. 微信小程序生命周期,事件

    目录 双线程模型 小程序中 app.js 中的生命周期 小程序的页面的生命周期 小程序的事件 双线程模型 像 Vue 的双向数据绑定 总结: 在渲染层将wxml文件与wxss文件转成js对象,也就是虚 ...

  9. 6、react中的交互

    1.ajax 再react中使用ajax和直接使用ajax的用法是完全一样的,只要找好路径即可,但是也有不一样的地方,再react中是通过改变状态state来达到让组件重新渲染的效果,并且放ajax的 ...

  10. 别再写一摞if-else了!再写开除!两种设计模式带你消灭它!

    代码洁癖狂们!看到一个类中有几十个if-else是不是很抓狂? 设计模式学了用不上吗?面试的时候问你,你只能回答最简单的单例模式,问你有没有用过反射之类的高级特性,回答也是否吗? 这次就让设计模式(模 ...