Mat*_*ond 54 css iframe mobile-safari
我正在尝试在我的移动网络应用程序中显示iframe,但是我无法将iframe的大小限制为iPhone屏幕的尺寸.iframe元素的高度和宽度属性似乎没有任何影响,奇怪的是.用div围绕它会设法限制它,但是我无法在iframe中滚动.
之前有没有人在移动游猎中解决过iframe？任何想法从哪里开始？
Cas*_*ase 20
是的,你不能用高度和宽度约束iframe本身.你应该在它周围放一个div.如果您控制iframe中的内容,则可以在iframe内容中放置一些JS,以便在收到触摸事件时告诉父级滚动div.
像这样:
JS:
setTimeout(function () {
var startY = 0;
var startX = 0;
var b = document.body;
b.addEventListener('touchstart', function (event) {
parent.window.scrollTo(0, 1);
startY = event.targetTouches[0].pageY;
startX = event.targetTouches[0].pageX;
});
b.addEventListener('touchmove', function (event) {
event.preventDefault();
var posy = event.targetTouches[0].pageY;
var h = parent.document.getElementById("scroller");
var sty = h.scrollTop;
var posx = event.targetTouches[0].pageX;
var stx = h.scrollLeft;
h.scrollTop = sty - (posy - startY);
h.scrollLeft = stx - (posx - startX);
startY = posy;
startX = posx;
});
}, 1000);
HTML:
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="url" />
</div>
如果你不控制iframe内容,你可以以类似的方式在iframe上使用叠加,但是除了滚动之外你不能与iframe内容交互 - 所以你不能,例如,点击iframe中的链接.
过去,您可以使用两根手指在iframe中滚动,但这不再适用.
更新:iOS 6为我们打破了这个解决方案.我一直试图为它获得一个新的修复,但还没有任何工作.此外,由于他们引入了远程Web检查器,因此无法再在设备上调试javascript,这需要使用Mac.
Tma*_*mac 11
如果iFrame内容不是您的,那么下面的解决方案将无效.
使用Android,你需要做的就是用DIV包围iframe并将div的高度设置为document.documentElement.clientHeight.然而,IOS是一种不同的动物.虽然我还没有尝试过Sharon的解决方案,但它看起来确实是一个很好的解决方案.我确实找到了一个更简单的解决方案,但它只适用于IOS 5. +.
使用DIV环绕iframe元素(让我们称之为滚动条),设置DIV的高度并确保新DIV具有以下样式:
$('#scroller').css({'overflow' : 'auto', '-webkit-overflow-scrolling' : 'touch'});
仅此一项就可以了,但您会注意到在大多数实现中,iframe中的内容在滚动时变为空白,并且基本上变得无用.据我所知,这种行为早在iOS 5.0就被报告为Apple的一个漏洞.要解决这个问题,找到iframe中的body元素并添加-webkit-transform','translate3d(0,0,0),如下所示:
$('#contentIframe').contents().find('body').css('-webkit-transform', 'translate3d(0, 0, 0)');
如果您的应用程序或iframe在内存使用方面很重,那么您可能需要使用Sharon的解决方案.
Ker*_*mes 11
这仅在您控制外部页面和iframe页面时才有效.
在外部页面上,使iframe不可滚动.
<iframe src="" height=200 scrolling=no></iframe>
在iframe页面上,添加此项.
<!doctype html>
...
<style>
html, body {height:100%; overflow:hidden}
body {overflow:auto; -webkit-overflow-scrolling:touch}
</style>
这是有效的,因为现代浏览器用于html确定高度,因此我们只需给它一个固定的高度并将其body转换为可滚动的节点.
| 归档时间： |
|
| 查看次数： |
157488 次 |
| 最近记录： |