We Keep Coding

Hide iframe if height is 150px

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

page has different height when inside an iframe

I've googled a bit and there were a few leads, but I couldn't get any of those leads to work:
I have a page that has an iframe with the src pointing to an external page (cross domain). When the child/iframed page loads, it posts a message of its height. I put a console.log of the height in the javascript. If I open that page in a separate window (type the iframe's src URL in a separate tab, in other words), the console logs the expected height.
However, when I open the parent page with the iframe, the console logs either 0 or a very incorrect value of 150. I've looked through the css and html, and I don't have any specifications of 150.. Anyone have a clue what's going on here?
Abstracted code:
Parent HTML:
...
<iframe src="example.childpage.com" scrolling="no" frameBorder="0"></iframe>
...
Parent Javascript:
...
$(document).ready(function(){
window.addEventListener('message', function(m){
var messageData = m.data;
if(messageData.type=='document-loaded' &&
messageData.hasOwnProperty('height'){
resize_iframe(messageData.height); //function defined else where
//and works
};
});
...
IFrame Javascript:
...
$(document).ready(function(){
var body = document.body;
var html = document.documentElement;
var maxHeight = Math.max(body.scrollHeight, body.offsetHeight,
html.clientHeight, html.scrollHeight, html.offsetHeight);
//Logs height correctly when opened in a separate window but not when
//iframed
console.log("POSTING HEIGHT", maxHeight);
window.parent.postMessage({'type':'document-loaded', 'height': maxHeight},
PARENT_HOST_URL); //PARENT_HOST_URL defined elsewhere
});
...
I realize I have a mixture of jquery and vanilla javascript here; I've done both $(document).height() and the Math.max() shown above to get the height, but both ways still have the same issue.
Much thanks!

ok I finally found a good solution:
$('iframe').load(function() {
this.style.height =
this.contentWindow.document.body.offsetHeight + 'px';
});
Because some browsers (older Safari and Opera) report onload completed before CSS renders you need to set a micro Timeout and blank out and reassign the iframe's src.
$('iframe').load(function() {
setTimeout(iResize, 50);
// Safari and Opera need a kick-start.
var iSource = document.getElementById('your-iframe-id').src;
document.getElementById('your-iframe-id').src = '';
document.getElementById('your-iframe-id').src = iSource;
});
function iResize() {
document.getElementById('your-iframe-id').style.height =
document.getElementById('your-iframe-
id').contentWindow.document.body.offsetHeight + 'px';
}

I had a function that looped through not-yet-accessible elements and called $(element).hide() on them -- which sets the style display: none.
Turns out calculating the height of an element is respective of its visibility on the actual page, regardless of it being in an iframe. So the browser couldn't see it, so the height was being miscalculated (still weird it was returning a random 150px value). That explains why it was calculating correctly on a separate page.
Instead of doing hide(), I just set the visibility to hidden and that fixed my issue of getting the incorrect heights.

Dynamically Shrinking Size of An iFrame Window

I have an iFrame window on the page, the content inside of the iFrame ether shrinks or grows larger in height depending of different AJAX calls.
I want to dynamically re-size height of an iframe window based on the height of iframe's content
My code:
var $iFrame = $('#iFrameWindow');
var lastHeight;
setInterval(function () {
if ($iFrame.contents().height() != lastHeight) {
$iFrame.css({
height: $iFrame.contents().height() + 'px'
});
lastHeight = $iFrame.contents().height();
}
}, 200);
It works if iFrame's content grows larger then my iFrame window automatically gets re-sized to a larger height, but if iFrame's content shrinks in height $iFrame.contents().height() does not detect that change and shows old, larger and incorrect height for the iFrame's content.
How do I also make my iFrame to dynamically shrink if height if the iFrame changes to smaller height?

Resize iframe height according to resizable content

I have an iframe and I want to re-size the height according to the content which may resize if user makes certain actions.
I don't want a scroll bar so it appears as a normal page

Use a div instead of an iFrame. Try posting some sample code so we can help you more. Generally, you cannot resize an iframe based on its content.

scrollHeight is the major property to retrieve the height of the IFRAME's content like this:
contentWindow.document.body.scrollHeight
After the IFRAME is loaded, you can then change the height by doing the following:
<script type="text/javascript">
function resizeIframe() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
var cont = iFrameID.contentWindow.document.body || frame.contentDocument.body
// here you can make the height
iFrameID.height = cont.scrollHeight + "px";
}
}
</script>
On the IFRAME load event, you can call this function:
But sure..iframe should not be loaded from other website

iFrame expands with content but does not shrink

I have a cross domain iFrame. The actual iFrame works fine and displays the page at 100% height.
My problem is the first page is around 1200px tall then if you click a link within the iframe and the next page is 800px, you get a 400px blank space at the bottom.
So the iframe gets larger to fit the content but won't shrink. Below is my code:
Code which goes in the page to be iframed:
<!DOCTYPE html>
<head>
</head>
<body onload="parent.postMessage(document.body.scrollHeight, 'http://target.domain.com');">
<h3>Got post?</h3>
<p>Lots of stuff here which will be inside the iframe.</p>
</body>
</html>
Code which goes in to the page receiving the iframe:
<script type="text/javascript">
function resizeCrossDomainIframe(id, other_domain) {
var iframe = document.getElementById(id);
window.addEventListener('message', function(event) {
if (event.origin !== other_domain) return; // only accept messages from the specified domain
if (isNaN(event.data)) return; // only accept something which can be parsed as a number
var height = parseInt(event.data) + 32; // add some extra height to avoid scrollbar
iframe.height = height + "px";
}, false);
}
</script>
<iframe src='http://example.com/page_containing_iframe.html' id="my_iframe" onload="resizeCrossDomainIframe('my_iframe', 'http://example.com');">
</iframe>
Does anyone know how to modify the javascript so it shrinks too?
Thank you.

In your script other_domain equals 'http://example.com' - always. So if you click on 'http://example.com/somePage.html', your function will always return before resizing the iFrame. Instead of equals, you should use
if (event.origin.lastIndexOf(other_domain, 0) !== 0) return;