如何在移动浏览器中正确显示iFrame
我正在尝试在移动Web应用程序中显示iframe，但无法将iframe的尺寸限制为iPhone屏幕的尺寸。奇怪的是，iframe元素上的height和width属性似乎没有作用。用div包围它可以限制它，但是我无法在iframe中滚动。
之前有没有人在移动Safari中解决过iframe？任何想法从哪里开始？
RISEBY浏览 1068回答 3
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变成可滚动的节点。
随时随地看视频慕课网APP
Html/CSS