javascript 将 Blob 设置为 iframe 的“src”

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29667922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 10:52:52  来源:igfitidea点击:

set a Blob as the "src" of an iframe

javascriptinternet-exploreriframeblob

提问by Hiran

The following code work perfectly in Chrome

以下代码在 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>

But it is not working with IE. Can some one please tell me what is wrong here.

但它不适用于 IE。有人可以告诉我这里出了什么问题。

The iframe "src" also set to the blob as shown below.

iframe "src" 也设置为 blob,如下所示。

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

Note: I went on the window.navigator.msSaveOrOpenBlob(newBlob)path as well but no luck so far.

注意:我也走上了这window.navigator.msSaveOrOpenBlob(newBlob)条路,但到目前为止没有运气。

采纳答案by Emma

According to http://caniuse.com/#feat=datauriIE 11 has only got partial support for Data URI's. It states support is limited to images and linked resources like CSS or JS, not HTML files.

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

Non-base64-encoded SVG data URIs need to be uriencoded to work in IE and Firefox as according to this specification.

根据本规范,非 base64 编码的 SVG 数据 URI 需要进行 uriencoded 才能在 IE 和 Firefox 中工作。

回答by Nisim Joseph

An example I did for Blob as a source of iFrame and working great with one important CAUTION / WARNING:

我为 Blob 做的一个例子作为 iFrame 的来源,并且与一个重要的警告/警告一起工作得很好:

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

iFrame with Blob is not auto redirect protocol, meaning, having <script src="//domain.com/script.js"</script>inside the iframe heador bodywon't load the JS script at all even on Chrome 61 (current version).

带有 Blob 的 iFrame 不是自动重定向协议,这意味着即使在 Chrome 61(当前版本)上也不会加载<script src="//domain.com/script.js"</script>iframeheadbody根本不会加载 JS 脚本。

it doesn't know what to do with source "blob" as protocol. this is a BIG warning here.

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

Solution:This code will solve the issue, it runs mostly for VPAID ads and working for auto-protocol:

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

回答by bjnsn

I've run into the same problem with IE. However, I've been able to get the download/save as piece working in IE 10+ using filesaver.js.

我在 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);

See http://jsfiddle.net/o0wk71n2/(based on answer by @kol to JavaScript blob filename without link)

请参阅http://jsfiddle.net/o0wk71n2/(基于@kol 对JavaScript blob 文件名无链接的回答)