Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 22
  1. #1
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Permission denied to access document property in Firefox

    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:

    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:

    Code:
    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.
    Last edited by meridionaljet; 08-31-2011 at 01:30 AM.

  • #2
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    The function must not be called until the document in the iframe has loaded.

    How are you calling the function?

  • #3
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    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;
       }
    }

  • #5
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #6
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #7
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Quote 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>

  • #8
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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".
    Last edited by meridionaljet; 08-30-2011 at 09:37 PM.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #10
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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.
    Last edited by meridionaljet; 08-30-2011 at 11:05 PM.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #12
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    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.
    Last edited by Old Pedant; 08-30-2011 at 11:42 PM.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    New Coder
    Join Date
    Aug 2011
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote 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".

  • #15
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,947
    Thanks
    79
    Thanked 4,424 Times in 4,389 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •