Question

我现在已经阅读了几个小时关于同源异常的内容，我无法弄清楚为什么它会发生在我的文档中。设置很简单，我有一个常规的html 5文档（在我的桌面上，一切都在本地。没有本地WebServer，我用浏览器打开html文档，就是这样），在里面我加载了一个iframe来自 .json 文件，该文件与html5文档位于同一目录中。

<!DOCTYPE html> 
<meta charset="UTF-8">
<html>
  <head>
    <title>TagCanvas example</title>
    <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
    <link rel="stylesheet" type="text/css" href="tagcanvas.css">
    <script src="tagcanvas.min.js" type="text/javascript"></script> 
    <script type="text/javascript">
      window.onload = function() {
        try {
          TagCanvas.Start('myCanvas','tags',{
            textColour: '#ff0000',
            outlineColour: '#ff00ff',
            reverse: true,
            depth: 0.8,
            maxSpeed: 0.05
          });
        } catch(e) {
          // something went wrong, hide the canvas container
          document.getElementById('myCanvasContainer').style.display = 'none';
        }
      };
    </script>

  </head>
  <body>
    <h1>TagCanvas example page</h1>
    <div class="myCanvasContainer">
      <canvas width="300" height="300" id="myCanvas">
        <p>Anything in here will be replaced on browsers that support the canvas element</p>
      </canvas>
    </div>
    <iframe id="texto" sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="./nube.json" onload="loadJsonData()"> </iframe>  
    <script src="./cloud.js" type="text/javascript"></script>
  </body>
</html>

cloud.js 保存loadJsonData()功能如下：

var loadJson = function() {

    var iframe_content = frames.texto.contentDocument.body.innerHTML
    console.log(iframe_content);

}

当这个javscript执行时，我从控制台得到以下消息：

Uncaught SecurityError：无法从'HTMLIFrameElement'读取'contentDocument'属性：阻止具有原点“null”的帧访问具有原点“null”的帧。协议，域和端口必须匹配。

这个stackoverflow question问同样的事情，但评论并没有消除我的无知。 upvoted评论指出，这是因为“同源策略”，但我的文件都在同一个域上。或“ file：// ”处理不同？任何启发都将非常感激。

目录设置

所有内容都挂在目录 TagCanvas 中。

我知道代码是正确的，因为我已将其上传到我拥有的GoDaddy服务器，代码执行得很好。它是本地的，它打破并给出了令人讨厌的异常。我想要的只是理解为什么。

我也尝试在执行chrome后打开html页面：

path to your chrome installation\chrome.exe --allow-file-access-from-files

但没有。

如何仅使用Javascript访问本地iframe的内容

0 个答案: