Solved

Resizing parent window to fit length of inline frame

Posted on 2004-08-03
1
1,357 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying 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

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
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…
Suggested Courses
Course of the Month10 days, 19 hours left to enroll

628 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