set a Blob as the "src" of an iframe

Question

The following code work perfectly in 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.

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

<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.

score 8 · Accepted Answer · edited Mar 24 '17 at 18:12

8

According to http://caniuse.com/#feat=datauri IE 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.

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

edited Mar 24 '17 at 18:12

c0deNinja

3,956
1
29
45

answered Sep 17 '15 at 04:57

Emma

226
3
9

Yes this is a limitation in IE at the moment – Hiran Sep 17 '15 at 05:23

Nisim Joseph · Answer 2 · 2017-09-12T01:24:51.967

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

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 head or body won't load the JS script at all even on Chrome 61 (current version).

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

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

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();
}

there is no limitation: just try out https://jsfiddle.net/z4ytwha8/1/ It works like a charm with FF, Chrome and Edge. You have to escape the tags, see https://stackoverflow.com/questions/1659749/script-tag-in-javascript-string — agassner, Aug 29 '19 at 22:27
as in Can I Use Blobs supported since IE10. https://caniuse.com/#search=Blob — Nisim Joseph, Apr 27 '20 at 19:31
Thanks!, you pointed me in the right direction: I used `new Blob([str], { type: "application/javascript" })` for a script src — rafalou38, Jul 06 '21 at 16:03

score 1 · Answer 3 · edited May 23 '17 at 12:10

1

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.

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)

edited May 23 '17 at 12:10

Community

1
1

answered Sep 15 '15 at 20:13

bjnsn

2,710
2
16
14

1

The download/save is ok for me too. But do you have any idea why it is not working with iframe – Hiran Sep 17 '15 at 04:14

set a Blob as the "src" of an iframe

3 Answers3

Linked