it-swarm.asia

如何在移动野生动物园中正确显示iFrame

我正在尝试在我的移动网络应用程序中显示iframe,但是我无法将iframe的大小限制为iPhone屏幕的尺寸。 iframe元素的高度和宽度属性似乎没有任何影响,奇怪的是。用div围绕它会设法限制它,但是我无法在iframe中滚动。

之前有没有人在移动游猎中解决过iframe?任何想法从哪里开始?

53
Matt Diamond

是的,你不能用高度和宽度约束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。

20
Case

如果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的解决方案。

11
Tmac

这仅在您控制外部页面和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变成一个可滚动的节点。

10
Kernel James

我把@ 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
Eric Pohl
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" src="url" />
</div>

我正在建立我的第一个网站,这有助于我使用iframe嵌入的所有网站。

谢谢!

3
Krossyomind

Sharon的方法适用于我,但是当跟随iframe中的链接然后按下浏览器后退按钮时,将加载页面的缓存版本并且iframe不再可滚动。为了解决这个问题,我使用了一些代码来刷新页面,如下所示:

if ('ontouchstart' in document.documentElement)
     {
        document.getElementById('Scrolling').src = document.getElementById('SCrolling').src;
    }
1
Phil Green

不要滚动IFrame页面或其内容,滚动父页面。如果您控制IFrame内容,则可以使用 iframe-resizer library将iframe元素本身转换为具有自然/正确/原生高度的正确块级元素。此外,不要尝试在父页面中定位(固定,绝对)iframe,或在模态窗口中显示iframe,尤其是如果它具有表单元素。

我还怀疑iOS Safari有一个非标准的行为,可以将你的iframe的高度扩展到它的自然高度,就像iframe-resizer库会为桌面浏览器做的那样,它似乎可以呈现高度为0px或150px的响应iframe内容或其他一些没有用的默认值。如果您需要禁用宽度,请在iframe中尝试最大宽度样式。

0
spaceRace

我实现了以下,它运作良好。基本上,我根据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';
     });
}
0
MSchimpf

纯粹使用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 -->   
0
dgig