Javascript Iframe not getting height calculated correctly

Question

I am trying to display my iframe on any website like this one HERE but for some reason the height is not calculated correctly. I get 8px on the style tag instead of 1000+ to display correctly that block.

<iframe id="iframe" allowtransparency="true" frameborder="0" style="width:100%; border:none" scrolling="no" src="http://newskillsacademy.co.uk/affiliates/iframe.php?&products_ids[]=55072&products_ids[]=51883&products_ids[]=49321&products_ids[]=48561&products_ids[]=48398&products_ids[]=46469&products_ids[]=44080&products_ids[]=43167&products_ids[]=42427&products_ids[]=41068&columns=3&aff_id=3"></iframe>
<script>
    var frame = document.getElementById('iframe');
    frame.style.height = 0; 
    frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px'; 
</script>

@mplungjan issue is that it's like an iframe generator and needs to be placed on a second domain, the user places it, but I get also a cross browsing blocking, and not sure how to implement the solutions from here. — Adrian, May 25 '17 at 16:42

Sᴀᴍ Onᴇᴌᴀ · Answer 1 · 2017-05-25T16:03:46.583

2

The line that sets the height (i.e. frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px';) is likely run before the contents of the iframe have loaded. Thus in order to set the height properly, that code must be executed after the contents of the iframe have loaded.

One way to do this is to assign the onload property to a function containing the code to set the height property:

var frame = document.getElementById('iframe');
frame.onload = function() {
  frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px'; 
}

See this demonstrated here.

Also, the code attempts to fetch the iframe from the DOM as soon as the javascript executes. Depending on the location of the script tag/file (e.g. loaded via <head> or <body>) the DOM may not be ready. One solution to this is waiting for the DOMContentLoaded event. This can be achieved using EventTarget.addEventListener() on document.

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed");
  });

And because you initially tagged the question with jQuery, the .ready() method provides a shortcut to this.

$(document).ready(function(event) {
  console.log("DOM is safe to manipulate");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

edited May 25 '17 at 16:03

answered May 25 '17 at 15:52

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

Help appreciated, but http://be-a.co.uk/testframe.html it's now loading half and also get a cross-browser error which I searched on here, but don't understand how to implement it in my code. Note the iframe is on a different domain. – Adrian May 25 '17 at 16:06
Do you have control over both domains? Refer to [this answer](https://stackoverflow.com/a/9393545/1575353) about a possible solution... – Sᴀᴍ Onᴇᴌᴀ May 25 '17 at 16:08
On the second domain won't have control (in this case I have), it's like a banner which the user generates and places on his site. – Adrian May 25 '17 at 16:11
Trying to understand how to integrate my current javascript code on the iframe, but not sure where to place them. – Adrian May 25 '17 at 16:29
Hmm well the iframe might not be the best solution. While this may be a bit of a hack, one possible approach is to use a server-side script (e.g. with PHP, python, RoR, c#, etc.) to pull in the contents from that URL (e.g. using cURL or a similar functions) and then return that HTML which could be altered... – Sᴀᴍ Onᴇᴌᴀ May 25 '17 at 17:51
And Could you help me based on my javascript code how to integrate it with this https://stackoverflow.com/questions/9393532/cross-domain-iframe-issue/9393545#9393545. I am strugeling for hours. – Adrian May 25 '17 at 19:21
If you have another question, please [post another question](https://stackoverflow.com/questions/ask). – Sᴀᴍ Onᴇᴌᴀ May 25 '17 at 20:35

Javascript Iframe not getting height calculated correctly

1 Answers1