title: Javascript permission denied - different port
body: <p>I have a rails app running on port 3000. The page in question has an iframe and I need to resize it depending on the height of the content loaded in the iframe. </p>
  
  <pre><code>&lt;iframe id="ifrm_col3" name="ifrm_col3" frameborder="0" 
  src="&lt;%=invite_path(@invite.alias)%&gt;" 
  onload="util.resize_iframe('ifrm_col3');"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>The resize function is here: </p>
  
  <pre><code>util.resize_iframe = function(frame_id) {
    var h = document.getElementById(frame_id).contentWindow.document.body.scrollHeight;
    document.getElementById(frame_id).height = h; 
  }
  </code></pre>
  
  <p>After the iframe loads, I see this error in FireBug: </p>
  
  <pre><code>Error: Permission denied for &lt;http://192.168.0.157&gt; to get property Window.document from &lt;http://192.168.0.157:3000&gt;.
  Source File: http://192.168.0.157:3000/javascripts/application.js?1268327481
  Line: 84
  </code></pre>
  
  <p>HTML rendered for the iframe looks like this: </p>
  
  <pre><code>&lt;iframe id="ifrm_col3" name="ifrm_col3" frameborder="0" 
              src="/invite/my-invite-1" 
              onload="util.resize_iframe('ifrm_col3');"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>The src of iframe is a relative path, but I'm not sure why the port info from the parent page is not retained. Is there any workaround to this problem? </p>
  
  <p>I tried creating a function in the parent page and calling it from the iframe, but ran into the same issue. </p>
  
  <p>Due to extra features in the site, I need to stick to port 3000 for the rails app. </p>
  
  <p>Any suggestion is appreciated. </p>