如何在移动Safari浏览器中正确显示iFrame
我试图在我的移动Web应用程序中显示一个iframe，但我无法将iframe的大小限制在iPhone屏幕的大小。 iframe元素的高度和宽度属性似乎没有效果，奇怪。 用div围着它来限制它，但是我无法在iframe中滚动。
有没有人在移动Safari浏览器中处理内嵌框架？ 任何想法从哪里开始？
是啊，你不能用高度和宽度限制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中滚动，但是这不工作了。
更新：iOS 6为我们打破了这个解决scheme。 我一直在试图得到一个新的修复，但没有任何工作。 另外，由于他们引入了Remote Web Inspector，因此不再需要在设备上debuggingJavaScript，因为它需要Mac才能使用。
如果iFrame内容不是你的，那么下面的解决scheme将不起作用。
使用Android，您只需要用DIV包围iframe，并将div的高度设置为document.documentElement.clientHeight。 然而，IOS是一种不同的动物。 虽然我还没有尝试过沙龙的解决scheme，但它似乎是一个很好的解决scheme。 我find了一个更简单的解决scheme，但它只适用于IOS 5 +。
用DIV（让我们称之为滚动条）环绕你的iframe元素，设置DIV的高度，并确保新的DIV具有以下样式：
$('#scroller').css({'overflow' : 'auto', '-webkit-overflow-scrolling' : 'touch'});
只有这一点，但您会注意到，在大多数实现中，滚动时iframe中的内容变为空白，基本上变得毫无用处。 我的理解是，这种行为早在iOS5.0就已经被报告为苹果的一个漏洞。 为了解决这个问题，在iframe中findbody元素并添加-webkit-transform，translate3d（0,0,0），如下所示：
$('#contentIframe').contents().find('body').css('-webkit-transform', 'translate3d(0, 0, 0)');
如果您的应用程序或iframe在内存使用方面非常沉重，您可能会遇到一个滚动问题，您可能需要使用Sharon的解决scheme。
这只适用于你控制外部页面和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变成一个可滚动的节点。
我已经把@ Sharon的代码放到了下面，在iPad上用双指滚动的方式为我工作。 你唯一需要改变的是iframe的src属性（我使用了PDF文档）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pdf Scrolling in mobile Safari</title> </head> <body> <div id="scroller" style="height: 400px; width: 100%; overflow: auto;"> <iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/testdocument.pdf" /> </div> <script type="text/javascript"> 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); </script> </body> </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>
我正在build立我的第一个网站，这帮助我得到这个工作的所有网站，我使用iframe embededding。
谢谢！
沙龙的方法为我工作，但是当iframe中的链接被按下，然后按下浏览器后退button时，页面的caching版本被加载，iframe不再可滚动。 为了克服这个问题，我使用了一些代码来刷新页面，如下所示：
if ('ontouchstart' in document.documentElement) { document.getElementById('Scrolling').src = document.getElementById('SCrolling').src; }
解决方法是在iframe上使用Scrolling="no" 。
而已。
我实现了以下，它运作良好。 基本上，我根据iFrame内容的大小来设置主体尺寸。 这意味着我们的非iFrame菜单可以滚动屏幕，否则，这使得我们的网站与iPad和iPhonefunction。 “工作箱”是我们的iFrame的ID。
// Configure for scrolling peculiarities of iPad and iPhone if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1) { document.body.style.width = "100%"; document.body.style.height = "100%"; $("#workbox").load(function (){ // Wait until iFrame content is loaded before checking dimensions of the content iframeWidth = $("#workbox").contents().width(); if (iframeWidth > 400) document.body.style.width = (iframeWidth + 182) + 'px'; iframeHeight = $("#workbox").contents().height(); if (iframeHeight>200) document.body.style.height = iframeHeight + 'px'; }); }
纯粹使用MSchimpf和艾哈迈德的代码，我做了调整，所以我可以有一个div内的iframe，因此保留页眉和页脚后退button和品牌在我的网页上。 更新的代码：
<script type="text/javascript"> $("#webview").bind('pagebeforeshow', function(event){ $("#iframe").attr('src',cwebview); }); if (navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPad') != -1) { $("#webview-content").css("width","100%"); $("#webview-content").css("height","100%"); $("#iframe").load(function (){ // Wait until iFrame content is loaded before checking dimensions of the content iframeWidth = $("#iframe").contents().width(); if (iframeWidth > 400) $("#webview-content").css("width",(iframeWidth + 182) + 'px'); iframeHeight = $("#iframe").contents().height(); if (iframeHeight>200) $("#webview-content").css("height",iframeHeight + 'px'); }); } </script>
和HTML
<div class="header" data-role="header" data-position="fixed"> </div> <div id="webview-content" data-role="content" style="height:380px;"> <iframe id="iframe"></iframe> </div><!-- /content --> <div class="footer" data-role="footer" data-position="fixed"> </div><!-- /footer -->
不要滚动IFrame页面或其内容，滚动父页面。 如果您控制IFrame内容，则可以使用iframe调整器库将iframe元素自身转换为具有自然/正确/原生高度的适当块级元素。 另外，不要尝试在父页面中定位（固定，绝对）iframe，或者在模式窗口中显示iframe，尤其是在具有表单元素的情况下。
我也怀疑，iOS Safari有一个非标准的行为，扩大您的iframe的高度，以自然的高度，就像iframe的resizer库将为桌面浏览器，似乎提供响应iframe内容在高度0px或150px或其他没有用的默认。 如果您需要禁止宽度，请在iframe中尝试最大宽度的样式。
