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

问题描述

我正在尝试在我的移动网络应用程序中显示 iframe，但我无法将 iframe 的大小限制为 iPhone 屏幕的尺寸.奇怪的是，iframe 元素上的高度和宽度属性似乎没有效果.用 div 包围它可以限制它，但是我无法在 iframe 内滚动.

以前有人在移动 safari 中处理过 iframe 吗?任何想法从哪里开始?

解决方案

是的，你不能用高度和宽度来约束 iframe 本身.你应该在它周围放一个 div.如果你控制 iframe 中的内容，你可以在 iframe 内容中放一些 JS，当接收到触摸事件时，它会告诉父级滚动 div.

像这样:

JS:

setTimeout(function () {var startY = 0;无功开始X = 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;开始X = 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"/>

如果您不控制 iframe 内容，您可以以类似的方式在 iframe 上使用叠加层，但是除了滚动之外，您无法与 iframe 内容进行交互 - 所以您不能，因为例如，点击 iframe 中的链接.

过去您可以使用两根手指在 iframe 内滚动，但现在不再适用.

更新:iOS 6 为我们打破了这个解决方案.我一直试图为它获得一个新的修复，但还没有奏效.此外，由于他们引入了需要 Mac 才能使用的 Remote Web Inspector，因此无法再在设备上调试 javascript.

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.

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

解决方案

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.

like this:

The 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);

The 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>

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.

It used to be that you could use two fingers to scroll within an iframe, but that doesn't work anymore.

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屋！