Embedding an iframe when iframe height is variable - html

Question

I have an iframe that has a variable height which is not known in advance.
Currently, if the section in which the iframe loads is too small, the iframe loads with internal scroll bars. If the iframe happens to be a shorter iframe, there is empty space below the iframe before the footer begins.
Is there a solution available to this type of problem?

Answer 1

Well, adding simple JS code to get the iframe content height and setting the container height will do, as suggested by #relief.melone.
Other simple solution that can be of help, as an alternative :
https://github.com/davidjbradshaw/iframe-resizer

Answer 2

In reference to my comment. The first thing you have to solve is your cross origins problem. Most browsers will block requests to other websites if the response does not include the current host in their cross origins allow header. So in your case the header from your request to the iframe contents needs to include the header
Access-Control-Allow-Origin: http://159.89.229.184
and
Access-Control-Allow-Mehtods: GET
Also see https://de.wikipedia.org/wiki/Cross-Origin_Resource_Sharing for more info on this.
Now to the actual solution.
You need to determine the height of your iframes contents and then set the height accordingly. You can do this by adding a javascript function. In your head section add
<script>
const setHeight = (frame) => {
frame.style.height = `${frame.contentWindow.document.body.scrollHeight}px`
}
</script>
and your iframe needs to include the onload event
<iframe ... scrolling="no" onload="setHeight(this)" />
This should solve your problem. But as I mentioned just if you allow the cross origin access. Otherwise you access to the document of frame.contentWindow will get rejected with an error like
VM747:1 Uncaught DOMException: Blocked a frame with origin "http://159.89.229.184" from accessing a cross-origin frame.
I also made an example on glitch to demonstrate how it works (Click on Show to see it in action)
https://glitch.com/edit/#!/iframe-varialbe-height

Answer 3

I had s situation where the height of the iFrame content changed dynamically, and I told the parent frame (containing the iFrame) to change it's height accordingly using postMessage: like this
Parent window:
<section class="module">
<div class="row">
<!-- Content column start -->
<div class="col-sm-12" id="web-version-container">
<iframe id="web-version-frame" src="index.html" allowfullscreen=false frameborder="0" style="width:100%; height:100%;min-height:800px;">
</iframe>
</div>
</div> <!-- .row -->
</section>
<script>
window.addEventListener('message', function(event) {
// IMPORTANT: Check the origin of the data!
if (~event.origin.indexOf('https://yourdomain.com')) {
// The data has been sent from your site
if (event.data.messageName) {
switch (event.data.messageName) {
case "documentHeight":
if (event.data.messageValue && parseInt(event.data.messageValue) > 500);
var newHeight = parseInt(event.data.messageValue) + 50;
$("#web-version-frame").css("height",newHeight.toString() + "px");
break;
}
}
// The data sent with postMessage is stored in event.data
} else {
// The data hasn't been sent from your site!
// Be careful! Do not use it.
return;
}
});
</script>
Child window:
if (window.parent) {
window.parent.postMessage(
{
messageName: "documentHeight",
messageValue: $(".content-active").height()
},
"*"
);
}
https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

Answer 4

In the iframe that you have added in second example has the css property min-height as 1600px. Use a percentage for min-height or height to fix the issue. Added min-height: 275vh; and it fixed the issue.
.job-detail-iframe iframe{
width: 100%;
min-height: 275vh;
}
Check this out also as a reference.