Announcement

**Logic Ali** · Aug 30, 2011, 12:55 AM

The function must not be called until the document in the iframe has loaded.

How are you calling the function?

**meridionaljet** · Aug 30, 2011, 01:02 AM

Originally posted by Logic Ali View Post

The function must not be called until the document in the iframe has loaded.

How are you calling the function?

I'm calling it within the iframe HTML tag.

Code:

<iframe id="blog" onLoad="javascript:resizeIframe();" src="blog/"></iframe>

Is this not how it should be done? I thought "onLoad" calls it after it's loaded, but again, I have no experience in javascript.

**Logic Ali** · Aug 30, 2011, 09:54 AM

Under test that code works for me. Try the function below instead, called like this: <iframe ........ onload='resizeIframe( this )'>
I would not expect error messages, but if it makes no difference you'll have to post a live demo of your site.

Code:

function resizeIframe( ifRef ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
   var ifDoc;

   try
   {   
     ifDoc = ifRef.contentWindow.document.documentElement;  
   }
   catch( e )
   {
     try
     { 
       ifDoc = ifRef.contentDocument.documentElement;  
     }
     catch( ee ){}  
   }
 
   if( ifDoc )
   {
     ifRef.height = 1;  
     ifRef.height = ifDoc.scrollHeight;
     ifRef.width= 1;
     ifRef.width = ifDoc.scrollWidth;
   }
}

**meridionaljet** · Aug 30, 2011, 01:59 PM

Originally posted by Logic Ali View Post

Under test that code works for me. Try the function below instead, called like this: <iframe ........ onload='resizeIframe( this )'>
I would not expect error messages, but if it makes no difference you'll have to post a live demo of your site.

Code:

function resizeIframe( ifRef ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
   var ifDoc;

   try
   {   
     ifDoc = ifRef.contentWindow.document.documentElement;  
   }
   catch( e )
   {
     try
     { 
       ifDoc = ifRef.contentDocument.documentElement;  
     }
     catch( ee ){}  
   }
 
   if( ifDoc )
   {
     ifRef.height = 1;  
     ifRef.height = ifDoc.scrollHeight;
     ifRef.width= 1;
     ifRef.width = ifDoc.scrollWidth;
   }
}

I couldn't get it to work. Perhaps I'm doing something wrong, but anyway, here's the page in question on my site. The way I have it setup right now works perfectly in the latest Google Chrome, but not in Firefox.

**meridionaljet** · Aug 30, 2011, 02:35 PM

I also tried adding:

Code:

<script type="text/javascript">
document.domain = "tropicaltidbits.com";
</script>

to both the parent page and the iframe page, but that didn't work for firefox either. Instead, it ceased showing the frame at all.

**Logic Ali** · Aug 30, 2011, 03:35 PM

Originally posted by meridionaljet View Post

I couldn't get it to work. Perhaps I'm doing something wrong, but anyway, here's the page in question on my site. The way I have it setup right now works perfectly in the latest Google Chrome, but not in Firefox.

This is how your page should look with the code I gave. It works properly in Firefox. I.E. doesnt get the dimensions quite right, but I suspect that's due to some layout problems in the framed document.

Code:

<!DOCTYPE html>
<html>
<head>
 <title>Tropical Tidbits</title>
 <meta name="description" content="Tropical Tidbits - tropical weather and Atlantic hurricane information, analysis, and forecasts" />
 <meta name="keywords" content="tropical,tidbit,tidbits,atlantic,hurricane,weather,storm,Levi,Cowan,Levi Cowan,analysis,information,forecast,cyclone,ocean,caribbean,united states,tracking,models,news,depression,honduras,nicaragua,jamaica,cuba,puerto rico,florida,gulf of mexico,mexico,radar,satellite,surface,data,loops,maps,current,invest,africa,wave,rain,wind,flooding,storm surge,meteorology,official,links" />
 <meta name="author" content="Levi Cowan" />
<script type="text/javascript">

function resizeIframe( ifRef ) /** IMPORTANT: All framed documents *must* have a DOCTYPE applied **/
{
   var ifDoc;

   try
   {   
     ifDoc = ifRef.contentWindow.document.documentElement;  
   }
   catch( e )
   {
     try
     { 
       ifDoc = ifRef.contentDocument.documentElement;  
     }
     catch( ee ){}  
   }
 
   if( ifDoc )
   {
     ifRef.height = 1;  
     ifRef.style.height = ifDoc.scrollHeight+'px';
      
     ifRef.width= 1;
     ifRef.width = ifDoc.scrollWidth;
   }
}


</script>
 <link rel="stylesheet" type="text/css" href="common-styles-home.css" />
 <link rel="shortcut icon" href="images/favicon.ico" />
 <style type="text/css">
 #blog {
 width: 800px;
 border: 0px none transparent;
 padding: 0;
 margin: 0;
 }
 </style>
