Member Avatar for os.kwesi

Hi,

How can I automatically resize the height of an iframe such that it takes the height of an external website without showing the scrollbars. Thanks in advance

  • 3 Contributors
  • 4 Replies
  • 864 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Brief summary and practical options. is correct that a parent page cannot directly read the document height of a cross-origin iframe; browsers enforce same-origin restrictions. ’s viewport-fit idea is a simple fallback when matching the visible screen is acceptable. For a true “match the external page height” solution the framed site must cooperate, or the content must be served same-origin.

Cooperative approach (recommended): have the framed page post its height to the parent with window.postMessage, and have the parent listen and apply that height. The parent should verify the message origin before changing the iframe. Example listener (parent):

<script>
window.addEventListener('message', function(e) {
  if (e.origin !== 'https://example-target') return;
  try {
    var data = typeof e.data === 'string' ? JSON.parse(e.data) : e.data;
    if (data && data.type === 'setHeight') {
      document.getElementById('externalFrame').style.height = data.height + 'px';
    }
  } catch (err) {}
}, false);
</script>

Example sender (page inside iframe):

<script>
function reportHeight() {
  var h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);
  parent.postMessage(JSON.stringify({type:'setHeight', height: h}), 'https://parent-site');
}
window.addEventListener('load', reportHeight);
window.addEventListener('resize', reportHeight);
</script>

Alternatives when the external site will not cooperate: 1) use a server-side proxy so the content becomes same-origin (heavy, may break scripts and may violate terms); 2) size the iframe to the viewport (100vh) or a large fixed height and accept internal scrolling; 3) use a library that provides a small script on both sides (if control of both domains is possible). Also check whether the external server sends X-Frame-Options or a CSP frame-ancestors rule (these will block embedding); a quick header check can reveal this.

Troubleshooting tips: confirm the iframe has the expected id, watch the browser console for “refused to frame” or postMessage errors, debounce frequent height messages, and always validate message origins before applying heights.

Recommended Answers

All 4 Replies

Member Avatar for Member #120589

I may very well be wrong, but I don't think this is possible. You can certainly get rid of scrollbars, but the iframe is not aware of the size of the content AFAIK.

Edited by Member #120589
Member Avatar for almostbob

cant measure the external web page,
can make it fit the screen,
you get a scroll bar, inside the iframe, if the external site is bigger than 1 screen, appears close to the same site not in an iframe

<script type="text/javascript">
    function sizer() { var viewportheight;
    if (typeof window.innerWidth != 'undefined') { viewportheight = window.innerHeight }
    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { viewportheight = document.documentElement.clientHeight }
    else { viewportheight = document.getElementsByTagName('body')[0].clientHeight }
    document.getElementById('IFRAMEID').style.height=viewportheight; }
    document.onload = sizer();
    document.onresize = sizer(); </script>






<iframe id='IFRAMEID' width='100%'>

many sites wont allow their content in an iframe, they use a framebreaker script

<script type='text/javascript'>
<!--//
if (window != top) { if (top.location.href.indexOf("translate") < 0) {top.location.replace(self.location.href);} }
//-->
</script>
Edited by almostbob
Member Avatar for os.kwesi

Thanks almostbob. I am new to this. How should I implememt this code and where should I put the source URL. Below is an example of what I have

<iframe src="http:/www.abc.com" width="100%"></iframe>

Thanks

Member Avatar for almostbob

javascripts go in the <head>
the iframe call at the bottom, it is only an example
Modify your iframe to have the id referenced in the script
<iframe id='IFRAMEID' src="http:/www.abc.com" width="100%"></iframe>

the second script is not part of it, just an eample of a framebreaker, googleyahoo translate aware, in case the target site won't stay in your iframe, to let you see what is possible, no way to undo their framebreaker on your site

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.