make iframe height dynamic based on content inside- JQUERY/Javascript

前端 未结 20 1977
情书的邮戳
情书的邮戳 2020-11-22 07:42

I am loading an aspx web page in an iframe. The content in the Iframe can be of more height than the iframe\'s height. The iframe should not have scroll bars.

I have

相关标签:
20条回答
  • 2020-11-22 07:51

    You can retrieve the height of the IFRAME's content by using: contentWindow.document.body.scrollHeight

    After the IFRAME is loaded, you can then change the height by doing the following:

    <script type="text/javascript">
      function iframeLoaded() {
          var iFrameID = document.getElementById('idIframe');
          if(iFrameID) {
                // here you can make the height, I delete it first, then I make it again
                iFrameID.height = "";
                iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
          }   
      }
    </script>   
    

    Then, on the IFRAME tag, you hook up the handler like this:

    <iframe id="idIframe" onload="iframeLoaded()" ...
    

    I had a situation a while ago where I additionally needed to call iframeLoaded from the IFRAME itself after a form-submission occurred within. You can accomplish that by doing the following within the IFRAME's content scripts:

    parent.iframeLoaded();
    
    0 讨论(0)
  • 2020-11-22 07:51

    Other answers were not working for me so i did some changes. Hope this will help

    $('#iframe').on("load", function() {
        var iframe = $(window.top.document).find("#iframe");
        iframe.height(iframe[0].ownerDocument.body.scrollHeight+'px' );
    });
    
    0 讨论(0)
  • 2020-11-22 07:51

    I am using jQuery and the code below working for me,

    var iframe = $(window.top.document).find("#iframe_id_here");
    iframe.height(iframe.contents().height()+'px' );
    
    0 讨论(0)
  • 2020-11-22 07:52

    just make iframe container position:absolute and iframe will automatically change its height according to its content

    <style>
       .iframe-container {
           display: block;
           position: absolute;
           /*change position as you need*/
           bottom: 0;
           left: 0;
           right: 0;
           top: 0;
       }
       iframe {
           margin: 0;
           padding: 0;
           border: 0;
           width: 100%;
           background-color: #fff;
       }
     </style>
     <div class="iframe-container">
         <iframe src="http://iframesourcepage"></iframe>
     </div>
    
    0 讨论(0)
  • 2020-11-22 07:52

    To add to the chunk of window that seems to cut off at the bottom, especially when you don't have scrolling I used:

    function resizeIframe(iframe) {
        var addHeight = 20; //or whatever size is being cut off
        iframe.height = iframe.contentWindow.document.body.scrollHeight + addHeight + "px";
      }
    
    0 讨论(0)
  • 2020-11-22 07:56
    $(document).height() // - $('body').offset().top
    

    and / or

    $(window).height()
    

    See Stack Overflow question How to get the height of a body element.

    Try this to find the height of the body in jQuery:

    if $("body").height()
    

    It doesn't have a value if Firebug. Perhaps that's the problem.

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