如何将html目录的zip加载到iframe(JS)中?

时间:2017-05-05 14:33:13

标签: javascript iframe jszip

我有一个包含HTML文件和图片的zip文件:

.
├── index.html
├── img/
    └── test.png

html包含使用相对网址的图片:<img src="img/test.png">如果要在浏览器中加载此html文件,则会显示图像。同样,其他链接资产也会加载,例如带有相对URL的样式和脚本(如果有的话)。

我要做的是使用jszip将index.html(带有相关资源)加载到iframe中。

这是我到目前为止所做的:

<iframe id="output"></iframe>
<script>
    var iframe = document.getElementById("output");
    JSZipUtils.getBinaryContent('/test.zip', function(err, data) {
        if(err) {
            throw err;
        }

        JSZip.loadAsync(data).then(function (zip) {
            var index = zip.files['index.html'].async("string")
                .then(function(data){
                    // Load data (string with page HTML) into iframe
                    var iframeWindow = iframe;
                    if(iframeWindow.contentWindow) {
                        iframeWindow = iframeWindow.contentWindow;
                    } else {
                        if(iframeWindow.contentDocument.document) {
                            iframeWindow = iframeWindow.contentDocument.document;
                        } else {
                            iframeWIndow = iframeWindow.contentDocument;
                        }
                    }
                    iframeWindow.document.open();
                    iframeWindow.document.write(data);
                    iframeWindow.document.close();
                });
        });
    });
</script>

脚本正确地将HTML文件加载到iframe中,但是,正如预期的那样,图像被破坏了。

我能想到解决此问题的唯一方法是用data url替换每个相对网址。但是,我不知道该怎么做。 (我也不确定它是否会起作用。)有任何建议吗?

0 个答案:

没有答案