开发需求需要在 h5 中用 iframe 中调用一个其他公司开发的 html 页面。

简单的插入  <iframe /> 并设置宽高后，发现在 Android 手机浏览器上打开可以正常运行，但是在 iOS 手机上会有高度问题，iframe 会扩展超过设置的高度。

查找后发现问题是出在 iOS Safari 上，对于一个 scrollable 的 iframe 元素，iOS Safari 会选择扩展 iframe 的高度来自适应其中 web 页面内容的高度。所以当页面内容超过 iframe 设置的高度时，iOS Safari 并不会像在 Android 浏览器中那样维持 iframe 的高度并在右侧显示一个拖动条，而是直接扩展 iframe 的高度。

解决方案如下：

第一种：直接将 iframe 设置成 scrolling no。

<iframe scrolling='no' />

但是这种方法会导致 iframe 中的 content 显示不全，超出 iframe 高度的部分会直接被裁剪掉。

第二种：用一个 div 包裹 iframe，并在 div 中处理滚动事件。

<style>

.demo-iframe-holder {

  width: 500px;

  height: 500px;

  -webkit-overflow-scrolling: touch;

  overflow-y: scroll;

}

.demo-iframe-holder iframe {

  height: 100%;

  width: 100%;

}

</style>

<html>

<body>

    <div class="demo-iframe-holder">

        <iframe src="content.html" />

    </div>

</body>

</html>

其中 overflow-y: scroll 会裁剪在垂直方向上裁剪超过高度的内容，并把剩下内容用滚动的方式来显示，而  -webkit-overflow-scrolling: touch 属性会在浏览器中创建一个继承于 UIScrollView 的 UIWebOverflowScrollView 来处理滚动事件，同时也可以防止 div 内部的内容在滚动时，浏览器页面跟着一起滚动。

参考文章：

scroll-iframes-ios

https://www.jianshu.com/p/58ac17ac7779 原文

iOS 中 h5 页面 iframe 调用高度自扩展问题及解决的更多相关文章

  1. iframe ios中h5页面 样式变大

    实际项目开发中,iframe在移动设备中使用问题还是很大的,说一说我的那些iframe坑 做过的这个后台管理框架,最开始的需求是PC,但随着业务需要,需要将项目兼容到ipad,后台的框架也是使用的开源 ...

  2. ios嵌套H5页面，出现的小bug；

    ios嵌套H5页面,点击数字时就会弹出打电话的功能:解决方法: 在head标签中添加: <meta name="format-detection" content=" ...

  3. IOS的H5页面滑动不流畅的问题：

    IOS的H5页面滑动不流畅的问题: -webkit-overflow-scrolling : touch; 需要滑动的是哪块区域,就在哪里加上这段代码就OK

  4. JQuery iframe宽高度自适应浏览器窗口大小的解决方法

    iframe宽高度自适应浏览器窗口大小的解决方法   by:授客 QQ:1033553122 1.   测试环境 JQuery-3.2.1.min.js 下载地址: https://gitee.com ...

  5. ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法

    一. 运行环境: iphone所有机型的qq浏览器,safari浏览器,微信内置浏览器(qq浏览器内核)等. 二. 异常现象: 1. 大幅度上下滑动h5页面,然后停止滑动,有时候会影响到页面滚动,如局 ...

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

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

  7. chrome 调试 ios的 H5 页面

    原文地址http://www.cnblogs.com/kelsen/p/6402477.html 本文重点讨论如何在 Windows 系统中通过chrome 浏览器调试运行在 iPhone Safar ...

  8. 微信中h5页面用window.history.go(-1)返回上一页页面不会重新加载问题

    问题描述: 在实际开发中遇到这样一个问题,业务需求涉及到返回上一页问题,第一时间想到了window.history.go(-1)方法,这样做本身没有任何问题,但是在微信中,安卓手机还好返回上一页页面会 ...

  9. [原]iOS中 Web 页面与 Native Code 的一种通信方式

    在 iOS 开发中,Web 页面与 Native Code 通信可以分为两个方面: 1.Native Code 调用 Web 页面的方法:主要是调用页面中的 Javascript 函数. 2.Web ...

随机推荐

  1. linux 开机直接进入命令行

    一.图形界面和命令行切换 linux系统在启动图形化界面后,可以在图形界面和命令行之间来回切换,linux提供了6个命令行终端(terminal或Console),分别为tty1——tty6,使用Ct ...

  2. SpringBoot 3.SpringBoot 整合 MyBatis 逆向工程以及 MyBatis 通用 Mapper

    一.添加所需依赖,当前完整的pom文件如下: <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=&qu ...

  3. linux客户端WinSCP

    WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端.同时支持SCP协议.它的主要功能就是在本地与远程计算机间安全的复制文件.   这是一个中文版的介绍.从这里链接出去的大多数文 ...

  4. 淘宝卖家搜索器V1.6算法注册机。

    该软件的算法非常简单,适合小白练手.(E语言写的)1.OD加载该软件,输入bp MessageBoxA 2.点击注册 3.OD就会中断下来了 4.按ALT+K打开调用堆栈 5.往上翻,就来到算法处了 ...

  5. 5Java异常处理

    五.异常 异常概念总结:   练习一:异常的体系    问题:    1. 请描述异常的继承体系    2. 请描述你对错误(Error)的理解    3. 请描述你对异常(Expection的理解) ...

  6. 【题解】Power Strings

    题目描述 给定若干个长度小于等于10^6的字符串,询问每个字符串最多由多少个相同的子串重复连接而成.如:ababab,最多由3个ab连接而成. 输入输出格式 输入格式 若干行,每行一个字符串. 当读入 ...

  7. POJ 1182 食物链 （拆点并查集）

    食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 78601   Accepted: 23422 Description ...

  8. 洛谷P3703 [SDOI2017]树点涂色（LCT，dfn序，线段树，倍增LCA）

    洛谷题目传送门 闲话 这是所有LCT题目中的一个异类. 之所以认为是LCT题目,是因为本题思路的瓶颈就在于如何去维护同颜色的点的集合. 只不过做着做着,感觉后来的思路(dfn序,线段树,LCA)似乎要 ...

  9. 【BZOJ1306】[CQOI2009]循环赛（搜索）

    [BZOJ1306][CQOI2009]循环赛(搜索) 题面 BZOJ 洛谷 题解 爆搜一下,\(hash\)记录是否已经考虑过这个状态,记忆化解决问题. #include<iostream&g ...

  10. 4.Kali 1.0 / 2.0 安装中文输入法（谷歌pinyin + 其他）

    搜狗输入法安装可以参考这个:http://www.cnblogs.com/dunitian/p/6662374.html 1.kali默认是没有中午输入法的,需要自己安装一下 2.首先我们先获取roo ...