0

Trying to adjust the frame height to fit the loading content.

HTML

<iframe src="forum/viewforum.php?f=6" width="100%" frameborder="0" 
scrolling="no" onload="resizeIframe(this)"></iframe>

JS

  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }

How can I stop the function from running until everything is loaded. I tried: 

document.addEventListener('DOMContentLoaded', function() {

  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }

}, false);

and

$(document).ready(function(){

  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }

});

but it does not work. Any suggestions?

  • `function resizeIframe(obj)....` call `resizeIframe(document.iframe)` – alessandrio Nov 06 '18 at 21:16
  • Look at https://stackoverflow.com/q/24157940/5247200 – David Nov 06 '18 at 21:43
  • resizeIframe(document.iframe) did not work either. Can you write the complete function please since I might be writing it wrongly. I am replacing obj with iframe –  Nov 07 '18 at 11:31
  • Couldn't find anything that solved the issue from this post https://stackoverflow.com/q/24157940/5247200 –  Nov 07 '18 at 11:32

1 Answers1

0

You can try this:

(function () {

    function setSize() {
      var frame = document.getElementById("iframe");
      frame.style.height = frame.contentWindow.document.body.offsetHeight + 'px';
    }
    
    window.addEventListener('load', setSize, false )


}) ();
    <iframe src="content.html" id="iframe" scrolling="no" frameborder="0"></iframe>
Jorge Cavaleiro Dias
  • 311
  • 1
  • 7
  • This also suffers from the same problem. Can you please have a look yourself for a better understanding of the problem. Please follow this link https://www.outzeal.com/forum-scubadiving-2.php then click on "photos and videos" then click on the first video (Octopus Eggs) or second video (Removing Fishing Hooks) and see that the lower half of the video is blocked out of display due to frame not adjusting its height. This function blocks out more than the one which I was using. –  Nov 07 '18 at 11:27
  • Do you need to set the iframe width? It seems that removing that attribute, allows the video to maintain its proportions and showing completely. – Jorge Cavaleiro Dias Nov 07 '18 at 18:19
  • yes, otherwise the page cuts off horizontally and all contents are not visible. Moreover the video still does not show completely thought it is better than before. –  Nov 08 '18 at 07:02