Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match

Question

I set an iframe on my page and use below script to remove the double navigation bars. It works well on any browser, but doesn't work on Chrome, it shows double vertical navigation bars!

function calcHeight() {
    //find the height of the internal page
    var the_height = document.getElementById('the_iframe').contentWindow.
                     document.body.scrollHeight;

    //change the height of the iframe
    document.getElementById('the_iframe').height = (the_height + 30) +"px";
}

I get 2 errors messages in Chrome:

• First error message:

  Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

  and it points out the error at:

  var the_height = document.getElementById('the_iframe').contentWindow.
                   document.body.scrollHeight;
  

• Second error message, it is located in jquery-1.10.2.js:

  Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

  It points out the error message at:

  elem.contentDocument || elem.contentWindow.document : 
  

Answer 1

Try setting up a server on your machine and test your page from there, instead of on your local file system.

If you have Python 2, do python -m SimpleHTTPServer [port]
In Python 3, do python -m http.server [port]
This will set up a server on localhost:[port]. Then fire up a browser and navigate to your page and see if the problem goes away.