Possible Duplicate:
Chrome: Disable same origin policy
so a little background information about my issue:
- Writing a JavaScript file for a gallery; pulling data from an xml file, here.
- Loading the DOM Object with XMLHttpRequest(), using async loading.
- Parsing the responseText with a DOMParser to make a DOM object.
- Works on FireFox, fails on Chrome.
EDIT (Please read):
After using console.log, it seems that Chrome is reporting a Cross-Origin Issue:
- Failed to load resource file: ./Gallery/dropdown_style.css
- XMLHttpRequest cannot load file: ./Gallery/gallery_info.xml. Cross origin requests are only supported for HTTP.
- NodeList[0]
- length: 0
- Uncaught Error: NETWORK_ERR: XMLHttpRequest Exception 101
- Failed to load resource ./Gallery/Pictures/bg_one.jpg
Now my questions are:
- How do I fix this on the local level (offline)?
- Will this still be a problem even if I upload all the files to the same server?
- If so, what's the solution for that as well (online)?
Now the DOM Object comes through, presumably correct on both Firefox and Chrome. And in the following code:
window.alert(xmlDoc.getElementsByTagName("pic"));
It returns with the response of "HTML Collection" or, in Chrome, "NodeList". But when I ask for that NodeList's length in Chrome, it returns 0, meaning that the NodeList is formatted incorrectly, or not as I had intended.
In FireFox, the length will return a value of 2, which IS what I had intended.
Here is my source code, without the excess jargon:
var elemPic = [];
function initGallery(xmlFName){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", xmlFName, true);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4){ //since it's offline and local, don't check status == 200
//use a DOMParser, which is in a different file
myCallBack(parseXml(xmlhttp.responseText));
}
}
xmlhttp.send();
}
function myCallBack(xmlDoc){
//window.alert(xmlDoc);
elemPic = xmlDoc.getElementsByTagName("pic");
//window.alert(elemPic);
for(var i = 0; i < elemPic.length; i++){
//whats the source path?
var src = elemPic[i].getElementsByTagName('src')[0].childNodes[0].nodeValue;
window.alert(src);
}
}
And here's my entire source folder, if you want to see it: Source Folder
I'm not sure which of the problems this is:
- DOM xml Object is corrupt
- NodeList is corrupt
- Overarching Chrome issue with getElementsByTagName()
- Other
If you guys could help me identify the exact source of the problem, and the solution, then I would very grateful.