Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

IE - IFRAMES / Data Uri

I need to display content in a sandboxed view, mostly a full html document (<html>...</html>). I'm using a sandboxed iframe with src datauri.

var 
  iframe = document.createElement('iframe'),
  content = '<html><head></head><body><h1>Hello</h1></body></html>'
;
iframe.sandbox = '';
iframe.src = 'data:text/html;charset=utf-8,' + content;
document.body.appendChild(iframe);

Unfortunately, that isn't supported in Internet Explorer... Is there any solution/workaround?

like image 321
Hitmands Avatar asked Aug 22 '16 09:08

Hitmands


People also ask

Does iframe work on IE?

Attachments: Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

What is iframe id?

An id on an <iframe> tag assigns an identifier to the element. The identifier must be unique across the page.

What is the iframe element?

An inline frame (iframe) is a HTML element that loads another HTML page within the document. It essentially puts another webpage within the parent page. They are commonly used for advertisements, embedded videos, web analytics and interactive content.

What is the iframe tag in HTML?

The <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. Tip: Use CSS to style the <iframe> (see example below).


1 Answers

My solution:

  1. Create a empty index.html, just for having a same origin iframe.
  2. Access the iframe via javascript
  3. Replace its content

function ReplaceIframeContentCtrl() {
  var iframe = document.getElementById('test');
  var content = "<html><head></head><body><h1>Hello</h1></body></html>";
  
  iframe.contentWindow.document.open();
  iframe.contentWindow.document.write(content);
  iframe.contentWindow.document.close();
}

document.addEventListener('DOMContentLoaded', ReplaceIframeContentCtrl);
<iframe id="test" src="/index.html"></iframe>
like image 181
Hitmands Avatar answered Sep 23 '22 17:09

Hitmands