CODEWITHSUNDEEP
javascriptxml
MES5464
MES5464

Reputation: 87

Read XML File using Javascript from a Local Folder

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.

Upvotes: 7

Views: 46351

Answers (7)

adamxtokyo
adamxtokyo

Reputation: 21

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!

Upvotes: 2

Luc
Luc

Reputation: 1

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;

Upvotes: 0

Moran Menahem
Moran Menahem

Reputation: 3

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;

Upvotes: 0

user1334069
user1334069

Reputation:

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>

Upvotes: 0

Jonathan M
Jonathan M

Reputation: 17451

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:\.

Upvotes: 1

rmobis
rmobis

Reputation: 26992

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.

Upvotes: 1

Zeke Nierenberg
Zeke Nierenberg

Reputation: 2206

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).

Upvotes: 2

Related Questions