我想在 iOS 上滚动 iframe，我成功了，它滚动得很好，引用:
http://home.jejaju.com/play/iframe-scroll.html
http://areaaperta.com/nicescroll/demo.html
但是，所有的解决方案都有一个问题:iframe 页面没有完全显示...
我在 iPhone 和 iPad 上测试过，iframe 页面显示不稳定。
有什么想法吗？
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=9;FF=3;chrome=1;OtherUA=4" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.js"></script>
<script type="text/javascript">
$(function(){
if (/iPhone|iPod|iPad/.test(navigator.userAgent))
$('iframe').wrap(function(){
var $this = $(this);
return $('<div />').css({
width: $this.attr('width'),
height: $this.attr('height'),
overflow: 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
});
})
</script>
<title>Untitled</title>
</head>
<body>
stuff
<div>
<iframe src="iframe-scroll-long.html" height="500" width="500"></iframe>
</div>
more stuff
</body>
</html>
最佳答案
这个解决方案有点 hack，但经过测试并且在 iOS 上运行良好:
<div style="width: 760px; height: 500px; overflow: scroll !important;-webkit-overflow-scrolling:touch !important;">
<object type="text/html" data="HTTP://YOURPAGE.URL" style="width:1000px; height:10000px;">
</object>
</div>
基本上，由于滚动在 DIV 中工作正常，您可以使用对象标记嵌入您的页面代码。问题是，由于同源策略，您无法确定目标页面的尺寸。我发现设置一个巨大的页面大小是完全可行的(没有发现延迟或断断续续......只是空白)
您可以轻松确定客户端操作系统并仅将此代码添加到 iOS 设备。
关于html - iOS 上滚动 iframe 解决，但 iframe 页面显示不完整，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14183647/