</head>

<body>
<div id="wrapper">
 <div id="banner">
  <ul id="navbar">
  <li id="current-page"><a href="index.html">Home</a></li>
  <li><a href="storminfo/index.html">Current Storm Info</a></li>
  <li><a href="invest-tracking/index.html">Invest Tracking</a></li>
  <li><a href="analysis/index.html">Analysis Tools</a></li>
  <li><a href="links/index.html">Links Database</a></li>
  </ul>
 </div> <!-- end banner -->
 <div id="main-section">
  
This is the home page.<br>

<iframe id="blog" src="blog/" onload='resizeIframe(this)'></iframe>
<form name="user-comments" action="http://www.tropicaltidbits.com/cgi-bin/comments.html" method="post">
Username: <input type="text" name="comment" />
<input type="submit" value="Post Comment" />
</form>
 </div> 
</div> <!-- end wrapper -->
</body>
</html>

**meridionaljet** · Aug 30, 2011, 04:28 PM

The frame did not resize for me in either Firefox or Chrome using that exact page code.

Correction: It does work if the URL in the browser is "http://www.tropicaltidbits.com/iframe-test.html", but it won't work if the address is "http://tropicaltidbits.com/iframe-test.html". Curious....but at least it works under that condition in Firefox. Any idea why the URL matters here? It would be annoying if folks can't type in my address without the "www".

**Old Pedant** · Aug 30, 2011, 05:41 PM

Easy answer: Put the full URL to the iframe as the src=

Code:

<iframe src="http://www.tropicaltidbits.com/blog/" ...>

I would guess it is because you are giving just a directory and FF isn't picking up the default page in the directory when the www is missing. But it should work fine if you give full URL.

**meridionaljet** · Aug 30, 2011, 05:57 PM

Originally posted by Old Pedant View Post

Easy answer: Put the full URL to the iframe as the src=

Code:

<iframe src="http://www.tropicaltidbits.com/blog/" ...>

I would guess it is because you are giving just a directory and FF isn't picking up the default page in the directory when the www is missing. But it should work fine if you give full URL.

Sadly, that's not doing it. Firefox and Chrome won't resize the iframe if "www" is not included in the URL when it's typed into the address bar. Very strange. I've never seen browsers show different content based on whether the URL is written short-hand or not.

**Old Pedant** · Aug 30, 2011, 06:22 PM

Okay, one more stab:

Have your JS code look at the URL the page was invoked with and clone the domain as the src of the iframe.

If need be, use document.write to create the iframe tag with the matching domain in place.

**meridionaljet** · Aug 30, 2011, 06:25 PM

Originally posted by Old Pedant View Post

Okay, one more stab:

Have your JS code look at the URL the page was invoked with and clone the domain as the src of the iframe.

If need be, use document.write to create the iframe tag with the matching domain in place.

Yeah well I wouldn't know how to write that up, because as I said, I don't really have any experience with JS.

**Old Pedant** · Aug 30, 2011, 06:40 PM

Sample:

Code:

<html>
<body>
Stuff above the iframe.
<script type="text/javascript">
var domain = location.protocol + "//" + location.host;
document.write('<iframe src="' + domain + '/blogs/" style="width: 100%; height: 300px;"></iframe>');
</script>
Stuff below the iframe.
</body>
</html>

EDITED: Improved the JS slightly.

**meridionaljet** · Aug 30, 2011, 06:57 PM

Originally posted by Old Pedant View Post

Sample:

Code:

<html>
<body>
Stuff above the iframe.
<script type="text/javascript">
var domain = location.protocol + "//" + location.host;
document.write('<iframe src="' + domain + '/blogs/" style="width: 100%; height: 300px;"></iframe>');
</script>
Stuff below the iframe.
</body>
</html>

EDITED: Improved the JS slightly.

I appreciate you going through the trouble. Unfortunately, nothing changes no matter what the source is in the iframe. No matter whether it's "http://tropicaltidbits.com/blog/" or "http://www.tropicaltidbits.com/blog/" or just "blog/", it still won't resize the iframe if "www" isn't in the address bar within the parent page address of "http://www.tropicaltidbits.com/iframe-test.html".

**Old Pedant** · Aug 30, 2011, 08:21 PM

Okay, so the final try... Well, maybe not final, but one I hold out hope for, at least.

At the VERY TOP of your main page:

Code:

<html ...>
<head>
<script type="text/javascript">
if ( location.host.toLowerCase().substring(0,3) != "www" )
{
    location.href = location.href.replace( /\/\//, "//www." );
}
</script>

You see it? It checks the URL to see if the "www" is there and, if not, simply reloads the same URL but adding in the "www.".

At least worth a shot.

Announcement

Permission denied to access document property in Firefox

Resolved Permission denied to access document property in Firefox

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment