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?