1

How do I adjust the height of an iframe according to the height of its content? I have read other answers in stackoverflow. But those answers were not working for me. I have 3 iframes in index.html. I want to adjust the height of the second iframe whose id is myIframe. This is my index.html (The code works in internet explorer but not in chrome and firefox):

<!DOCTYPE html>

<html>

<body>

<div style="display: flex; flex-direction: column; align-items: stretch;">

<iframe src="header.html" scrolling="no" style="width: 100%;border: 0; 
height:50px"></iframe>


<iframe class="" id="myIframe" onload = "changeheight()" 
name="a" scrolling="no" style="border:none; width: 100%; min- 
height:calc(100vh - 115px);"  allowtransparency="true" allowfullscreen>

</iframe>

<iframe src="footer.html" scrolling="no" style="width: 100%;border: 0; 
height:50px;"></iframe>


</div>

<script type='text/javascript'>


function changeheight() {

document.getElementById('myIframe').style.height =
document.getElementById('myIframe').contentWindow.document.body.scrollHeight 
+ 'px';
}

</script>


</body>

</html>

and my header.html is 

<!DOCTYPE html>

<html>

<body>


<header style="padding: 20px; background: pink">

<a target="a" href="about.html">About us</a>
<a target="a" href="contact.html">Contact us</a>

</header>

</body>

</html>

about.html and contact.html contain some dummy data.

I am getting these two errors in chrome in the console - 

index.html:22 Uncaught ReferenceError: changeheight is not defined
at HTMLIFrameElement.onload (index.html:22)

index.html:82 Uncaught DOMException: Blocked a frame with origin "null" from 
accessing a cross-origin frame.

I don't understand why I am getting the first error. I have defined changeheight in javascript.

I don't understand the second error at all.

Boidurja Talukdar
  • 676
  • 2
  • 21
  • 42
  • 1
    If hosted on the same domain, you could access the content with JS, return its height and then set it to the iframe. If external, you will have to use `postMessage`. The question is though, are you intending to make every separate section of your page an iframe? That sounds like a really bad idea - almost like using `frameset` in the nineties. There are much better solutions to compile your page into one and you should try a different tack. Iframes are best for hosting external content, not just bits and parts of your site... – somethinghere Sep 15 '19 at 06:52
  • If hosted on the same domain, you could access the content with JS, return its height and then set it to the iframe. - I did this. I have written the javascript code. But it's not working in chrome and firefox. – Boidurja Talukdar Sep 15 '19 at 07:28
  • I was told to make the header and footer of a website only once. It will be used in all the pages. I was told not to make the header and footer every time I make a new page. – Boidurja Talukdar Sep 15 '19 at 07:35
  • You should access the content window differently depending on the browser: https://stackoverflow.com/questions/926916/how-to-get-the-bodys-content-of-an-iframe-in-javascript - but it might be better to just use a `fetch` call to fetch the contents of your header and footer and then directly add them to your page instead of using iframes. You should also consider accessibility, and all those frames are a mess to navigate to people who are visually impaired and use assistive technology. – somethinghere Sep 15 '19 at 08:08

1 Answers1

1

Two issues

  1. You need move the script above the iframe

  2. You need to actually load some content (add a src="someURL" to the iframe you're trying to use)

see this glitch

gman
  • 100,619
  • 31
  • 269
  • 393
  • It's working in glitch. But not in my computer. In my computer the content of content.html gets cut off at the bottom. – Boidurja Talukdar Sep 15 '19 at 09:10
  • Could there be any css or flexbox solution? – Boidurja Talukdar Sep 15 '19 at 10:27
  • There is no CSS or flexbox solution. The normal solution 99.99% of websites use is a template system that runs either at build time or the server. They include `header.template` and `footer.template` on each page. You could also use client side templating but it will mean anyone blocking JavaScript won't be able to read your page. It's also generally considered bad for SEO, but you can do if you want. [Example](https://glitch.com/~simple-templates) – gman Sep 15 '19 at 15:23