临时解压缩文件以在浏览器中查看内容

Question

我想解压缩包含 html 页面、css 和 js 目录的文件。我想暂时解压缩它并在 iFrame 中查看 html，最好。我正在使用正在运行的 jszip。我已加载 html，但如何将图像、js 和 css 文件夹添加到 iFrame 中？

这是我目前所知道的...

<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 具有部分路由的应用程序，这是可能的。

诀窍是将指向 zip 文件的 css,js,img src/href urls 替换为：

Object Url：URL.createObjectURL（Blob 或文件对象）；
Data Url: data:[<mediatype>][;base64],<data>
或者在js的情况下css将内容直接注入到合适的元素中

替换 src/href 引用后，将新的 html 注入 iframe。

第 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,href 替换为对象 url、数据 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 - 演示替换 src/href urls

作为安全说明，如果您使用的是不知道其内容的 zip 文件，您应该运行将整个应用程序放在受保护的 iframe 中

临时解压缩文件以在浏览器中查看内容

Temporarily unzip a file to view contents within a browser

html

javascript

iframe

jquery

jszip