2016-12-22 12 views
7

के साथ स्थानीय एक्सएमएल पढ़ें इस समय, security policy Chromium--allow-file-access-from-files के बिना AJAX के माध्यम से स्थानीय फ़ाइलों को नहीं पढ़ सकता है। लेकिन मुझे वर्तमान में एक वेब एप्लिकेशन बनाने की आवश्यकता है जहां डेटाबेस एक xml-file (चरम मामले में, जेसन) है, जो index.html के साथ एक डीआईआर में स्थित है। यह समझा जाता है कि उपयोगकर्ता स्थानीय रूप से इस एप्लिकेशन को चला सकता है। क्या xml- (json-) फ़ाइल पढ़ने के लिए वर्कअराउंड हैं, बिना किसी फ़ंक्शन में लपेटकर और जेएस एक्सटेंशन में परिवर्तन?जेएस

loadXMLFile('./file.xml').then(xml => { 
    // working with xml 
}); 

function loadXMLFile(filename) { 
    return new Promise(function(resolve, reject) { 
     if('ActiveXObject' in window) { 
      // If is IE 
      var xmlDoc = new ActiveXObject('Microsoft.XMLDOM'); 
      xmlDoc.async = false; 
      xmlDoc.load(filename); 

      resolve(xmlDoc.xml); 
     } else { 
      /* 
      * how to read xml file if is not IE? 
      * ... 
      * resolve(something); 
      */ 
     } 

    } 
} 
+0

यदि कोई कुकी इच्छित उपयोग के लिए पर्याप्त डेटा स्टोर नहीं कर सकती है, तो [स्थानीय संग्रहण] के बारे में कैसे (https://developer.mozilla.org/en -US/docs/वेब/एपीआई/खिड़की/localStorage)? –

+0

वर्तमान में मैं अभी आपको क्या चाहिए, 'एक प्लगइन या कुछ और? के माध्यम से समारोह के बिना क्रोम में एक xml/json लोड की स्पष्ट नहीं कर रहा हूँ' कृपया थोड़ा और विस्तार से बताएं। –

+0

http://stackoverflow.com/questions/7949752/cross-browser-javascript-xml-parsing –

उत्तर

1

उपयोग document.implementation.createDocument("", "", null)

बजाय

new ActiveXObject('Microsoft.XMLDOM')

आप GOOGLE के माध्यम से एपीआई पा सकते हैं। सौभाग्य।

1

यदि मैं सही ढंग से समझता हूं, तो वितरित करने योग्य स्थानीय रूप से चलाने का इरादा है ताकि आप उपयोगकर्ता की मशीन पर स्थानीय फ़ाइल पहुंच के लिए कोई झंडे सेट नहीं कर पाएंगे। मैंने चुटकी में कुछ किया है इसे nw.js जैसे कुछ निष्पादन योग्य के रूप में पैक करना और बाहरी डेटा फ़ाइलों को रखना है। अन्यथा, आप शायद एक जेएस फ़ाइल में एक JSON स्कीमा का उपयोग कर स्क्रिप्ट के रूप में लोड करने की सोच रहे हैं।

1

मुझे पहले भी इसी तरह की समस्या थी। मैं PHP का उपयोग कर HTML फ़ाइल को HTML में एम्बेड करके हल करता हूं। चूंकि एप्लिकेशन डिस्क, आकार, कैश इत्यादि से स्थानीय रूप से लोड किया गया है, इसलिए कोई चिंता नहीं है।

आप Webpack का उपयोग कर रहे हैं, तो आप के बजाय सीधे फ़ाइल this या this की तरह एक लोडर, जिस स्थिति में फ़ाइल जिसके परिणामस्वरूप बंडल जावास्क्रिप्ट में शामिल किया गया है का उपयोग कर आयात कर सकते हैं।

4

XMLHttpRequest() या --allow-file-access-from-files झंडा क्रोमियम उदाहरण लांच पर सेट बिना <link> तत्व डिफ़ॉल्ट रूप से सक्षम नहीं है का उपयोग कर क्रोमियम पर file: प्रोटोकॉल को एक्सेस करना।

--allow-file-access-from-files

डिफ़ॉल्ट रूप से, फ़ाइल: // यूआरआई: // यूआरआई अन्य फ़ाइल नहीं पढ़ सकते हैं। यह उन डेवलपर्स के लिए ओवरराइड है जिन्हें परीक्षण के लिए पुराने व्यवहार की आवश्यकता है।


फिलहाल, कारण सुरक्षा नीति के लिए क्रोमियम --allow-file-access-from-files बिना ajax के माध्यम से स्थानीय फ़ाइलें नहीं पढ़ सकता। लेकिन मैं वर्तमान में एक वेब अनुप्रयोग बनाने की आवश्यकता है जहां डेटाबेस xml-file (चरम मामले में, जेसन) है, index.html के साथ एक डीआईआर में स्थित है। यह समझा जाता है कि उपयोगकर्ता स्थानीय रूप से इस एप्लिकेशन को चला सकता है। क्या बिना किसी फ़ंक्शन में लपेटकर और जेएस एक्सटेंशन में परिवर्तन के बिना xml- (json-) फ़ाइल पढ़ने के लिए कामकाज हैं?

तो उपयोगकर्ता को पता है कि स्थानीय फ़ाइलों आवेदन के द्वारा प्रयोग की जाने वाली आप उपयोगकर्ता स्थानीय फाइल सिस्टम, प्रक्रिया फ़ाइल FileReader का उपयोग करने से फाइल को अपलोड करने के लिए उपयोगकर्ता के लिए <input type="file"> तत्व का उपयोग कर सकते हैं, तो आवेदन के साथ आगे बढ़ें।

अन्य, उपयोगकर्ता को सलाह दें कि आवेदन के उपयोग के लिए --allow-file-access-from-files ध्वज सेट के साथ क्रोमियम लॉन्च करने की आवश्यकता है, जो इस उद्देश्य के लिए लॉन्चर बनाकर किया जा सकता है, क्रोमियम के उदाहरण के लिए एक अलग उपयोगकर्ता डेटा निर्देशिका निर्दिष्ट करता है। लांचर हो सकता है, उदाहरण के लिए

/usr/bin/chromium-browser --user-data-dir="/home/user/.config/chromium-temp" --allow-file-access-from-files 

भी देखें How do I make the Google Chrome flag “--allow-file-access-from-files” permanent?

उपरोक्त आदेश भी एक डेस्कटॉप लांचर बनाने के बिना terminal

$ /usr/bin/chromium-browser --user-data-dir="/home/user/.config/chromium-temp" --allow-file-access-from-files 

से चलाया जा सकता है, जहां क्रोमियम का उदाहरण बंद होता है

$ rm -rf /home/user/.config/chromium-temp 

क्रोमियम के उदाहरण के लिए कॉन्फ़िगरेशन फ़ोल्डर को हटाने के लिए।

एक बार ध्वज सेट है, उपयोगकर्ता rel="import" विशेषता के साथ <link> तत्व और स्थानीय फाइल करने के लिए href की ओर इशारा करते और XMLHttpRequest के अलावा अन्य विकल्प फ़ाइल पाने के लिए "application/xml" को type सेट, शामिल कर सकते हैं। प्रवेश XMLdocument का उपयोग कर

const doc = document.querySelector("link[rel=import]").import; 

Is there a way to know if a link/script is still pending or has it failed देखें।


एक अन्य विकल्प है, हालांकि अधिक शामिल, requestFileSystem उपयोग करने के लिए LocalFileSystem पर फ़ाइल को स्टोर करने के लिए किया जाएगा।

देखें

या बना सकते हैं या एक क्रोम ऐप में बदलाव करें और प्रयोग

chrome.fileSystem 

Se ई GoogleChrome/chrome-app-samples/filesystem-access


सबसे आसान तरीका सकारात्मक उपयोगकर्ता कार्रवाई द्वारा फ़ाइल अपलोड के साधन प्रदान करना होगा; अपलोड की गई फाइल को संसाधित करें, फिर एप्लिकेशन के साथ आगे बढ़ें।

const reader = new FileReader; 
 

 
const parser = new DOMParser; 
 

 
const startApp = function startApp(xml) { 
 
    return Promise.resolve(xml || doc) 
 
}; 
 

 
const fileUpload = document.getElementById("fileupload"); 
 

 
const label = document.querySelector("label[for=fileupload]"); 
 

 
const handleAppStart = function handleStartApp(xml) { 
 
    console.log("xml document:", xml); 
 
    label.innerHTML = currentFileName + " successfully uploaded"; 
 
    // do app stuff 
 
} 
 

 
const handleError = function handleError(err) { 
 
    console.error(err) 
 
} 
 

 
let doc; 
 
let currentFileName; 
 

 
reader.addEventListener("loadend", handleFileRead); 
 

 
reader.addEventListener("error", handleError); 
 

 
function handleFileRead(event) { 
 
    label.innerHTML = ""; 
 
    currentFileName = ""; 
 
    try { 
 
    doc = parser.parseFromString(reader.result, "application/xml"); 
 
    fileUpload.value = ""; 
 

 
    startApp(doc) 
 
    .then(function(data) { 
 
     handleAppStart(data) 
 
    }) 
 
    .catch(handleError); 
 
    } catch (e) { 
 
    handleError(e); 
 
    } 
 
} 
 

 
function handleFileUpload(event) { 
 
    let file = fileUpload.files[0]; 
 
    if (/xml/.test(file.type)) { 
 
    reader.readAsText(file); 
 
    currentFileName = file.name; 
 
    } 
 
} 
 

 
fileUpload.addEventListener("change", handleFileUpload)
<input type="file" name="fileupload" id="fileupload" accept=".xml" /> 
 
<label for="fileupload"></label>

+0

मन में @VasyaShmarovoz भी देखें [DevTools कार्यस्थान के साथ ऊपर हठ सेट] (https://developers.google.com/web/tools/setup/setup आता है -workflow)। – guest271314

1

आप DOMParser का उपयोग कर पाठ का एक स्ट्रिंग के माध्यम से एक्सएमएल लोड कर सकते हैं, बस अपने फ़ाइल को लोड और .parseFromString का उपयोग कर पाठ पार्स। यह देखने के लिए कि क्या DOMParser समर्थित है, (window.DOMParser) युक्त किसी भी कथन का उपयोग कर सकते हैं