Question

我有一个包含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替换每个相对网址。但是，我不知道该怎么做。（我也不确定它是否会起作用。）有任何建议吗？

如何将html目录的zip加载到iframe（JS）中？

0 个答案: