Skip to content
  • home
  • portfolio
  • web design journal
  • blog
    • adventure
    • san diego
    • projects
    • website design
    • code notes
Blog Web Dev Matching the iFrame to the Height of the Content – Cross Domain

Matching the iFrame to the Height of the Content – Cross Domain

By Forrest Smith - Drempd.com

I found lots of solutions that didn't work, and many more that didn't apply to the situation that most are looking to solve -- where you have an iFrame containing content from a different URL that you don't have control over. The solution that I stumbled upon requires both PHP and javascript. Basically the idea is that you use PHP to grab the content from the URL, paste it into the page where the iframe goes, get the height of this content, and then use that to set the height of the iFrame. At first I thought it was brilliant to just paste the content into the page without the iframe, but of course if there is a form or something more complex in the content, those won't work.

So something along the lines of this for the PHP:

$output = file_get_contents("urlHere");
<div style="visibility: hidden; height:0;">
   <div id="iframe-content"><?php
      echo $output; ?>
   </div>
</div>
<iframe id="frame-posting" src="urlHere" title="Job Posting" style="width: 100%; border: 0;"></iframe>


And something like this for the javascript:
document.addEventListener( 'DOMContentLoaded', function(e) {
   var iframeContent = document.getElementById("iframe-content");
   var iframeTarget = document.getElementById("frame-posting");
   var height = iframeContent.offsetHeight;
   iframeTarget.style.height = (height+30)+"px";
   iframeContent.remove(); //Remove the inserted content so we don't get conflicts with the stylesheet, javascript
})

Posted on June 21, 2022August 28, 2025 in Web Dev

drempd | san diego, ca


home contact

adventures san diego projects stream website design

portfolio resume san diego web design freelance web designer

custom web design responsive web design website maintenance