如果高度为 150 像素，则隐藏 iframe

Question

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>

Answer 1

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!

Answer 2

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