在iOS上滚动iframe已解决,但iframe页面显示不完整
Jov*_*ove 7 iframe html5 web-applications jquery-plugins cordova
我试图在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>
小智 6
这个解决方案有点像黑客攻击,但在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中工作正常,因此您使用object标签嵌入页面代码.问题是,由于原始策略相同,您无法确定目标网页的维度.我发现设置一个巨大的页面大小是完全可行的(没有延迟或波动注意......只是空白)
您可以轻松确定客户端操作系统,并仅将此代码添加到iOS设备.
小智 5
我找到了div与"绝对"风格的组合,而nicescroll确实修复了choppines.
您必须在iframe加载的页面上加载nicescroll.在同一页面中用div包装所有内容(绝对样式)
#content { position:absolute; }
使用包装的div内容加载nicescroll.
$(document).ready(function() {
$("html").niceScroll("#content");
});
链接到演示页面,以便您查看代码:http://areaaperta.com/nicescroll/demo/iframe6.html
自动使用iOS本机滚动,在其他平台上你有nicescroll活动.
我在iPad上测试了iOS 5.1.
| 归档时间： |
|
| 查看次数： |
36521 次 |
| 最近记录： |