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