作爲框架更改的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>