So laden Sie eine txt - /csv-Datei in javascript-string/array, während offline

Ich habe ein kleines html/javascript Webseite, ich will laufen in einem browser offline.

In der gleichen Weise kann die Seite mit einem Bild oder einer css-Datei und es verwenden, während Sie offline, ich möchte eine 3mb-Arbeitsblatt, das javascript liest in einem 2d-array, und ich bin der Hoffnung, für etwas, das funktionieren würde auf IE8 sowie modernen Browsern.

C:\Folder\index.html
C:\Folder\code.js
C:\Folder\picture.png
C:\Folder\spreadsheet.csv

Habe ich gefunden, mehrere Methoden online wie 

<script src="jquery-csv.js"></script>
var table = $.csv.toArrays("spreadsheet.csv");

oder 

d3.text('spreadsheet.csv', function(error, _data){
            var table = d3.csv.parseRows(_data);
        });

oder

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "data.txt",
        dataType: "text",
        success: function(data) {processData(data);}
     });
});

Aber ich Neige zu same-origin-policy Fehler wie:

XMLHttpRequest cannot load file://data.txt. Received an invalid response. Origin 'null' is therefore not allowed access.

Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.

Ich kann nicht scheinen, um diese offline zu arbeiten. Wie könnte ich dies erreichen?

Edit:

Ich bin geschafft, den folgenden arbeiten für eine text-Datei, die nur auf Firefox mit der CSVToArray Funktion gefunden hier, die ist ziemlich träge mit einer Datei dieser Größe, und eine versteckte iframe.

Letztlich wäre es wünschenswert, wenn dieser in der Lage war, läuft auf IE8, und wenn ich eine csv statt txt-Datei, aber es ist wenigstens ein Anfang.

<iframe style="display:none;" id='text' src = 'file.txt' onload='read_text_file()'>
</iframe>

<script type="text/javascript" >

function read_text_file() {
    var text = document.getElementById('text').contentDocument.body.firstChild.innerHTML;
    var table = CSVToArray(text); 
}

Für IE8 ich es geschafft, diese arbeiten auf einem kleinen Maßstab, aber mit der 3mb-Datei gelegentlich ein Absturz des Browsers und wird immer accost der Benutzer mit Tonnen von Warnmeldungen, die activex verwendet wird, und eine Welle von Warnungen, das Skript wird den computer verlangsamen.

    window.onLoad = readFileInIE("file.csv");

    function readFileInIE(filePath) {

        try {
            var fso = new ActiveXObject("Scripting.FileSystemObject");      
            var file = fso.OpenTextFile(filePath, true);                                    
            var text = file.ReadAll();  
            var table = CSVToArray(text);
            file.Close();

            return fileContent;
        } catch (e) {
            if (e.number == -2146827859) {
                alert('Unable to access local files due to browser security settings. ' + 
                    'To overcome this, go to Tools->Internet Options->Security->Custom Level. ' + 
                    'Find the setting for "Initialize and script ActiveX controls not marked as safe" and change it to "Enable" or "Prompt"'); 
            }
        }
    }
nicht sicher, aber maby html5 file oder jquery-offline.js kann hilft
Dies ist ein problem von lokale Datei-Zugriff in JavaScript
Sie können einfach hard-code, der CSV-versteckt in einer <textarea> - tag...
html5 IndexedDB könnte Ihre Probleme lösen -- Sie haben würde, um es zu laden in die IndexedDB und dann Lesen Sie es von dort anstelle von der Datei-System. Ich bin langsam versucht, um den übergang von der HTML5-File-System-API, die war entfernt von spec, Firefox Ansprüche alles, was getan werden kann, mit der veralteten (nur impleneted in Chrom) system getan werden kann, IndexedDB. Der file-system-api konnte hartnäckig sein musst, würde schauen müssen in es ein bisschen mehr mit der IndexedDB.

InformationsquelleAutor Charles Clayton | 2014-06-21

  1. 1

    Dies funktioniert möglicherweise nicht im IE8, aber die HTML5-API ist sehr nützlich für diese. Verwenden Sie einfach:

    window.onload = function() {
    var fileInput = document.getElementById('fileInput');             

    fileInput.addEventListener('change', function(e) {
        var file = fileInput.files[0];
        var textType = //format you'd like to recieve;
        if (file.type.match(textType)) {
            var reader = new FileReader();              
            reader.onload = function(e) {
                //apply magic here
            }
            reader.readAsText(file);
        }
        else
        {
            fileDisplayArea.innerText ="Sorry matey, can't help you with that filetype."
        }
    });    
}

    Dann nach, dass eine einfache .html-Datei, die so aussieht würde den trick tun:

    <html lang="en">
    <head>        
        <script src="script.js"></script>          
    </head>
    <body>
        <div id="page-wrapper">
            <div> 
                <input type="file" id="fileInput">
            </div>
            <pre id="fileDisplayArea"></pre> //display any output here
        </div>
    </body>
