Member Avatar for jonow

I have been looking everywhere for a piece of code that made the height of an iframe auto adjusts while showing contentment from an external domain. (ex: my domain mydomain.com showing google.com). I need a script that does that

Or something that may be harder is that it counts the number of divs with a certain id and multiplies that my a number to make the iframe height, Possible?

Thank You

  • 4 Contributors
  • 11 Replies
  • 410 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by FlashCreations

Dani AI

Generated

Short answer: you cannot read or measure the DOM inside an iframe that points at a different origin directly — the browser enforces the same-origin policy so the parent page cannot inspect the child’s document. (developer.mozilla.org)

If you can add code to the page being embedded, the reliable solution is a small postMessage handshake: the framed page measures its own height and posts that value to the parent, and the parent listens and applies the height. Use a sensible height calculation (scrollHeight / offsetHeight / clientHeight fallbacks), send a structured message, and always validate origins on the receiving side for security. Example (child page inside the iframe):

function reportHeight() {
  var h = Math.max(
    document.documentElement.scrollHeight,
    document.body.scrollHeight,
    document.documentElement.offsetHeight,
    document.body.offsetHeight
  );
  parent.postMessage({ type: 'iframe-height', height: h }, 'https://your-parent-origin.example');
}
window.addEventListener('load', reportHeight);
window.addEventListener('resize', reportHeight);

And parent side:

window.addEventListener('message', function(e) {
  if (e.origin !== 'https://trusted-child.example') return;
  if (e.data && e.data.type === 'iframe-height') {
    document.getElementById('myIframe').style.height = e.data.height + 'px';
  }
});

Use the browser API postMessage for this communication; it’s the standard safe way to exchange data across origins. (developer.mozilla.org)

If you don’t control the embedded page, you cannot reliably resize to its content. Many sites also block embedding entirely with X-Frame-Options or CSP frame-ancestors, so embedding may fail even before sizing comes up. (developer.mozilla.org)

For production-ready needs, consider a battle-tested library (it wraps measurement quirks and resize observation and handles cross-domain setup) such as iframe-resizer rather than hand-rolling the full logic. If editing the remote page isn’t possible, alternatives are a backend proxy (beware legal, auth and security implications) or opening the content in a new tab. (github.com)

Notes tied to the thread: was right that simple DOM access won’t work across domains; ’s frameset idea is an older approach but not a cross-origin DOM fix; if you control the child page you can count elements (use classes/querySelectorAll) and send that info to the parent.

Recommended Answers

All 11 Replies

Member Avatar for FlashCreations

Probably not, there is no simple way (or any way at all for that matter) to determine content height unless it is a style on the page (Ex. something like maybe:

.myDivThatIWantTheHeightFrom {
 height: 50px;
}

I'm not sure though even in that case if you could determine height.

Member Avatar for jonow

So are you saying that lets say these is a div that is set to 50 px through css in the external domain i can make the iframe that height?

Member Avatar for FlashCreations

Yes simply add the height property to the iframe like so:

<iframe src="http://externaldomain.com" height="50"></iframe>

Now that I think about it, there might be a JavaScript fix that could help, but I'm not sure it would work, nor would it work everywhere.

Member Avatar for jonow

No but i want to do it dynamically so when a new page loads it loads to that height.

Member Avatar for almostbob

do it ANother way
frameset instead of iframe
this is a file 'external.php' that we use to load outside files under a little header that says external file and a menu the file takes a parameter $ext that is the file to load

<?php ob_start('ob_gzhandler'); ?>
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Frameset//EN' 'http://www.w3.org/TR/html4/frameset.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<Title>Linking <?php if(!$ext){$ext = '/home2.php';} echo $ext ; ?></Title>
<LINK rel='StyleSheet' HREF='/style.css.php' TYPE='text/css' MEDIA='all'>
<script language='javascript' type='text/javascript' src='/script.js.php'></script>
<frameset rows='100,*'>
<frame name='Menu' SRC='menu2.php' TITLE='Menu'>
<frame name='Content' SRC='<?php echo $ext; ?>' TITLE='Content'>
</FRAMESET>
</body>
</html>
<?php ob_flush(); ?>

(stylesheets and javascripts are .php files, mod_gzip.)

Member Avatar for FlashCreations

And that's exactly what I'm saying. It could be done with JavaScript but it won't be compatible everywhere and there's no guarantee it will work. It would be something like this...

<html>
<head><titleDynamic iFrame Height</title>
<script type='text/javascript'>
var divName = 'testDiv'; //ID of the div you want to adjust height for
function dynamicIframe(name)
{
 if(name=='') name = divName;
 document.getElementById('iFrame').style.height = document.getElementById('iFrame').document.getElementById(name).style.height;
}
</script>
</head>
<body>
<iframe src="thispage.html" height="100" width="100%"  id="iFrame" onload="javascript:dynamicIframe();"></iframe>
</body>
</html>

Simply replace divName with the name of the tag you would like to adjust height of iFrame for.

Member Avatar for jonow

so there is no way possible? That sucks.

Member Avatar for FlashCreations

No I didn't say that. You can try AlmostBob's suggestion or my JavaScript solution.

Member Avatar for jonow

I will just leave it alone. The set up i have is ok, with scrolling iframe

Member Avatar for MidiMagic

You can't count divs with a certain id, because ids are not allowed to be used more than once.

Member Avatar for FlashCreations

Yes but he wanted to know the height of a div. As long as the div has an id you can figure that out.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.