Question

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

现在，在具有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或其他任何问题都无关紧要......如果我能够解决这个问题，那么它可以省去很多麻烦。

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

提前感谢您的帮助。

Answer 1

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

简单地为您的包装纸设计样式，框架应该遵循。我确实评论了我自己的脚本，没有将宽度设置为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>

动态缩放iFrame内容作为帧更改

1 个答案: