gpt4 book ai didi

html - iOS 上滚动 iframe 解决,但 iframe 页面显示不完整

转载 作者:太空狗 更新时间:2023-10-29 14:00:57 24 4
gpt4 key购买 nike

我想在 iOS 上滚动 iframe,我成功了,它滚动得很好,引用:

http://home.jejaju.com/play/iframe-scroll.html

http://areaaperta.com/nicescroll/demo.html

但是,所有的解决方案都有一个问题:iframe 页面没有完全显示...

我在 iPhone 和 iPad 上测试过,iframe 页面显示不稳定。 enter image description here

有什么想法吗?

例子:

<!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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com