locked
make iframe height dynamic based on content inside- RRS feed

  • Question

  • User-1634604574 posted

    i want to show content inside that iframe full height

                                $('#div_footer').append("<object style='display:none;height:100%' class='ob_footer'><iframe class='iframe_3 ' height='100%' width='100%' style='overflow:hidden;height:100%;width:100%;border:none;white-space:nowrap'  allowfullscreen scrolling='no'  src='" + domain_footer + "' type='text/html' ></iframe></object>");
    

    Wednesday, June 17, 2020 6:57 PM

All replies

  • User-474980206 posted

    you need to use javascript. if the content is static, you can use the iframe on load event, to get the size of its inner document, then update its size.  the content must be the same site or security will block. if its not static you will need to poll the inner doc height, or move the javascript to the iframe document and have it catch resize events.

    Wednesday, June 17, 2020 7:59 PM
  • User-1634604574 posted

    the content is dynamic can you explain by code?

    Thursday, June 18, 2020 7:03 AM
  • User1535942433 posted

    Hi zhyanadil.it@gmail.com,

    Accroding to your description,I suggest you could do this:

    Replace:

     $('#div_footer').append("<object style='display:none;height:100%' class='ob_footer'><iframe class='iframe_3 '  height='100%' width='100%' style='overflow:hidden;height:100%;width:100%;border:none;white-space:nowrap'  allowfullscreen scrolling='no'  src='" + domain_footer + "' type='text/html' ></iframe></object>");

    To:

    $("#div_footer").append("<object style='height:100%' class='ob_footer'><iframe class='iframe_3 ' height='100%' frameborder='0'; width='100%' style='overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;;top:0px;left:0px;right:0px;bottom:0px'; allowfullscreen scrolling='no'  src='2160665.aspx' type='text/html' ></iframe></object>");

    Best regards,

    Yijing Sun

    Thursday, June 18, 2020 7:08 AM