我尝试在我的移动网络应用程序中显示iframe,但我无法将iframe的大小限制为iPhone屏幕的尺寸。 iframe元素的高度和宽度属性似乎没有效果,奇怪。用一个div包围它管理约束它,但是我不能在iframe内滚动。
有没有人在移动safari之前解决iframe?任何想法从哪里开始?
解决方法
是的,你不能限制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中的链接。
它以前是,你可以使用两个手指在一个iframe内滚动,但这不工作了。
更新:iOS 6打破了这个解决方案为我们。我一直在试图得到一个新的解决方案,但没有什么工作了。此外,它不再可能调试设备上的javascript,因为他们引入了远程Web检查器,这需要一个Mac使用。