ファイルを一時的に解凍してブラウザ内のコンテンツを表示します。

Question

htmlページ、css、およびjsディレクトリを含むファイルを解凍します。私はこれを一時的に解凍し、htmlをiFrameで表示することをお勧めします。私は働いているjszipを使用しています。読み込むhtmlがありますが、iFrameにイメージ、js、cssの各フォルダを追加するにはどうすればいいですか？ここで

私がこれまで持っているものです...

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

これはHTMLを取得しますが、JSのCSSと画像ファイルが表示されません。私は何らかの偽のルーティングをする必要があると信じていますが、どうすればそのことができるのか分かりません。ご協力いただきありがとうございます。

Answer 1

zipのhtml/jsがあまりにも複雑でない場合、たとえばAngularJSアプリケーションの場合は部分的なルートがありますが、これも可能です。

トリックは、JS、のいずれかでZIPでファイルを指すのIMG SRC/HREF URLのCSSを交換することである。

• Object Url：URL.createObjectURL（BLOBまたはファイル・オブジェクト）。
• Data Url：data:[<mediatype>][;base64],<data>
• またはJSとCSSの場合にだけIFRAMEに新しいHTMLを注入よりSRC/HREF参照を交換した後、直接適切な要素

にコンテンツを注入します。

ステップ1：あなたが操作できるように、HTMLを解析、それ

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

ステップ2：相対パスを持つすべての要素を検索する（例えば/imgs/img.jpg）彼らが対処するのが容易であるとして、あなたはその後、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); 
}); 

ステップ3のためにそのパスを使用することができますよう：SRC、オブジェクトのURLとHREF、データのURL、または直接コンテンツを交換

//assume element is the html element: <script src="/js/main.js"></script> 
zip.file(element.src).async("string").then(jsText=>{ 
    element.src = "data:text/javascript,"+encodeURIComponent(jsText); 
}); 

ステップ4：新しいHTMLテキストを取得し、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に注入は - あなたはzipファイルを使用している場合は、セキュリティ上の注意点としては

SRC/HREF URLを置き換える示すことあなたはその内容を知らないので、保護されたiframeでアプリ全体を実行する必要があります