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)路径但到目前为止没有运气。

Answer 1

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

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

Answer 2

我遇到了与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的回答）

Answer 3

我为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不是自动重定向协议，这意味着，在iframe <script src="//domain.com/script.js"</script>或head内部body即使在Chrome 61上也无法加载JS脚本（当前版本。）

它不知道如何处理源＆＃34; blob＆＃34;作为协议。这是一个很大的警告。

解决方案：此代码将解决此问题，它主要针对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();
}

将Blob设置为iframe的“src”

3 个答案: