Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

<iframe> - How to show the whole height of referenced page?

Tags:

html

iframe

I have an application that I would like to embed inside our companies CMS. The only way to do that (I am told), is to load it in an <iframe>.

Easy: just set height and width to 100%! Except, it doesn't work.

I did find out about setting frameborder to 0, so it at least looks like part of the site, but I'd prefer not to have an ugly scrollbar inside a page that allready has one.

Do you know of any tricks to do this?

EDIT: I think I need to clarify my question somewhat:

  • the company CMS displays the fluff and stuff for our whole website
  • most pages created through the CMS
  • my application isn't, but they will let me embedd it in an <iframe>
  • I have no control over the iframe, so any solution must work from the referenced page (according to the src attribute of the iframe tag)
  • the CMS displays a footer, so setting the height to 1 million pixels is not a good idea

Can I access the parent pages DOM from the referenced page? This might help, but I can see some people might not want this to be possible...

This technique seems to work (gleaned from several sources, but inspired by the link from the accepted answer:

In parent document:

<iframe id="MyIFRAME" name="MyIFRAME" 
    src="http://localhost/child.html"
    scrolling="auto" width="100%" frameborder="0">
    no iframes supported...
</iframe>

In child:

<!-- ... -->
<body>
<script type="text/javascript">
    function resizeIframe() {

        var docHeight;
        if (typeof document.height != 'undefined') {
            docHeight = document.height;
        }
        else if (document.compatMode && document.compatMode != 'BackCompat') {
            docHeight = document.documentElement.scrollHeight;
        }
        else if (document.body 
            && typeof document.body.scrollHeight != 'undefined') {
            docHeight = document.body.scrollHeight;
        }

        // magic number: suppress generation of scrollbars...
        docHeight += 20;

        parent.document.getElementById('MyIFRAME').style.height = docHeight + "px";    
    }
    parent.document.getElementById('MyIFRAME').onload = resizeIframe;
    parent.window.onresize = resizeIframe;
</script>               
</body>

BTW: This will only work if parent and child are in the same domain due to a restriction in JavaScript for security reasons...

like image 500
Daren Thomas Avatar asked Sep 12 '08 09:09

Daren Thomas


People also ask

How to set the size of the content in the iframe?

It is difficult to set the size of the content in the iframe tag as same as the main content. So its need to be dynamically set the content size when the content of iframe is loaded on the web page. Because its not possible to set the height and width all the time while the same code execute with a different content.

What happens if the HTML element has no height or width?

With no height value provided for the HTML element, setting the height and/or min-height of the body element to 100% results in no height (before you add content). However, with no width value provided for the HTML element, setting the width of the body element to 100% results in full page width. This can be counterintuitive and confusing.

How to make an iframe dynamic in JavaScript?

There is a way to make it dynamically by using some attribute of JavaScript. The attributes used here are, contentWindow : This property returns the Window object used by an iframe element, basically its defines the iframe window. scrollHeight : This property defines the entire height of an element in pixels, the element is iframe.

What's the best way to set the page height and width?

For a responsive full page height, set the body element min-height to 100vh. If you set a page width, choose 100% over 100vw to avoid surprise horizontal scrollbars. I'll leave you with a tutorial from my YouTube channel demonstrating the CSS height and width settings for an HTML page that is full screen size and grows with the content it contains:


1 Answers

You could either just use a scripting language to include the page into the parent page, other wise, you might want to try one of these javascript methods:

http://brondsema.net/blog/index.php/2007/06/06/100_height_iframe http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/PHP/Q_22840093.html

like image 120
ralfe Avatar answered Oct 04 '22 17:10

ralfe