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

本文介绍了临时解压缩文件以在浏览器中查看内容的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想解压缩一个包含html页面，css和js目录的文件.我想暂时将其解压缩，最好在iFrame中查看html.我正在使用正在工作的jszip.我可以加载html，但是如何将图像，js和css文件夹添加到iFrame中?

I want to unzip a file that contains an html page, css, and js directories. I want to unzip this temporarily and view the html in an iFrame, preferrably. I am using jszip which is working. I got the html to load, but how do I add the image, js, and css folders into the iFrame?

这是我到目前为止所拥有的...

Here is what I have so far...

<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和图像文件未显示.我相信我需要进行某种伪造的路由，但是我不确定如何才能做到这一点.感谢您的帮助.

This gets the html, but the js css and image files are not showing up. I believe I need to do some sort of fake routing, but I'm not sure how I would be able to do that. Thanks for your help.

推荐答案

如果zip中的html/js不太复杂，例如AngularJS应用具有局部路由，则可以实现.

If the html/js in the zip is not too complicated, for instance an AngularJS app that has routes for partials, this is possible.

技巧是用以下任一方法替换指向zip文件中的css，js，img src/href网址:

The trick is to replace css,js,img src/href urls that point to a file in the zip with either:

对象网址:URL.createObjectURL(Blob或文件对象)；
数据网址:data:[<mediatype>][;base64],<data>
或者在js和css的情况下，将内容直接注入到适当的元素中

Object Url: URL.createObjectURL(Blob or File object);
Data Url: data:[<mediatype>][;base64],<data>
Or in the case of js and css inject the content directly into the appropriate element

替换src/href引用后，不只是将新的html注入到iframe中.

After replacing the src/href references than just inject the new html into the iframe.

第1步:解析html，以便您可以对其进行操作

Step 1: Parse the html so you can manipulate it

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

Step 2: Find all elements with a relative path (e.g. /imgs/img.jpg) as they are easier to deal with as you can then use that path for 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

Step 3: Replace src,href with object url, data url, or direct content

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

Step 4: Get the new html text and inject it into the 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演示-演示替换src/href网址

JSFiddle Demo - Demonstrates replacing the src/href urls

为安全起见，如果您使用的是不知道其内容的zip文件，则应在受保护的iframe中运行整个应用程序

As a security note, if you are using zip files that you do not know the contents of, you should run the whole app in a protected iframe

这篇关于临时解压缩文件以在浏览器中查看内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

MediaType