Entpacken Sie vorübergehend eine Datei, um Inhalte in einem Browser anzuzeigen

Question

Ich möchte eine Datei entpacken, die eine HTML-Seite, CSS und JS-Verzeichnisse enthält. Ich möchte dies vorübergehend entpacken und den HTML-Code in einem iFrame anzeigen, vorzugsweise. Ich benutze jszip, das funktioniert. Ich habe den HTML-Code geladen, aber wie füge ich die Bilder-, JS- und CSS-Ordner in den iFrame ein? Hier

ist das, was ich bisher ...

<div id="jszip_utils"></div> 
<iframe id="iframe"></iframe> 
<script type="text/javascript"> 
    function showError(elt, err) { 
     elt.innerHTML = "<p class='alert alert-danger'>" + err + "</p>"; 
    } 
    function showContent(elt, content) { 
     elt.innerHTML = "<p class='alert alert-success'>loaded !<br/>" + 
      "Content = " + content + "</p>"; 
    } 
    var htmltext = JSZipUtils.getBinaryContent("/zip/myWebsite.zip", function (err, data) { 
     var elt = document.getElementById('jszip_utils'); 
     if (err) { 
      showError(elt, err); 
      return; 
     } 
     try { 
      JSZip.loadAsync(data) 
       .then(function (zip) { 
        for(var name in zip.files) { 
         if (name.substring(name.lastIndexOf('.') + 1) === "html") { 
          return zip.file(name).async("string"); 
         } 
        } 
        return zip.file("").async("string"); 
       }) 
       .then(function success(text) { 
        $('#iframe').contents().find('html').html(text); 
        showContent(elt, text); 
       }, function error(e) { 
        showError(elt, e); 
       }); 
     } catch(e) { 
      showError(elt, e); 
     } 
    }); 
</script> 

Das die HTML bekommt, aber die js css und Bilddateien werden nicht angezeigt. Ich glaube, ich muss ein falsches Routing machen, aber ich bin mir nicht sicher, wie ich das machen könnte. Danke für Ihre Hilfe.

Answer 1

Wenn die html/js in der zip ist nicht zu kompliziert, zum Beispiel eine AngularJS App, die Routen für Teiltöne hat, ist dies möglich.

Der Trick ist, css, js, img src/href Urls diesem Punkt in eine Datei im Zip mit entweder zu ersetzen:

• Object Url: URL.createObjectURL (Blob oder File-Objekt);
• Data Url: data:[<mediatype>][;base64],<data>
• Oder im Fall von js und CSS injiziert, um die Inhalte direkt in das entsprechende Element

Nachdem die src/href Referenzen zu ersetzen, als nur den neuen HTML-Code in den iframe injizieren.

Schritt 1: html Parsen, so dass Sie es

//html from a call like zip.file("index.html").async("string") 
let parser = new DOMParser; 
let doc = parser.parseFromString(html,"text/html"); 

Schritt 2 manipulieren können: Alle Elemente mit einem relativen Pfad (zB /imgs/img.jpg), wie sie sind einfacher zu handhaben wie Sie dann diesen Weg für zip.file

//Simply finds all resource elements, then filters all that dont start with '/' 
var elements = jQuery("link[href],script[src],img[src]",doc).filter(function(){ 
    return /^\//.test(this.href || this.src); 
}); 

Schritt 3 verwenden: Ersetzen src, href mit dem Objekt-uRL, Daten uRL oder direkt Inhalt

Schritt 4: Holen Sie sich den neuen HTML-Text und injiziert sie in die iframe

let newHTML = doc.documentElement.outerHTML; 
var viewer = document.querySelector('#iframeID'); 
viewer = viewer.contentWindow || viewer.contentDocument.document || viewer.contentDocument; 

viewer.document.open(); 
viewer.document.write(html); 
viewer.document.close(); 

JSFiddle Demo - Demonstriert die src/href Urls ersetzt

Als Sicherheitshinweis, wenn Sie ZIP-Dateien verwenden, Sie wissen nicht den Inhalt von, sollten Sie die ganze App in einem geschützten iframe