IOS上iframe的轉動條掉效的處理方法
編輯：IOS開發綜合
成績描寫：
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>
以上就是本文的全體內容，願望對年夜家的進修有所贊助，也願望年夜家多多支撐本站。
【IOS上iframe的轉動條掉效的處理方法】的相關資料介紹到這裡，希望對您有所幫助！ 提示：不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦！
- 上一頁:IOS獲得體系相冊中照片的示例代碼
- 下一頁:IOS面試年夜全之罕見算法
相關文章
+