javascript - Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin &am

admin管理员组

文章数量:1026989

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 : 
  

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 : 
  

• javascript
• iframe
• same-origin-policy

Share Improve this question Follow edited Sep 17, 2014 at 17:27 abcid d asked Sep 17, 2014 at 14:13 abcid dabcid d 2,96388 gold badges3636 silver badges5252 bronze badges 5

• This is because of same origin policy. You should include the location of that page and the one of the page in the iframe. – Oriol Commented Sep 17, 2014 at 14:17
• Thank you, Oriol! The first error is from my page, the second one is from jquery-1.10.2.js. Would you please direct more about "should include the location of that page and the one of the page in the iframe." – abcid d Commented Sep 17, 2014 at 17:33
• I meant you should say the URL of your page (e.g example./path/file.php) and the URL of the document loaded inside the iframe (i.e <iframe src="<!-- this URL -->"></iframe>). This way we will see if they have the same origin or not. – Oriol Commented Sep 17, 2014 at 18:52
• Thank you, Oriol! My page is: JSExample.html, this page contains an iframe: <iframe src="JS1.html" width="110%" height="100%" name="mainIFrame" id="the_iframe" class="iframeHideScr" frameborder="0" onLoad="calcHeight();"></iframe>. These 2 pages (JSExample.html and JS1.html) are in the same folder and the same level. – abcid d Commented Sep 17, 2014 at 22:01
• 1 Then it seems it should work. Are those pages local? In that case, see Using iframe with local files in Chrome – Oriol Commented Sep 18, 2014 at 14:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

You can try to add document.domain = 'yourdomain.' to you page

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 : 
  

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 : 
  

• javascript
• iframe
• same-origin-policy

Share Improve this question Follow edited Sep 17, 2014 at 17:27 abcid d asked Sep 17, 2014 at 14:13 abcid dabcid d 2,96388 gold badges3636 silver badges5252 bronze badges 5

• This is because of same origin policy. You should include the location of that page and the one of the page in the iframe. – Oriol Commented Sep 17, 2014 at 14:17
• Thank you, Oriol! The first error is from my page, the second one is from jquery-1.10.2.js. Would you please direct more about "should include the location of that page and the one of the page in the iframe." – abcid d Commented Sep 17, 2014 at 17:33
• I meant you should say the URL of your page (e.g example./path/file.php) and the URL of the document loaded inside the iframe (i.e <iframe src="<!-- this URL -->"></iframe>). This way we will see if they have the same origin or not. – Oriol Commented Sep 17, 2014 at 18:52
• Thank you, Oriol! My page is: JSExample.html, this page contains an iframe: <iframe src="JS1.html" width="110%" height="100%" name="mainIFrame" id="the_iframe" class="iframeHideScr" frameborder="0" onLoad="calcHeight();"></iframe>. These 2 pages (JSExample.html and JS1.html) are in the same folder and the same level. – abcid d Commented Sep 17, 2014 at 22:01
• 1 Then it seems it should work. Are those pages local? In that case, see Using iframe with local files in Chrome – Oriol Commented Sep 18, 2014 at 14:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

You can try to add document.domain = 'yourdomain.' to you page

本文标签：