Adjust width and height of iframe to fit with content in it

前端 未结 30 2303
旧时难觅i
旧时难觅i 2020-11-22 02:09

I need a solution for auto-adjusting the width and height of an iframe to barely fit its content. The point is that t

相关标签:
30条回答
  • 2020-11-22 02:30

    After I have tried everything on the earth, this really works for me.

    index.html

    <style type="text/css">
    html, body{
      width:100%;
      height:100%;
      overflow:hidden;
      margin:0px;   
    }
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    function autoResize(iframe) {
        $(iframe).height($(iframe).contents().find('html').height());
    }
    </script>
    
    <iframe src="http://iframe.domain.com" width="100%" height="100%" marginheight="0" frameborder="0" border="0" scrolling="auto" onload="autoResize(this);"></iframe>
    
    0 讨论(0)
  • 2020-11-22 02:30
    function resizeIFrameToFitContent(frame) {
    if (frame == null) {
        return true;
    }
    
    var docEl = null;
    var isFirefox = navigator.userAgent.search("Firefox") >= 0;
    
    if (isFirefox && frame.contentDocument != null) {
        docEl = frame.contentDocument.documentElement;
    } else if (frame.contentWindow != null) {
        docEl = frame.contentWindow.document.body;
    }
    
    if (docEl == null) {
        return;
    }
    
    var maxWidth = docEl.scrollWidth;
    var maxHeight = (isFirefox ? (docEl.offsetHeight + 15) : (docEl.scrollHeight + 45));
    
    frame.width = maxWidth;
    frame.height = maxHeight;
    frame.style.width = frame.width + "px";
    frame.style.height = frame.height + "px";
    if (maxHeight > 20) {
        frame.height = maxHeight;
        frame.style.height = frame.height + "px";
    } else {
        frame.style.height = "100%";
    }
    
    if (maxWidth > 0) {
        frame.width = maxWidth;
        frame.style.width = frame.width + "px";
    } else {
        frame.style.width = "100%";
    }
    }
    

    ifram style:

    .myIFrameStyle {
       float: left;
       clear: both;
       width: 100%;
       height: 200px;
       padding: 5px;
       margin: 0px;
       border: 1px solid gray;
       overflow: hidden;
    }
    

    iframe tag:

    <iframe id="myIframe" src="" class="myIFrameStyle"> </iframe>
    

    Script tag:

    <script type="text/javascript">
       $(document).ready(function () {
          $('myIFrame').load(function () {
             resizeIFrameToFitContent(this);
          });
        });
    </script>
    
    0 讨论(0)
  • 2020-11-22 02:31

    If the iframe content is from the same domain this should work great. It does require jQuery though.

    $('#iframe_id').load(function () {
        $(this).height($(this).contents().height());
        $(this).width($(this).contents().width());
    });
    

    To have it resize dynamically you could do this:

    <script language="javaScript">
    <!--
    function autoResize(){
        $('#themeframe').height($('#themeframe').contents().height());
    }
    //-->
    </script>
    <iframe id="themeframe" onLoad="autoResize();" marginheight="0" frameborder="0" src="URL"></iframe>
    

    Then on the page that the iframe loads add this:

    <script language="javaScript">
    function resize()
    {
        window.parent.autoResize();
    }
    
    $(window).on('resize', resize);
    </script>
    
    0 讨论(0)
  • 2020-11-22 02:34

    This is a solid proof solution

    function resizer(id)
    {
    
    var doc=document.getElementById(id).contentWindow.document;
    var body_ = doc.body, html_ = doc.documentElement;
    
    var height = Math.max( body_.scrollHeight, body_.offsetHeight, html_.clientHeight, html_.scrollHeight, html_.offsetHeight );
    var width  = Math.max( body_.scrollWidth, body_.offsetWidth, html_.clientWidth, html_.scrollWidth, html_.offsetWidth );
    
    document.getElementById(id).style.height=height;
    document.getElementById(id).style.width=width;
    
    }
    

    the html

    <IFRAME SRC="blah.php" id="iframe1"  onLoad="resizer('iframe1');"></iframe>
    
    0 讨论(0)
  • 2020-11-22 02:35

    I figured out another solution after some experimenting. I originally tried the code marked as 'best answer' to this question and it didn't work. My guess is because my iframe in my program at the time was dynamically generated. Here is the code I used (it worked for me):

    Javascript inside the iframe that is being loaded:

    window.onload = function()
        {
            parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
            parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
        };
    

    It is necessary to add 4 or more pixels to the height to remove scroll bars (some weird bug/effect of iframes). The width is even stranger, you are safe to add 18px to the width of the body. Also make sure that you have the css for the iframe body applied (below).

    html, body {
       margin:0;
       padding:0;
       display:table;
    }
    
    iframe {
       border:0;
       padding:0;
       margin:0;
    }
    

    Here is the html for the iframe:

    <iframe id="fileUploadIframe" src="php/upload/singleUpload.html"></iframe>
    

    Here is all the code within my iframe:

    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8">
        <title>File Upload</title>
        <style type="text/css">
        html, body {
            margin:0;
            padding:0;
            display:table;
        }
        </style>
        <script type="text/javascript">
        window.onload = function()
        {
            parent.document.getElementById('fileUploadIframe').style.height = document.body.clientHeight+5+'px';
            parent.document.getElementById('fileUploadIframe').style.width = document.body.clientWidth+18+'px';
        };
        </script>
    </head>
    <body>
        This is a test.<br>
        testing
    </body>
    </html>
    

    I have done testing in chrome and a little in firefox (in windows xp). I still have more testing to do, so please tell me how this works for you.

    0 讨论(0)
  • 2020-11-22 02:35

    For angularjs directive attribute:

    G.directive ( 'previewIframe', function () {
    return {
        restrict : 'A',
        replace : true,
        scope : true,
        link : function ( scope, elem, attrs ) {
            elem.on ( 'load', function ( e ) {
                var currentH = this.contentWindow.document.body.scrollHeight;
                this.style.height = eval( currentH ) + ( (25 / 100)* eval( currentH ) ) + 'px';
            } );
        }
    };
    } );
    

    Notice the percentage, i inserted it so that you can counter scaling usually done for iframe, text, ads etc, simply put 0 if no scaling is implementation

    0 讨论(0)
提交回复
热议问题