帧变化时 iFrame 内容的动态缩放

Question

我正在使用最初以 1920x1080 呈现的仪表板（带有一系列控件和图表/图形的背景图像）。需要在 iFrame 的内容中查看此仪表板（以便可以将其嵌入到 3rd 方门户页面中）。

现在，在具有 iFrame 的 HTML 文档上（取决于客户端使用的分辨率），我正在使用以下代码：

<style>
#wrapper { width: 1440px; height: 910px; padding: 0; overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto; }
#scaled-frame { width: 1930px; height: 1200px; border: 0px; }
#scaled-frame {
zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
#scaled-frame  { zoom: 1;  }
}
</style>
<div id="wrapper"><iframe id="http://url-to-iFramepage.html"></iframe></div>

我为不同的分辨率保留了这个文件的许多不同的迭代（为更低的分辨率缩放越来越多），所以当用户想要将仪表板嵌入到他们的门户页面中时，我将它们引用到适当的 .html 文件（每个文件都有不同的缩放设置）。

有没有办法以更动态的方式执行上述缩放类型？在理想情况下，根据 iFrame 大小，缩放因子会自动调整。解决方案是 css 还是 javascript 或其他什么都没有关系……如果我能让它工作，它会省去很多麻烦。

我查看了大量不同的帖子（这给了我正在使用的初始代码，但我似乎无法获得任何建议的动态方法来处理这些内容。我也不是很方便使用 HTML 和 JavaScript，所以答案可能很容易获得，但我只是没有看到它。

提前感谢您的帮助。

Answer 1

我构建了一个小 javascript，用于在我的网站中自动缩放多个 iframe，包括一个侧边栏小部件。我已经根据您的情况对其进行了一些调整，并添加了一些 cmets。如果在一个文档中多次使用它，那么包装器必须是基于类的！

简单地设置你的包装器的样式，框架应该跟随。我确实评论了我自己的脚本，没有将宽度设置为 100%，而是使用 auto 代替。不记得那是什么，也许只是与我自己的网站有关。另请注意，iframe 和包装器之间的边距/填充可能会导致计算错误。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(function() {
    $("#wrapper").each(function() {
        var $wrap = $(this);
        function iframeScaler(){
            var wrapWidth = $wrap.width(); // width of the wrapper
            var wrapHeight = $wrap.height();
            var childWidth = $wrap.children("iframe").width(); // width of child iframe
            var childHeight = $wrap.children("iframe").height(); // child height
            var wScale = wrapWidth / childWidth;
            var hScale = wrapHeight / childHeight;
            var scale = Math.min(wScale,hScale);  // get the lowest ratio
            $wrap.children("iframe").css({"transform": "scale("+scale+")", "transform-origin": "left top" });  // set scale
        };
        $(window).on("resize", iframeScaler);
        $(document).ready( iframeScaler);
    });
});
</script>