Get iframe content height in Google Chrome

Question

can anyone help me to do this code works on Google Chrome? It work's perfectly on IE.

Thanks.

<!doctype html>
<html>
<head>
  <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
  <script>
    function calcIframeSize() {
      var altura = $("body", $("#frameExtraFields").contents()).height();
      $("#frameExtraFields").height(altura);
    }
    $(document).ready(function() {
      $("#frameExtraFields").ready( function() {
        calcIframeSize();
      });
    });
  </script>
</head>
<body>

<iframe src="frame.html" width="80%" height="600" id="frameExtraFields"></iframe>

</body>
</html>

See [this question](http://stackoverflow.com/questions/153152/resizing-an-iframe-based-on-content?rq=1) — Michael P. Bazos, Mar 03 '15 at 21:26
Your problem comes from `$("#frameExtraFields").ready` which does not mean that the document inside the iframe is loaded. — Michael P. Bazos, Mar 03 '15 at 22:54
I've tried to change the ready event to load event, but didn't work. Only in Chrome and Firefox doesn't work. In IE it works properly. — Guilherme Wunsch, Mar 04 '15 at 17:03

Michael P. Bazos · Answer 1 · 2015-03-03T22:59:53.283

2

Considering that your iframe loads a src on the same domain, the following should do it :

<script>
    $(document).ready(function() {
        $('#frameExtraFields').load(function() {
            $(this).height($(this).contents().height());
        });
    });
</script>

<iframe src="/user/login/" width="80%" height="auto" id="frameExtraFields"></iframe>

Notice I removed the fixed height you set on the iframe element and setted it to auto instead.

See this fiddle

edited Mar 03 '15 at 22:59

answered Mar 03 '15 at 22:47

Michael P. Bazos

21,340
5
58
60

I had already tested it before, but it did not work. ` ` – Guilherme Wunsch Mar 04 '15 at 12:57

score 1 · Answer 2 · answered Jun 22 '17 at 09:36

Solution:

I do use the below code for all browser which specifically look for chrome:

The .offsetHeight returns same value in chrome compared with .scrollHeight in rest of the browsers.

var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

if (document.getElementById) {
    newheight = isChrome 
    ? document.getElementById(id).contentWindow.document.body.offsetHeight 
    : document.getElementById(id).contentWindow.document.body.scrollHeight;
}

Complete function to resize the iframe height:

function autoResize(id) //id = iframe-id
{
    var newheight = 500;
    var newwidth;

    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);

    if (document.getElementById) {
        newheight = isChrome ? document.getElementById(id).contentWindow.document.body.offsetHeight : document.getElementById(id).contentWindow.document.body.scrollHeight;

        newheightVisible = newheight + 30; //Don't ask me why this, i am also wondering but it works
    }

    if (newheight != lastheight) {
        jQuery("#" + id).css('height', newheightVisible);
        lastheight = newheightVisible;
    }
}

Get iframe content height in Google Chrome

2 Answers2