Set Height Css Class After Page Load in JavaScript

Question

I need to set the mainContainer class height to the iframe height on page load. Right now its setting the height BUT its cut. Maybe this code is wrong? const iframeHeight = document.getElementById('productIFrame')[0].contentWindow.document.body.offsetHeight + 'px';

<div class="mainContainer">
    <iframe id="productIFrame" src="https://sample.com" title="" width="100%" height="100%" style="border: none"></iframe>
</div>

<style>
    .mainContainer {
        width: 100%;
    }
</style>

<script type="text/javascript">
    const iframeHeight = document.getElementById('productIFrame').contentWindow.document.body.offsetHeight + 'px';
  document.getElementsByClassName("mainContainer")[0].style.height = iframeHeight;
</script>

What happens when you put the script in the window load event? https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event — Adam, Sep 16 '22 at 12:25
Are you trying to dynamically set the height of the iframe based on the loaded iframe content? If yes, there are many [similar questions](https://stackoverflow.com/search?q=%5Bjavascript%5D+iframe+dynamic+height) that can help. — Yogi, Sep 16 '22 at 13:03
@Yogi. No. I'm trying to set the `mainContainer`'s height based on the iframe height — Joseph, Sep 16 '22 at 13:07

score 1 · Accepted Answer · answered Sep 16 '22 at 14:24

1

QUESTION SOLVED!

Solution would be to add postMessage function in the iframe level. and on the main page, you need to add an event listener and extract the height coming from that and assign it to the mainContainer class.

answered Sep 16 '22 at 14:24

Joseph

7,042
23
83
181

Note that this solution only applies to iframes with cross domain content and assumes one has permissions to add messaging scripts to the other page. There are simpler solutions when the page is in the same domain. See duplicate questions: [How to get height of iframe cross domain](https://stackoverflow.com/questions/8223239/how-to-get-height-of-iframe-cross-domain) and [Adjust width and height of iframe to fit with content in it](https://stackoverflow.com/questions/819416/adjust-width-and-height-of-iframe-to-fit-with-content-in-it) – Yogi Sep 16 '22 at 15:27
@Yogi. Can you help me with my latest question? – Joseph Sep 26 '22 at 11:55

K.Nikita · Answer 2 · 2022-09-16T13:36:51.117

0

Try to run on local

window.addEventListener('load', (event) => {
        const iFrame = document.getElementById('productIFrame');
        iFrame.contentWindow.document.body.style.margin = "0 0 0 0";
        const iframeHeight = iFrame.contentWindow.document.body.scrollHeight + 'px';
        document.getElementsByClassName("mainContainer")[0].style.height = iframeHeight;
    });

html, body {
  margin: 0 !important;
}

.mainContainer {
  width: 100%;
}

<div class="mainContainer">
 <iframe frameborder="0" border="0" cellspacing="0"
        style="border-style: none; margin: 0;" id="productIFrame"  title="" width="100%" height="100%" style="border: none"></iframe>
</div>

edited Sep 16 '22 at 13:36

answered Sep 16 '22 at 12:26

K.Nikita

591
4
10

`SecurityError: Permission denied to access property "document" on cross-origin object` – evolutionxbox Sep 16 '22 at 12:27
yes, but it work – K.Nikita Sep 16 '22 at 12:27
1

Above error is specific to Chrome check here https://stackoverflow.com/a/29984435/4007628 – akash Sep 16 '22 at 12:34
My code works now but I just have to add `[0]`. `document.getElementsByClassName("mainContainer")[0].style.height = iframeHeight;`. Problem is is that its not getting the whole iframe height? Its cut out – Joseph Sep 16 '22 at 12:43
Updated my question – Joseph Sep 16 '22 at 12:45
Try use scrollHeight – K.Nikita Sep 16 '22 at 12:49
Same issue it cuts out – Joseph Sep 16 '22 at 13:00
Do you add margin: 0 !important for html and body? – K.Nikita Sep 16 '22 at 13:04
Same thing :((( – Joseph Sep 16 '22 at 13:16
I did update. What is your browser? – K.Nikita Sep 16 '22 at 13:52

score 0 · Answer 3 · answered Sep 16 '22 at 12:32

You should be able to use the document.readyState method, and fire your logic once page has loaded.

Something like the below may fix it for you.

<script type="text/javascript">
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
        const iframeHeight = document.getElementById('productIFrame').contentWindow.document.body.offsetHeight + 'px';
        document.getElementsByClassName("mainContainer").style.height = iframeHeight;
    }
}

Documentation can be found @ https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState — Ian Craddock, Sep 16 '22 at 12:33

Set Height Css Class After Page Load in JavaScript

3 Answers3