Home/ Questions/Q 37613
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-10T14:34:41+00:00

I have an application that I would like to embed inside our companies CMS.

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

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

    • 0