Solved

Resizing parent window to fit length of inline frame

Posted on 2004-08-03
1
1,351 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&amp;properties=on&amp;photo=on&amp;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

Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

Join & Write a Comment

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now