Динамическое масштабирование iFrame Содержание в качестве изменений кадра

Question

Я работаю с панелью управления (фоновое изображение с серией элементов управления и диаграмм/графиков), которая была первоначально представлена ​​в формате 1920x1080. Эта панель мониторинга должна быть просмотрена в содержимом iFrame (чтобы ее можно было встроить в страницу стороннего портала).

Rigth теперь на HTML документ, который имеет IFrame (в зависимости от того, какое разрешение клиент использует), я использую следующий код:

<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. Не помните, что это было, возможно, просто связано с моим собственным сайтом. Также имейте в виду, что margin/padding между 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>