Matching the iFrame to the Height of the Content – Cross Domain
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
})
-
Adventure
-
The Built Environment
-
Locations
-
Web Dev