2012-12-31 30 views
5

Sto cercando di imparare come leggere i dati di una pagina web in un file XML. Questa è una pagina HTML statica. Non voglio un server web e non posso usare Ajax. Il file XML è locale (nella stessa directory del file HTML). Voglio che funzioni in un browser Chrome.Leggere il file XML utilizzando Javascript da una cartella locale

Che cosa devo fare è:

  1. leggere il file XML sull'evento page onLoad.
  2. Utilizzare innerHTML per inserire i dati XML in un div.

Il mio problema è nella lettura del file XML. Tutti gli esempi che ho trovato penso funzioneranno solo se c'è un server web in esecuzione, cosa che devo evitare.

+1

Non possibile senza AJAX – PitaJ

+1

possibile duplicato di [Può javascript accedere a un file system?] (Http://stackoverflow.com/questions/1087246/can-javascript-access-a-filesystem) – Barmar

+0

Dov'è l'XML? Lato server o browser? –

risposta

2

Se stai leggendo un altro file, l'unico modo per farlo con JS front-end è un'altra richiesta (ajax). Se questo fosse node.js sarebbe diverso perché il nodo può accedere al filesystem. In alternativa, se si ottiene l'xml in una stringa javascript sulla stessa pagina, è possibile manipolarlo. Ci sono un buon numero di librerie buone (paresXML di jquery).

+1

Penso che l'HTML e l'XML siano tutti sullo stesso sistema del browser. –

+0

sì, lo sono, ma non puoi averli entrambi. Se si esegue un file html con uno script, il file non può essere anche un file xml.Si potrebbe avere qualche xml in una variabile javascript, però. Il punto che stavo facendo era che non si può caricare un altro file senza ajax –

1

Poiché hai scelto come target solo Chrome, puoi dare un'occhiata allo File API. Dovresti chiedere all'utente di selezionare il file o di farlo cadere in un'area specifica della pagina, il che potrebbe essere qualcosa che preferiresti evitare, oppure no. Il seguente HTML5 Rocks article dovrebbe aiutare.

1

Supponendo che HTML, XML e browser si trovino tutti sulla stessa macchina, si potrebbe provare a utilizzare un Iframe nel codice HTML che fa riferimento all'XML utilizzando un file di tipo URL: \.

0

Si potrebbe fare qualcosa di simile:

<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; 
0

Funziona con 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; 
0

risposta originale qui: https://stackoverflow.com/a/48633464/8612509

Quindi, potrei essere un po 'tardi per la festa, ma questo è per aiutare chiunque altro abbia strappato i capelli alla ricerca di una soluzione t o questo.

Prima di tutto, CORS deve essere consentito nel browser se non si sta eseguendo il file HTML da un server. In secondo luogo, ho scoperto che i frammenti di codice a cui la maggior parte delle persone fa riferimento in questo tipo di thread non funzionano per caricare file XML locali. Prova questo (esempio tratto dalla documentazione ufficiale):

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

Il metodo (1 ° arg) viene ignorato in xhr.open se ti riferisci a un file locale, e asincrone (3 arg) è vero per default , quindi hai solo bisogno di puntare al tuo file e quindi analizzare il risultato! =)

Buona fortuna!

Problemi correlati