7

I am trying to learn how to read into a web page data in an XML file. This is a static HTML page. I do not want a web server and I cannot use Ajax. The XML file is local (in the same directory as the HTML file). I want this to work in a Chrome browser.

What I need to do is:

  1. Read the XML file on the page onLoad event.
  2. Use innerHTML to insert the XML data into a div.

My problem is in reading the XML file. All of the examples I have found I think will only work if there is a web server running, which I have to avoid.

Mr. Polywhirl
  • 42,981
  • 12
  • 84
  • 132
MES5464
  • 87
  • 1
  • 2
  • 6

7 Answers7

2

If you're reading another file the only way to do that with front end JS is another request (ajax). If this were node.js it would be different because node can access the filesystem. Alternatively if you get the xml into a javascript string on the same page, you can manipulate it. There are a number of good libraries (jquery's parseXML).

Zeke Nierenberg
  • 2,216
  • 1
  • 19
  • 30
  • 1
    I think the HTML and XML are all on the same system as the browser. – Jonathan M Dec 31 '12 at 22:35
  • 1
    yes, they are, but you can't have both. If you run an html file with a script in it, that file can't be an xml file also. You could have some xml in a javascript variable, though. The point I was making was that you can't load another file w/o ajax – Zeke Nierenberg Jan 01 '13 at 06:19
2

Original answer here: https://stackoverflow.com/a/48633464/8612509

So, I might be a little late to the party, but this is to help anybody else who's been ripping his/her hair out looking for a solution to this.

First of all, CORS needs to be allowed in the browser if you're not running your HTML file off a server. Second, I found that the code snippets most people refer to in these kind of threads don't work for loading local XML-files. Try this (example taken from the official docs):

var xhr = new XMLHttpRequest();
xhr.open('GET', 'file.xml', true);

xhr.timeout = 2000; // time in milliseconds

xhr.onload = function () {
  // Request finished. Do processing here.
  var xmlDoc = this.responseXML; // <- Here's your XML file
};

xhr.ontimeout = function (e) {
  // XMLHttpRequest timed out. Do something here.
};

xhr.send(null);

The method (1st arg) is ignored in xhr.open if you're referring to a local file, and async (3rd arg) is true by default, so you really just need to point to your file and then parse the result! =)

Good luck!

adamxtokyo
  • 21
  • 4
  • How to enable CORS in browser? – alibttb Nov 18 '19 at 14:36
  • After a quick Google search, I found this article: https://teckangaroo.com/chrome-disable-web-security/ – adamxtokyo Nov 20 '19 at 09:52
  • its give CORS error - 'file:///D:/Temp/XPath/books.xml' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https, isolated-app. – Rajdeep Oct 03 '22 at 06:56
1

Since you're only targeting Chrome, you could take a look at the File API. You'd have to prompt the user to select the file or drop it into a specific area of the page though, which might be something you'd rather avoid, or not. The following HTML5 Rocks article should help.

rmobis
  • 26,129
  • 8
  • 64
  • 65
1

Assuming the HTML, XML and browser are all on the same machine, you might try using an Iframe in the HTML that references the XML using a URL like file:\.

Jonathan M
  • 17,145
  • 9
  • 58
  • 91
0

You could do something like this:

<html>
<head>
<script type="text/javascript">
//If using jQuery, select the tag using something like this to manipulate  
//the look of the xml tags and stuff.
$('#xframe').attr('style', 'thisxmltag.....');
</script>
</head>
<body>
...
<frame id="xframe" src="the_xml_doc"></src>
</body>
</html>
0
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", file_Location, false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById(your_div_id).value =        
xmlDoc.getElementsByTagName(The_tag_in_xml_you_want_to_display) 
[0].childNodes[0].nodeValue;
Moran Menahem
  • 3
  • 1
  • 5
0

Works with IE11

<head>
    // To be hidden with a better method than using width and height
    <OBJECT id="data1" data="data.xml" width="1px" height="1px"></OBJECT>

    // to work offline
    <script src="lib/jquery-2.2.3.min.js"></script>
</head>

<body>
    <script>
    var TheDocument = document.getElementById("data1").contentDocument;
    var Customers = TheDocument.getElementsByTagName("myListofCustomers");
    var val1 = Customers[0].getElementsByTagName("Name")[0].childNodes[0].nodeValue;
Luc
  • 1