开发需求需要在 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. Alpha 冲刺六

    团队成员 051601135 岳冠宇 051604103 陈思孝 031602629 刘意晗 031602248 郑智文 031602234 王淇 会议照片 今天没有进行站立式会议,由于团队内有些细节 ...

  2. Mybatis 从入门到精通一：mybatis的入门

    1.Mybatis简介 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation(阿帕奇软件基金会) 迁移到了google ...

  3. pgm8

    前面的近似策略是寻找了 energy functional 的近似,该近似导致了 LBP,这使得 message passing 的算法不变.近似使用 I-projection,尽管这个一般说来并不容 ...

  4. 理解 Continuation

    理解 Continuation (2012-08-26 10:39:34)     终于,我也不能免俗地要来谈谈这几个 Schemer 的必谈话题(顺便山寨了一个标题). Scheme 是一门神奇的编 ...

  5. MT【102】一个常见的因式分解公式

    解答: $x^3+y^3+1-3xy=(x+y+1)(x^2+y^2+1+xy-x-y)=$ $(x+y+1)(x^2+y^2+1+xy-x-y)=$ $\frac{1}{2}(x+y+1)[(x-y ...

  6. 【刷题】BZOJ 3522 [Poi2014]Hotel

    Description 有一个树形结构的宾馆,n个房间,n-1条无向边,每条边的长度相同,任意两个房间可以相互到达.吉丽要给他的三个妹子各开(一个)房(间).三个妹子住的房间要互不相同(否则要打起来了 ...

  7. 「BJWC2018」Border 的四种求法

    「BJWC2018」Border 的四种求法 题目描述 给一个小写字母字符串 \(S\) ,\(q\) 次询问每次给出 \(l,r\) ,求 \(s[l..r]\) 的 Border . \(1 \l ...

  8. springboot通过ssh通道连接mysql数据库

    navicat可以通过ssh通道连接mysql数据库,那java中如何实现了,springboot又该怎样集成呢? 1.添加包 <dependency> <groupId>co ...

  9. spring BasicDataSource 数据源配置 sqlserver数据库 oracle数据库 mysql数据jdbc配置

    spring BasicDataSource 数据源配置 sqlserver数据库 oracle数据库 mysql数据jdbc配置 jdbc.properties 文件信息如下: ---------- ...

  10. Python学习笔记 - 实现探测Web服务质量

    #!/usr/bin/python3# _*_ coding:utf-8 _*_import sys, osimport timeimport pycurl url = "https://d ...