随着框架的变化动态缩放iFrame内容 [英] Dynamic Scaling Of iFrame Contents as frame changes

问题描述

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

I am working with a dashboard (background image with a series of controls and charts/graphs) that was originally rendered at 1920x1080. This dashboard needs to be viewed within the contents of an iFrame (so that it can be embedded into 3rd party portal page).

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

Rigth now, on the HTML doc that has the iFrame (depending on what resolution a client is using), I am using the following code:

<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文件(每个文件的缩放比例设置都不同.

I keep a number of different iterations of this file for various resolutions (scaling more and more for lower resolutions), so when a user wants to embed the dashboard into their portal page, I refer them to the appropriate .html file (each file having different scaling settings).

有没有办法以更动态的方式执行上述缩放类型?在理想情况下，取决于iFrame的大小，缩放因子会自动调整.解决方案是css还是javascript或其他任何东西都没关系...如果我能使它正常工作，那将省去很多麻烦.

Is there any way to perform the type of scaling above in a more dynamic way? In a perfect world, depending on the iFrame size, the scaling factors would automatically adjust. It doesn't matter if the solution is css or javascript or whatever...if I can get that to work, it would save a lot of headaches.

我看了很多不同的文章(这给了我我正在使用的初始代码，但是我似乎无法获得任何建议的动态方法来处理此内容.我也不是很方便使用HTML和JavaScript，因此答案很容易就可以得到，但我只是看不到.

I have looked at a TON of different posts (which gave me the initial code I'm using, but I can't seem to get any of the suggested dynamic methods to work with this content. I am also not very handy with HTML and JavaScript, so an answer may well be readily available but I just don't see it.

在此先感谢您的帮助.

推荐答案

我构建了一个小JavaScript，用于在我的网站上自动缩放多个iframe(包括侧边栏小部件).我已针对您的情况进行了一些调整，并添加了一些评论.如果在文档中多次使用此包装，则包装器必须基于类！

I built a little javascript that I'm using in my website to autoscale multiple iframes, including a sidebar widget. I have adjusted it a bit to your case and added some comments. If using this multiple times in a document then the wrappers must be class based!

只需对包装器进行样式设置，然后框架就可以了.我确实评论了自己的脚本，未将宽度设置为100％，而是使用了auto.不要记得那件事，也许只是与我自己的网站有关.另外请注意，iframe和包装器之间的边距/填充可能会导致计算错误.

Simply style your wrapper and the frame should follow. I did comment my own script to not set width to 100%, but use auto instead. Don't recall what that was about, maybe just related to my own website. Also be aware that margin/padding between iframe and wrapper may cause miscalculations.

<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内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！