</html>
    Können Sie erklären, wie dies zu nutzen? Wo füge ich das mit dem Namen?
    Ich habe bearbeitet die Antwort, dies manuell zu erledigen. Sie automatisieren können, aber ich denke, das ist außerhalb des Anwendungsbereichs dieser Frage.

    InformationsquelleAutor User

  2. 0

    Es ist nicht ganz klar, was Sie tun möchten.

    Mittels jQuery ist es möglich, Sie zu ändern Ereignisse, die geschehen, in die DOM. Mit diesem könnten Sie möglicherweise speichern Sie den source-code, wenn Sie fertig sind, änderungen vorzunehmen. Sie würde dann ersetzen müssen, die Ihren aktuellen source-code mit dem gespeicherten code zu verwenden, werden die änderungen beim nächsten öffnen der Seite. Allerdings wäre dies ein sehr mühsamer Prozess, und es gibt wahrscheinlich eine Reihe von besseren Möglichkeiten, das zu erreichen, was Sie wollen, zu tun, je nachdem, was das ist.

    Auch in Bezug auf Shota ' s post. Sie können nicht AJAX verwenden, es sei denn, Sie haben einen server im hintergrund laufen. Wenn Sie sich entscheiden, um das system auf einem server gibt es eine Reihe von Optionen für das vollenden, was Sie wollen.

    InformationsquelleAutor Ryan B

  3. 0

    Mein Kommentar zu lang werden zu lassen.

    Können Sie keine Dateien in der gleichen Weise wie die Medien. Die einfachste Möglichkeit wäre, zum Vorverarbeiten der csv in ein js-array und fügen Sie dann die csv-wie js <script src="mydata.csv.js"></script>.

    Von offline du meinst, lokale Dateien und nicht öffentliche? Der erste Vorschlag wäre, Ihren browser zu aktualisieren. Es spielt keine ruhigen Sinn machen, wenn Ihr eine lokale Datei, unterstützt alle gängigen Browser. Sorry, ich bin sicher, Sie haben Gründe, warum Sie nicht können. Aber ein Upgrade bekommen würde, um die nicht Ecmascript-5-Unterstützung in ie8.

    Etwa das cross-origin-Richtlinie, die Sie würde ausführen müssen Sie Ihre Datei auf einem lokalen webserver. Damit Ihre html-Seite wäre so etwas wie localhost:8080 und die csv-localhost:8080/mydata.csv diese gibt Privilegien, um den html-Code ermöglichen den Zugriff auf die csv-Datei wie Sie jetzt sind auf der gleichen domain. D3, jquerycsv sollte jetzt funktionieren. Seine ein großes Sicherheitsrisiko, so dass beliebige html-Datei, auf das Dateisystem zuzugreifen frei.

    Wenn ein lokaler server ist keine option. Wählen Sie die Datei jedes mal, wenn Sie laden mit einem input-Feld. Dies gibt dem browser die Berechtigungen zum Zugriff auf diese Datei.

    Nach Auswahl der Datei, um die Inhalte zu Lesen, die für die wichtigsten Browser (mit Ecma5) in FileReader auf MDN, und ein Beispiel der Nutzung können gefunden werden hier. Für ie8 + 9 es ist VBscript-Unterstützung Dateien Lesen. Sie können VB-wie JS mit <script type="text/vbscript"></script>

    InformationsquelleAutor Lex

  4. 0

    Wenn Sie wirklich wollen, um auf lokale Ressourcen zugreifen, die von einer Server-Seite, dann müssen Sie auch eine lokale Seite, die ermöglicht den Zugriff. Eine lokale HTML-Seite innerhalb einer <iframe> konnte, Lesen Sie die text-Datei und poste den Inhalt der Hauptseite über window.postMessage().

    Es könnte auch ein Weg sein, mit HTML5-iframes und die sandbox - Attribut, aber nicht im IE9 und unten.

    finden Sie unter:

    InformationsquelleAutor Quasimodo's clone

  5. 0

    Als Sie realisiert haben, alle AJAX-basierte Lösung wird beeinflusst durch die Sicherheitsbeschränkungen für lokale Dateien zugreifen. Statt finden, browser-spezifische workarounds, könnte man die JSONP Weise vermeidet AJAX.

    Dieser würde verlangen, dass Sie vor der Verarbeitung der CSV-Daten und speichern Sie es in einen mehr JS-freundlichen format. Aber das wäre eine gute Idee auf jeden Fall, als native JS-Analyse wird wahrscheinlich besser abschneiden als ein CSV-parser implementiert in JS.

    Könnte es in etwa so Aussehen:

    index.html 

        </head>
    <body>
        <div id="page-wrapper">
        <div> 
            <input type="file" id="fileInput">
        </div>
        <pre id="fileDisplayArea"></pre> <!-- display any output here -->

        </div>
        <script src="script.js"></script>
        <script src="data.js"></script>
    </body>
</html>

    script.js

    function processData(data) {
    //Your logic
    //(will be called once data.js is loaded)
}

    data.js

    processData([
    ["your", "data"]
]);

    InformationsquelleAutor pixelistik

Schreibe einen Kommentar