Using Blob urls for src in IE11

Question

We're creating <iframe>s dynamically (e.g. for a rich text editor or a debug window) and injecting html into the src. For years we used a javascript: url as the src similar to this answer until we ran into same-origin-policy issues with multiple independent iframes.

Our current solution is creating an object url for a blob that contains the html:

var iframe = document.createElement('iframe')
  , html = '<h1>it works!</h1>'
  , blob = new Blob([html], {type: 'text/html'})
  , url = URL.createObjectURL(blob);

iframe.src = url;
document.querySelector('body').appendChild(iframe);

This works fine in Chrome and Firefox, but not in IE11 (for browsers where URL or Blob are undefined we fallback to the javascript: solution). IE11 raises SCRIPT5: Access is denied.

Are we misusing the APIs? Is there a special API for IE? A known workaround?

Answer 1

Unfortunately IE does not support DATA URI's*with a few caveats. I have the same issue, but with a PDF in an embedded tag.

It looks like you can use msSaveOrOpenblob to have IE open your blob file