开发需求需要在 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. [转帖] mysql 用户 权限 密码等操作记录

    前言 From :https://blog.csdn.net/yu12377/article/details/78214336 mysql5.7版本中用户管理与以前版本略有不同,在此记录,以备忘 登陆 ...

  2. Django-项目配置

    目录 配置文件 数据库配置DATABASE - 指定MySQL数据库 数据库配置DATABASE - 指定SQL Server数据库 数据库配置DATABASE - 指定多个数据库 模版文件 静态文件 ...

  3. Delphi Try Except 实例

    //判断单位转换率 try um_rate := vp_mstr.F('vp_um_rate_d').AsFloat / vp_mstr.F('vp_um_rate_m').AsFloat; then ...

  4. DELPHI 数据集在内存中快速查询方法

    1.Bookmark var p:pointer; procedure TForm1.Button1Click(Sender: TObject);//加个标签 begin   p:=cxGrid1DB ...

  5. 【Vue学习笔记1】全局配置 Vue.config

    1.slient 类型:boolean: 默认:false: 用法:Vue.config.silent = true  用于取消 Vue 所有的日志与警告

  6. 实体框架自定义代码优先约定（EF6以后）

    仅限EF6仅向前 - 此页面中讨论的功能,API等在实体框架6中引入.如果您使用的是早期版本,则部分或全部信息不适用. 使用Code First时,您的模型是使用一组约定从您的类计算的.默认的Code ...

  7. 一本通1625【例 1】反素数 Antiprime

    反素数 Antiprime 题目描述 原题来自:POI 2001 如果一个大于等于 1 的正整数 n,满足所有小于 n 且大于等于 1 的所有正整数的约数个数都小于 n 的约数个数,则 n 是一个反素 ...

  8. BZOJ 3170 松鼠聚会(切比雪夫距离转曼哈顿距离)

    题意 有N个小松鼠,它们的家用一个点x,y表示,两个点的距离定义为:点(x,y)和它周围的8个点即上下左右四个点和对角的四个点,距离为1.现在N个松鼠要走到一个松鼠家去,求走过的最短距离. 思路 题目 ...

  9. 【codeforces666E】Forensic Examination 广义后缀自动机+树上倍增+线段树合并

    题目描述 给出 $S$ 串和 $m$ 个 $T_i$ 串,$q$ 次询问,每次询问给出 $l$ .$r$ .$x$ .$y$ ,求 $S_{x...y}$ 在 $T_l,T_{l+1},...,T_r ...

  10. MT【74】不可能是哪个函数？

    解答:设$f(g(x_0))=x_0$,则$g(f(g(x_0)))=g(x_0)$,令$y_0=g(x_0)$则$g(f(y_0))=y_0$有解.易得答案为$B$.