如何使用浏览器的滚动条滚动 iframe 的内容？答案

【问题标题】：How to scroll the content of an iframe using the browser's scroll bar?如何使用浏览器的滚动条滚动 iframe 的内容？
【发布时间】：2015-06-08 19:21:56
【问题描述】：

我创建了一个包含 iframe 的网页。我想使用浏览器滚动条滚动 iframe 内容。这是我的代码：

<html>
    <head>
        <script src = "jquery-2.1.4.min.js">
        </script>
        <script src = "iframe.js">
        </script>
        <style>
            button{
                position : relative;
            }
        </style>
    </head>
    <body>
        <div class = "frame">
            <iframe src = 'demo.html' id = "sd" frameBorder='0' scrolling = "no" height = "100%" width = '100%'>
            </iframe>
        </div>
            <button id ="zoomIn">
                zoom in
            </button>
    </body>
</html>

单击zoomIn 按钮时，我希望 iframe 内的内容增加其大小。 iframe 中不应有任何滚动条，但滚动应由浏览器完成。

【问题讨论】：

标签： javascript jquery html css iframe

【解决方案1】：

<iframe src = 'demo.html' id ='sd' frameBorder='0' scrolling = 'no' height = '100%' width = '100%'>

在你的 CSS 中

iframe { overflow:hidden; }

【讨论】：

【解决方案2】：

在缩放时使用浏览器滚动条滚动 iframe 内容的一种方法是获取 iframe 内容的高度和宽度，并相应地更改 iframe 和父正文的高度。以下是代码

$("document").ready(function(){
$("#zoomIn").click(function(){
    var zoomValue = 5;
    css = 'transform: scale(' + zoomValue+ ');';
    css += '-webkit-transform: scale(' + zoomValue + ');';
    css += '-moz-transform: scale(' + zoomValue + '); ';
    css += '-o-transform: scale(' + zoomValue  + ');';
    css += 'transform-origin: left top;';
    css += '-webkit-transform-origin: left top;';
    css += '-moz-transform-origin: left top; ';
    css += '-ms-transform-origin: left top;';
    var innerBody = $("iframe").contents().find("body");
    innerBody.attr({style:css});
    $("body").css({
        'height': innerBody[0].getBoundingClientRect().height + 'px',
        'width': innerBody[0].getBoundingClientRect().width + 'px'
    });
    $("iframe").css({
        'height': innerBody[0].getBoundingClientRect().height + 'px',
        'width': innerBody[0].getBoundingClientRect().width + 'px'
    });
});

});

【讨论】：