css - 如何在移动浏览器中正确显示 iFrame

Question

我试图在我的移动网络应用程序中显示 iframe，但我无法将 iframe 的大小限制为 iPhone 屏幕的尺寸。奇怪的是，iframe 元素上的 height 和 width 属性似乎没有任何作用。用 div 围绕它设法限制它，但我无法在 iframe 内滚动。

有没有人以前处理过移动 safari 中的 iframe？有什么想法可以从哪里开始吗？

Answer 1

是的，您不能用高度和宽度来限制 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 为我们打破了这个解决方案。我一直在尝试为它找到一个新的修复，但没有任何效果。此外，由于他们引入了 Remote Web Inspector，因此不再可能在设备上调试 javascript，这需要 Mac 才能使用。