Dynamic Scaling Of iFrame Contents as frame changes

问题

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

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>

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

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.

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.

Thank you in advance for any help.

回答1:

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!

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>

来源：https://stackoverflow.com/questions/35814138/dynamic-scaling-of-iframe-contents-as-frame-changes

标签

javascript

html

css

iframe