如何在移动safari中正确显示iFrame [英] how to properly display an iFrame in mobile safari

问题描述

我尝试在我的移动网络应用程序中显示iframe，但我无法将iframe的大小限制为iPhone屏幕的尺寸。 iframe元素的高度和宽度属性似乎没有效果，奇怪。

I'm trying to display an iframe in my mobile web application, but I'm having trouble restricting the size of the iframe to the dimensions of the iPhone screen. The height and width attributes on the iframe element seem to have no effect, strangely. Surrounding it with a div manages to constrain it, but then I'm unable to scroll within the iframe.

之前有没有人在移动safari中解决iframe的问题？任何想法从哪里开始？

Has anyone tackled iframes in mobile safari before? Any ideas where to start?

推荐答案

是的，你不能限制iframe本身的高度和宽度。你应该在它周围放一个div。如果您控制iframe中的内容，您可以在iframe内容中放置一些JS，以便在收到触摸事件时通知父级滚动div。

Yeah, you can't constrain the iframe itself with height and width. You should put a div around it. If you control the content in the iframe, you can put some JS within the iframe content that will tell the parent to scroll the div when the touch event is received.

像这样：

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中的链接。

If you don't control the iframe content, you can use an overlay over the iframe in a similar manner, but then you can't interact with the iframe contents other than to scroll it - so you can't, for example, click links in the iframe.

它

更新：iOS 6打破了这个问题，因为你可以使用两个手指在一个iframe内滚动。解决方案。 我一直在试图获得一个新的修复，但没有什么工作。此外，它不再可能调试设备上的javascript，因为他们引入了远程Web检查器，这需要一个Mac使用。

Update: iOS 6 broke this solution for us. I've been attempting to get a new fix for it, but nothing has worked yet. In addition, it is no longer possible to debug javascript on the device since they introduced Remote Web Inspector, which requires a Mac to use.

这篇关于如何在移动safari中正确显示iFrame的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！