我正在尝试在移动Web应用程序中显示iframe，但无法将iframe的尺寸限制为iPhone屏幕的尺寸。奇怪的是，iframe元素上的height和width属性似乎没有作用。用div包围它可以限制它，但是我无法在iframe中滚动。之前有没有人在移动Safari中解决过iframe？任何想法从哪里开始？
3 回答
慕村9548890
TA贡献1884条经验 获得超4个赞
是的，您不能使用高度和宽度来约束iframe本身。您应该在其周围放置一个div。如果您控制iframe中的内容，则可以在iframe内容中放置一些JS，这些JS会告诉父项在收到touch事件时滚动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为我们打破了此解决方案。我一直在尝试获取新的修复程序，但是还没有任何效果。另外，由于它们引入了需要使用Mac的Remote Web Inspector，因此不再可能在设备上调试javascript。
杨魅力
TA贡献1811条经验 获得超6个赞
如果iFrame内容不是您的内容，则以下解决方案将不起作用。
使用Android，您需要做的就是用DIV包围iframe，并将div的高度设置为document.documentElement.clientHeight。但是，IOS是另一种动物。尽管我还没有尝试过沙龙的解决方案，但它确实是一个不错的解决方案。我确实找到了一个更简单的解决方案，但它仅适用于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的解决方案。
慕的地6264312
TA贡献1817条经验 获得超6个赞
仅当您同时控制外部页面和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变成可滚动的节点。
- 3 回答
- 0 关注
- 1067 浏览
相关问题推荐
添加回答
举报
0/150
提交
取消