将 Blob 设置为 iframe 的“src”

Question

以下代码在Chrome中完美运行。

<script>
function myFunction() {
var blob = new Blob(['<a id="a"><b id="b">hey!</b></a>'], {type : 'text/html'});
var newurl = window.URL.createObjectURL(blob);
    document.getElementById("myFrame").src = newurl;
}
</script>

但是在IE中不起作用。有人能告诉我这里错在哪吗？

iframe的“src”也设置为如下所示的blob。

<iframe id="myFrame" src="blob:0827B944-D600-410D-8356-96E71F316FE4"></iframe>

注意： 我也尝试了window.navigator.msSaveOrOpenBlob(newBlob)，但目前还没有成功。

- Hiran

Answer 1

根据http://caniuse.com/#feat=datauri，IE 11仅部分支持Data URI。它指出支持仅限于图像和链接资源，如CSS或JS，而不是HTML文件。

非base64编码的SVG数据URI需要进行URI编码才能在IE和Firefox中正常工作，根据此规范。

- Emma

---

是的，目前IE存在这个限制。 - Hiran

Answer 2

我为Blob作为iFrame源编写了一个示例，并且在一个重要的注意事项/警告下运行良好：

const blobContent = new Blob([getIFrameContent()], {type: "text/html"});
var iFrame = document.createElement("iframe");
iFrame.src = URL.createObjectURL(blobContent);
parent.appendChild(iFrame);

使用 Blob 的 iFrame 不会自动重定向协议，也就是说，即使在 Chrome 61（当前版本）中，在 iframe 的 head 或 body 中包含 <script src="//domain.com/script.js"</script>，JS 脚本也不会被加载，因为它不知道如何处理“blob”作为协议的源。这是一个非常严重的警告。

解决方案：以下代码将解决此问题，它主要用于 VPAID 广告，并适用于自动协议：

function createIFrame(iframeContent) {
    let iFrame = document.createElement("iframe");
    iFrame.src = "about:blank";
    iFrameContainer.innerHTML = ""; // (optional) Totally Clear it if needed
    iFrameContainer.appendChild(iFrame);

    let iFrameDoc = iFrame.contentWindow && iFrame.contentWindow.document;
    if (!iFrameDoc) {
    console.log("iFrame security.");
    return;
    }
    iFrameDoc.write(iframeContent);
    iFrameDoc.close();
}

- Nisim Joseph

---

没有限制：只需尝试 https://jsfiddle.net/z4ytwha8/1/ 它在 FF、Chrome 和 Edge 上都能完美运行。您必须转义 </script> 标签，请参见 https://dev59.com/6HI-5IYBdhLWcg3w0MDx - agassner

能否使用Blob在IE10及以上版本中支持？https://caniuse.com/#search=Blob - Nisim Joseph

谢谢！你指引了我正确的方向：我使用了 new Blob([str], { type: "application/javascript" }) 作为脚本的 src。 - rafalou38

Answer 3

我在IE浏览器上遇到了同样的问题。不过，我已经能够使用filesaver.js在IE 10+中使下载/另存为功能正常工作。

function onClick(e) {
    var data = { x: 42, s: "hello, world", d: new Date() },
    fileName = "my-download.json";
    var json = JSON.stringify(data),
        blob = new Blob([json], {type: "octet/stream"});

   saveAs(blob, fileName);      

   e.preventDefault();
   return false;
};

$('#download').click(onClick);

请查看http://jsfiddle.net/o0wk71n2/（基于@kol的答案JavaScript blob filename without link）

- bjnsn

---

下载/保存对我来说也可以。但你有没有想法为什么它与iframe不起作用？ - Hiran