I have an iframe which is loading external content dynamically from a site I have control of.
In case no content is available I load an empty page.
Unfortunately an iframe has a height of 150px.
How can I at best with Javascript define to hide the mother div (container) or iframe in case the iframe has the standard size of 150px?
<div id="container">
<iframe src=""> </iframe>
</div>
You can use the client.Height to get the Height of an element (with padding, the border is not included)
Try this:
const iframe = document.querySelector('iframe');
let iframeHeight = iframe.clientHeight;
if (iframeHeight == 150) {
iframe.style.display = "none";
}
It will be hide the first iframe with standard height. Let me know for more requirements. Hope it helps!
You can use
window.getComputedStyle(element);
And it will give you an object with all css properties of that element.
If you want to get the height:
window.getComputedStyle(element).height;
And that will return ’150px’, or whatever else the height will be
Note: typing ‘window’ is not required, getComputedStyle() will also work