Resolved Permission denied to access document property in Firefox

[meridionaljet]

Hello,

I have WordPress installed in a directory of my website, and I'm using an iframe on the homepage to embed the blog. I'm using a javascript code that I found online to automatically resize the iframe based on the content inside of it. This is the code:

<script type="text/javascript">
function resizeIframe()
{
document.getElementById('blog').style.height =
document.getElementById
('blog').contentWindow.document.body.scrollHeight + 'px';
}
</script>

This works perfectly in Google Chrome. However, in Firefox I get this error in the console:

Error: Permission denied to access property 'document'
Source File: http://mysite.com/index1.html
Line: 24

I don't have any experience with javascript, but this makes no sense to me, because it should work since the iframe document is on the same domain and server as the parent page. The parent is "mysite.com/index1.html" and the iframe document is "mysite.com/blog/".

Why is Firefox complaining about this? It shouldn't violate the "same origin policy" that I have read about. Any help with getting this to work would be appreciated.

[Logic Ali]

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

How are you calling the function?

[meridionaljet]

Originally Posted by Logic Ali

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.

<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]

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.

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]

Originally Posted by Logic Ali

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.

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]

I also tried adding:

<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]

Originally Posted by meridionaljet

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.

<!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]

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]

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

<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]

Originally Posted by Old Pedant

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

<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]

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]

Originally Posted by Old Pedant

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]

Sample:

<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]

Originally Posted by Old Pedant

Sample:

<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]

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:

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