tags:

views:

2066

answers:

5

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...

A: 

If you set the iframe height to a really large number (or at least higher than the included page), you will not have the vertical scrollbars.

Espo
but this puts the parent pages footing in nirvana...
Daren Thomas
+3  A: 

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

ralfe
A: 

I might be missing something here, but adding scrolling=no as an attribute in the iframe tag normally gets rid of the scrollbars.

Adam Hepton
Yes, but then the embedded page gets cut off if it doesn't fit inside the iframe.
Adam Lassek
+2  A: 

Provided that your iframe is hosted on the same server as the containing page, you can access it via javascript.

There are a number of suggested methods for setting the iframe to the full height of the contents, each with varying degrees of success - a google for this problem shows that it's quite a common one, with no real, one-size-fits-all consensus solution i'm afraid!

Several people have reported that this script does the trick, but may need some modification for your specific case (again, assuming your iframe and parent page are on the same domain).

ConroyP
+3  A: 

This was previously asked and answered.

ceejayoz
yes, but: This sollution implies you don't have control over the embedding page, just access to the embedded page.
Daren Thomas