HTML Blob in <iframe>

html-blob-in-iframe.markdown

HTML Blob in <iframe>

A little hack to test isolated HTML template previewing within a <iframe> using Blob - without need for another server request.

A Pen by grimen on CodePen.

License.

index.html

<iframe id="blob-src-test" frameborder="0" width="300px" height="300px"></iframe>

<iframe id="document-write-test" frameborder="0" width="300px" height="300px"></iframe>

script.js

var variables = {
  title: 'Hello',
  image: 'https://4.bp.blogspot.com/-j49xTVdZe7g/TVnmq6phXxI/AAAAAAAABpA/Pm45FErBfQQ/s1600/hopkins%2Bduck.jpg'
};

var template = [
  '<h1>',
  variables.title,
  '</h1>',
  '<img width="80%" src="',
  variables.image,
  '">'
].join('');


// Alt 1: Blob approach
var blob = new Blob([template], {type: "text/html"});
var blob_url = URL.createObjectURL(blob);
var blob_iframe = document.querySelector('#blob-src-test');

blob_iframe.src = blob_url;


// Alt. 2: Document write ("old school")
var doc = document.querySelector('#document-write-test').contentWindow.document;
doc.open();
doc.write(template);
doc.close();

style.css

iframe {
  margin: 10px;
}

#blob-src-test {
  outline: 2px solid cyan;
}

#document-write-test {
  outline: 2px solid magenta;
}