开发需求需要在 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. Python爬虫：抓取新浪新闻数据

    案例一 抓取对象: 新浪国内新闻(http://news.sina.com.cn/china/),该列表中的标题名称.时间.链接. 完整代码: from bs4 import BeautifulSou ...

  2. 用jq获取元素内文本，但不包括其子元素内的文本值的方法

    <li id="listItem"> This is some text <span id="firstSpan">First span ...

  3. djang-rest-framework学习-day1

    1.老套路:setting 设置复制粘贴!,必要库的安装: 一些库安装失败的解决办法:在 https://www.lfd.uci.edu/~gohlke/pythonlibs/ 上找到下载,然后使用用 ...

  4. 学习《Unix/Linux编程实践教程》(1)：Unix 系统编程概述

    0.目录 1.概念 2.系统资源 3.学习方法 4.从用户的角度来理解 Unix 4.1 登录--运行程序--注销 4.2 目录操作 4.3 文件操作 5.从系统的角度来理解 Unix 5.1 网络桥 ...

  5. 51nod 1102 面积最大的矩形 (单调栈）

    链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1102 思路: 首先介绍下单调栈的功能:利用单调栈,可以找到从左/ ...

  6. oracle12c ORA-28040: No matching authentication protocol

    出错原因:11G客户端连12C数据库服务端会报这个错 解决方案一:CSDN优质解决方案,大家都说可以,然而我这边操作了不行 转自13楼:http://bbs.csdn.net/topics/39066 ...

  7. office2013 激活方式

    1.下载   KMSpico_setup 2.关闭所有杀毒 3.打开  KMSpico_setup.exe 安装,下一步下一步,完成 4.打开word2013看下还有没弹出过期,没有即成功 5.卸载k ...

  8. 【转】vi 写完文件保存时才发现是 readonly

    在MAC上编辑apache配置文件,老是忘记sudo…… readonly的文件保存时提示 add ! to override, 但这仅是对root来说的啊! 百毒了一下竟然还有解决方案!! :w ! ...

  9. windows版本SourceTree免登陆初始设置

    xi 新版本的sourceTree安装之后需要使用账户登陆授权以后才可以使用,之前的旧版本可以不能登录直接使用. sourceTree免登陆跳过初始设置方法 1.安装完sourceTree以后先运行一 ...

  10. SpringBoot整合Mybatis之xml

    SpringBoot整合Mybatis mybatis ORM框架.几个重要的概念: Mapper配置 : 可以使用基于XML的Mapper配置文件来实现,也可以使用基于Java注解的Mybatis注 ...