Solved

Resizing parent window to fit length of inline frame

Posted on 2004-08-03
1
1,354 Views
Last Modified: 2012-06-27
My situation is this:

I have complete control over a webpage (parent page) in where I am embedding a HTML document containing database results using an inline frame.  The database results are from a paid subscription service.  I want to do the embedding so that the overall look and feel of the site is maintained.

I want the iframe pixel length to grow in length accordingly to the length of the content in the iframe.  I found that setting the iframe length to 100% does not work.  If I hard code a pixel height in, then there either is too much white space, or an undesired vertical scrollbar.

I did find a Javascript snippet on the web that does set the iframe length on initial loading of the page.  However clicking on links in the iframe does not reset the iframe length, so the dreaded vertical scroll bars appear.

Here is the site:
http://www.bradleyre.com/test/listings.htm

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bradley Real Estate Services - Cokato, Minnesota</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Author" content="www.benusa.com - Allen Benusa" />
<meta name="Description" content="Bradley Real Estate Services - Cokato, Minnesota" />
<meta name="Keywords" content="Bradley, real estate, realty, Minnesota, MN, Cokato, Dassel, Howard Lake, Winsted, Hutchinson, Wright, Meeker, county, properties, homes, houses, houses for sale, mortgages, home sales, new homes, realtor, realtors, real estate agents, real estate office, commercial real estate, residential real estate, real estate listings" />
<link href="/styles/styles.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function HeightSize() {
  var myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myHeight = window.innerHeight;
  } else if( document.documentElement &&
      ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myHeight = document.body.clientHeight;
  }
  return myHeight + 230;
}
//-->
</script>
</head>
<body>
<!-- Drop down Menu -->
<script language="JavaScript1.2" src="/dropmenu/menudata.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="/dropmenu/dropmenu.js" type="text/javascript"></script>
<!-- End Drop down Menu-->
<div id="menuBar" class="menuBar">
      <table border="0" cellpadding="0" cellspacing="0" bgcolor="#CC3333">
            <tr>
                  <td width="135"><a href="javascript:;" onmouseover="showMenu(event)" onmouseout="hideMenu(event);"> <img src="/dropmenu/menuimages/home.gif" alt="Home" name="menu0" width="135" height="27" border="0" id="menu0" /> </a> </td>
                  <td width="90"><a href="javascript:;" onmouseover="showMenu(event)" onmouseout="hideMenu(event);"> <img src="/dropmenu/menuimages/agents.gif" alt="Agents" name="menu1" width="90" height="27" border="0" id="menu1" /> </a> </td>
                  <td width="125"><a href="javascript:;" onmouseover="showMenu(event)" onmouseout="hideMenu(event);"> <img src="/dropmenu/menuimages/developments.gif" alt="Developments" name="menu2" width="125" height="27" border="0" id="menu2" /> </a> </td>
                  <td width="90"><a href="javascript:;" onmouseover="showMenu(event)" onmouseout="hideMenu(event);"> <img src="/dropmenu/menuimages/listings.gif" alt="Listings" name="menu3" width="90" height="27" border="0" id="menu3" /> </a> </td>
                  <td width="85"><a href="javascript:;" onmouseover="showMenu(event)" onmouseout="hideMenu(event);"> <img src="/dropmenu/menuimages/services.gif" alt="Services" name="menu4" width="85" height="27" border="0" id="menu4" /> </a></td>
                  <td width="175"><a href="javascript:;" onmouseover="showMenu(event)" onmouseout="hideMenu(event);"> <img src="/dropmenu/menuimages/cokatoarea.gif" alt="Cokato Area" name="menu5" width="175" height="27" border="0" id="menu5" /> </a> </td>
                  <td>&nbsp;</td>
            </tr>
      </table>
</div>
<br />
<br />
<iframe src="http://www.yourmlssearch.com/full.search?id=bradleyre&properties=on&photo=on&homes=Search" frameborder="0" width="100%" height="450" onLoad="this.height=HeightSize();"></iframe>
</body>
</html>

=======================

Any help would be greatly appreciated.

Remember, I can change the HTML code of the parent page, but I have no control of the HTML coding in the page the inline frame is referring to.

- Allen -

0
Comment
Question by:abenusa
1 Comment
 
LVL 36

Accepted Solution

by:
Zyloch earned 250 total points
ID: 11708189
You can hide the style of the Iframe so it doesn't have the border to make it look bad like this:
<iframe style="border:none;"> but if you don't want to do that, the only other way I can think of is to do this:

Main Parent Page (yours):
Add this:

<script language="javascript">
var currSite="";
function checkIfModified(theIframe) {
   if (currSite!=theIframe.location.href) {
      currSite=theIframe.location.href;
      //MOVE ALL THE CODE IN YOUR BODY ONLOAD FOR THE IFRAME SWITCHING HERE;
   }
   setTimeout('checkIfModified(theIframe)',1000);
}
</script>

In body tag, have this:
<body onload="checkIfModified(document.frames['IFRAMENAME']);">

Regards,
${Zyloch}f
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question