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

3回答

慕村9548890

是的，您不能使用高度和宽度来约束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。

杨魅力

如果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

仅当您同时控制外部页面和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变成可滚动的节点。