I have been reading for hours now about the Same Origin Exception and I just can't figure out why it's happening to my document. The set up is very simple, I have a regular html 5 document (in my desktop, everything is locally. There is no local WebServer, I literally open the html document with a browser, that's it), inside of it I load an iframe from a .json file that is on the same directory as the html5 document.
<!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>
The cloud.js holds the loadJsonData() funciton as follows:
var loadJson = function() {
var iframe_content = frames.texto.contentDocument.body.innerHTML
console.log(iframe_content);
}
When this javscript executes I get the following message from console:
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.
This stackoverflow question asks the same thing, but the comments do not dissipate my ignorance. The upvoted comment states that it's because of "Same Origin Policy", but my files are both on the same domain. Or is "file://" treated different ? Any enlightment would be much appreciated.
Directory setup
Everything hangs from directory TagCanvas.
I know the code is right because I've uploaded it to a GoDaddy server I have, there the code executes great. It's locally that it breaks and gives that nasty exception. All I want is to understand why.
I´ve also tried opening the html page after executing chrome with:
path to your chrome installation\chrome.exe --allow-file-access-from-files
but nothing.
