IOS上iframe的滚动条失效的解决办法

问题描述：

iframe设置了高度（例如500px）。倘若iframe的内容足够长超出了iframe设定的高度时，在ipad等设备上。iframe内部html的滚动条不出现。并且活生生的从500px处截断，（类似overflow：hidden的效果）下面的内容不再显示。

问题重现：

结构：

index.html :

<style>　　

#iframe{height:500px;}

</style>

<div id="content">
  <iframe frameborder="0" src="iframe.html" id="iframe"></iframe>
</div>

iframe.html:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>IOS frame 滚动条 demo</title>
</head>
<body><div class="container">
  我是一堆很长。很长，很高，很高的内容。
</div>
<script src="../jquery.js"></script>
</body>
</html>

 问题原因：

在IOS设备中，iframe内部的html的滚动条无法生效。

--------------------------------------------------------------------------------

 解决办法：

把iframe中body里的内容全部包裹一层，然后设置包裹这一层的height，使用属性-webkit-overflow-scrolling:touch;overflow:auto;

代码如下：

iframe.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>IOS frame 滚动条 demo</title>
</head>
<body>
<style>
#wrapper{height:500px;-webkit-overflow-scrolling:touch;overflow:auto;}
</style>
<div class="container">
  我是一堆很长。很长，很高，很高的内容。
</div>
<script src="../jquery.js"></script>
<script>
  var UA = navigator.userAgent;
  var forIOS = function(){
    if(!UA.match(/iPad/) && !UA.match(/iPhone/) && !UA.match(/iPod/)){return;}
    if($('#wrapper').length){return;}
    $('body').children().not('script').wrapAll('<div id="wrapper"></div>');
  }();
