...

View Full Version : Resolved Permission denied to access document property in Firefox



meridionaljet
08-30-2011, 04:34 AM
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
08-30-2011, 06:55 AM
The function must not be called until the document in the iframe has loaded.

How are you calling the function?

meridionaljet
08-30-2011, 07:02 AM
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
08-30-2011, 03:54 PM
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
08-30-2011, 07:59 PM
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 (http://www.tropicaltidbits.com/iframe-test.html). The way I have it setup right now works perfectly in the latest Google Chrome, but not in Firefox.

meridionaljet
08-30-2011, 08:35 PM
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
08-30-2011, 09:35 PM
I couldn't get it to work. Perhaps I'm doing something wrong, but anyway, here's the page in question on my site (http://www.tropicaltidbits.com/iframe-test.html). 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
08-30-2011, 10: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
08-30-2011, 11:41 PM
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
08-30-2011, 11:57 PM
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
08-31-2011, 12:22 AM
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
08-31-2011, 12:25 AM
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
08-31-2011, 12:40 AM
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
08-31-2011, 12:57 AM
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
08-31-2011, 02:21 AM
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.

meridionaljet
08-31-2011, 02:28 AM
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.

Well I dare say you're a genius sir. This appears to work in both Firefox and Chrome. Thanks a bunch. I will mark this post as solved.

Old Pedant
08-31-2011, 03:15 AM
Knew if we kept trying long enough...

Glad it worked. I'll remember it in case I ever need it myself!

Logic Ali
08-31-2011, 04:46 AM
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".


Here (http://veryuseful.info/test/ifr/iframe-test.html) is a temporary mirror of your site, without http: specified anywhere. I think you need a different hosting provider.

Old Pedant
08-31-2011, 04:58 AM
Could it be the type of web server? IIS vs. Apache, say?

Logic Ali
08-31-2011, 05:21 AM
Could it be the type of web server? IIS vs. Apache, say?Probably just a configuration problem, but good luck with getting them to fix it.

meridionaljet
08-31-2011, 07:25 AM
Oh well...I suppose two extra lines of script at the top of my page to redirect users to "www" isn't that bad anyway. I think I can live with that. It doesn't seem to cause any discernible delay.

kumarbhc85
04-04-2012, 12:33 PM
hi ,
i m also facing same problem, i want to change the height iframe...can u help me on this--- i m getting this error "Permission denied to access property 'document'"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum