作为框架更改的iFrame内容的动态缩放

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和wrapper之间的边距/填充可能导致错误计算。

<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>