我正在尝试在我的移动网络应用程序中显示iframe，但我无法将iframe的大小限制为iPhone屏幕的尺寸。 iframe元素的高度和宽度属性似乎没有任何影响，奇怪的是。用div围绕它设法约束它，但是我无法在iframe中滚动。
之前有没有人在移动游猎中解决过iframe？任何想法从哪里开始？
答案 0 :(得分：20)
是的，你不能用高度和宽度约束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为我们打破了这个解决方案。 我一直试图为它获得一个新的解决方案，但还没有任何工作。此外，由于他们引入了远程Web检查器，因此无法再在设备上调试javascript，这需要使用Mac。
答案 1 :(得分：11)
如果iFrame内容不是你的，那么下面的解决方案将无效。
使用Android，你需要做的就是用DIV包围iframe并将div的高度设置为document.documentElement.clientHeight。然而，IOS是一种不同的动物。虽然我还没有尝试过Sharon的解决方案，但它看起来确实是一个很好的解决方案。我确实找到了一个更简单的解决方案，但它只适用于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解决方案的故障滚动。
答案 2 :(得分：10)
仅当您同时控制外部页面和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转换为可滚动的节点。
答案 3 :(得分：4)
我已将@ 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>
答案 4 :(得分：3)
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" src="url" />
</div>
我正在构建我的第一个网站，这有助于我使用iframe嵌入的所有网站。
谢谢！
答案 5 :(得分：1)
Sharon的方法适用于我，但是当跟随iframe中的链接然后按下浏览器后退按钮时，将加载页面的缓存版本并且iframe不再可滚动。为了解决这个问题，我使用了一些代码来刷新页面，如下所示：
if ('ontouchstart' in document.documentElement)
{
document.getElementById('Scrolling').src = document.getElementById('SCrolling').src;
}
答案 6 :(得分：0)
我实现了以下功能，效果很好。基本上，我根据iFrame内容的大小设置了主体尺寸。这意味着我们的非iFrame菜单可以在屏幕上滚动，但除此之外，这使我们的网站可以在iPad和iPhone上运行。 “workbox”是我们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';
});
}
答案 7 :(得分：0)
纯粹使用MSchimpf和Ahmad的代码，我做了调整，所以我可以在div中使用iframe，因此在我的页面上保留页眉和页脚的后退按钮和品牌。更新的代码：
<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 -->
答案 8 :(得分：0)
不要滚动IFrame页面或其内容，滚动父页面。如果您控制IFrame内容，则可以使用iframe-resizer库将iframe元素本身转换为适当的块级元素，具有自然/正确/原生高度。另外，不要尝试在父页面中定位（固定，绝对）iframe，或在模态窗口中显示iframe，尤其是如果它具有表单元素。
我还怀疑iOS Safari有一个非标准的行为，可以将你的iframe的高度扩展到它的自然高度，就像iframe-resizer库会为桌面浏览器做的那样，它似乎在高度为0px或150px时呈现响应的iframe内容或其他一些没用的默认值。如果您需要限制宽度，请在iframe中尝试最大宽度样式。
答案 9 :(得分：-1)
解决方案是在iframe上使用Scrolling="no"。
就是这样。