</script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • ios 不支持 iframe 的完美解决方法(兼容iOS&安卓)

    最近做微信公众号页面,因为入口不同,需要把公共页面抽取出来,然后根据不同的值,传递给后台不同的入口.刚开始用iframe页面嵌套(第一次尝试使用),但发现iOS系统对iframe嵌套页面的高度和定位控制的不到位,具体表现为,当嵌套的子页面的高度大于父页面的高度,且子页面中有触发弹框事件时,这时,如果子页面高度远远大于父页面高度,就会出现弹框找不到的情况,其实可能是在视口以下,弹框的位置只是相对于子页面来定位,并没有相对于视口定位. 尝试了好多种方法,均不理想,而安卓系统则表现良好,于是想到,iO

  • IOS上iframe的滚动条失效的解决办法

    问题描述: iframe设置了高度(例如500px).倘若iframe的内容足够长超出了iframe设定的高度时,在ipad等设备上.iframe内部html的滚动条不出现.并且活生生的从500px处截断,(类似overflow:hidden的效果)下面的内容不再显示. 问题重现: 结构: index.html : <style> #iframe{height:500px;} </style> <div id="content"> <ifram

  • iOS UIButton 点击无响应的解决办法

    前言 在日常开发中我们经常和按钮打交道,但是有时候会碰到比较难处理的问题,就是按钮不响应点击事件,这时候我们需要从下面几方面排查 按钮不响应的原因 1.按钮添加到了一个没有开启用户交互的父View上,例如UIImageView,这时候开启父试图的交互 view.userInteractionEnabled = YES 设为YES就可以解决问题 2.按钮自身被遮挡,点击的时候根本就没有点击到button,而是他上面一层View,自然就不会响应 这里有个看图层的方法,下图点击那个红框的按钮就可以看到

  • Oracle函数使索引列失效的解决办法

    在索引列上使用函数使得索引失效的是常见的索引失效原因之一,因此尽可能的避免在索引列上使用函数.尽管可以使用基于函数的索引来解决索引失效的问题,但如此一来带来的比如磁盘空间的占用以及列上过多的索引导致DML性能的下降.本文描述的是一个索引列上使用函数使其失效的案例. 一.数据版本与原始语句及相关信息 1.版本信息 SQL> select * from v$version; BANNER --------------------------------------------------------

  • iOS下border-image不起作用的解决办法

    iOS下border-image不起作用的解决办法

    上周五突然接到现场的一个需求,做一个移动端的劳模展示页面.现场美工把原型图发了过来.这个样子的: 说实在的很想吐槽一下我们美工的审美哈,不过这不是重点. 因为边框是需要特殊花纹的所以打算用border-image实现. .example{ -- border:6px solid transparent; -webkit-border-image:url(../img/border_img.jpg) 6 6 round; border-image:url(../img/border_img.jpg

  • js 开发之autocomplete="off"在chrom中失效的解决办法

    js 开发之autocomplete="off"在chrom中失效的解决办法 问题:在表单的输入框中,有时候我们并不希望点击输入框时,会出现提示信息.这时,在输入框中添加属性:autocomplete="off",一般能达到目的.而在chrom里面就失效. 失效的原因是:浏览器会根据输入框的input的type属性为password的时候,自动将用户名和密码框填充. 解决方法:因为浏览器是否自动填充内容,根据type=password来判断的.此时先将作为密码的输入

  • php没有文件被上传的实例分析及解决办法

    1.修改php.ini,设置上传文件的大小. 2.在httpd.conf中添加"php_value upload_max_filesize "300M"". 3.重启服务器即可. 使用ThinkPhp框架上传小图片文件成功,上传大文件失败. 后来查找了原因,是因为php限制了上传文件的大小,修改php.ini如下配置: upload_max_filesize = 300M post_max_size = 300M 重启服务器,依然如此,问题并未得到解决. 解决方法如

  • js 开发之autocomplete="off"在chrom中失效的解决办法

    js 开发之autocomplete="off"在chrom中失效的解决办法 问题:在表单的输入框中,有时候我们并不希望点击输入框时,会出现提示信息.这时,在输入框中添加属性:autocomplete="off",一般能达到目的.而在chrom里面就失效. 失效的原因是:浏览器会根据输入框的input的type属性为password的时候,自动将用户名和密码框填充. 解决方法:因为浏览器是否自动填充内容,根据type=password来判断的.此时先将作为密码的输入

  • iOS中打包上传常见的错误与解决办法

    iOS中打包上传常见的错误与解决办法

    一.ERROR ITMS-90535 首先这个原因导入了其他第三方导致的问题,首先找到友盟库里面的腾讯API,找到其中的info.plist文件: 找到箭头所指向的一行,随后删掉 这一行 就可以了: 二.ERROR ITMS-90635 这个是由于项目中有使用到Cocoapods导入第三方的库使用bitcode造成的,此种错误我在网上找到了三种解决办法: 方法一 项目->targets->enable bitcode->no pods->project->enable bit

  • JS加载iFrame出现空白问题的解决办法

    在使用IE6浏览器开发过程中出现各种奇葩问题,非常棘手,费劲脑汁终于问题解决.特此把我的问题描述及解决办法分享到我们平台,帮助那些遇到此问题的朋友. 1.js加载iframe出现空白 iframeID 是加载的 Iframe ID号,修改成自己用的即可. <iframe name="frames" id="iframeID" src=""/> setTimeout("document.frames['"+ifram

  • Extjs grid panel自带滚动条失效的解决方法

    Extjs grid panel自带滚动条失效的解决方法

    之前用EXTJS的gridPanel组件的时候,因为经常对gridPanel中的stroe数据进行过滤,所以有时候总是导致gridPanel自身所带的scrollbar失效. 取个实例,EXTJS gridPanel自带的滚动条,是有一个固定的列宽来放置这个scrollbar的,如上图所示.所以当这个scrollbar失效的时候,无论你怎么拖动这个滚动条,grid中的数据永远都不会随scrollbar的移动而展示相应区域的数据(换句话说就是你永远看到的数据都是截图中的这几条record). 至于

随机推荐