开发需求需要在 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. 解决SVN安装语言包后无法选择中文的问题（亲测可行）

    TortoiseSVN_1.8.8安装后无法选择简体中文,或者安装语言包后也无法选择中文 1.找到 SVN 安装目录,把里面的Languages文件夹删掉 2.安装语言包,百度一下也有很多安装包和语言 ...

  2. NGINX.conf配置文件支持pathinfo

    # power by www.php.cn #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/e ...

  3. Java微信二次开发（二）

    第二天,做微信文本消息接口请求与发送 需要导入库:dom4j-1.6.1.jar,xstream-1.3.1.jar 第一步:新建包com.wtz.message.response,新建类BaseMe ...

  4. Vue项目部署问题及解决方案

    Vue项目部署问题及解决方案 Vue-Router 有两种模式,默认是 hash 模式,另外一种是 history 模式. hash:也就是地址栏里的 # 符号.比如 http://www.examp ...

  5. C++11 自动推导auto

    C++11 自动推导auto C++11中引入的auto主要有两种用途:自动类型推导和返回值占位. auto在C++98中的标识临时变量的语义,由于使用极少且多余,在C++11中已被删除.前后两个标准 ...

  6. 学习笔记（two sat）

    关于two sat算法 两篇很好的论文由对称性解2-SAT问题(伍昱), 赵爽 2-sat解法浅析(pdf). 一些题目的题解 poj 3207 poj 3678 poj 3683 poj 3648 ...

  7. JAVA实现组合、排列、重复排列（多层循环）

    1.代码 package com.hdwang; import java.util.ArrayList; import java.util.Arrays; import java.util.List; ...

  8. Qtree4——动态点分治

    题目描述 给出一棵边带权的节点数量为n的树,初始树上所有节点都是白色.有两种操作: C x,改变节点x的颜色,即白变黑,黑变白 A,询问树中最远的两个白色节点的距离,这两个白色节点可以重合(此时距离为 ...

  9. mes平台Action类模版

    Connection conn = null; PreparedStatement pst = null; ResultSet rs = null; @Override public String e ...

  10. adb logcat介绍

    logcat命令语法: [adb] logcat [<option>] ... [<filter-spec>] ... adb logcat -c 清除所有以前的日志 adb ...