Add things into blank iframe

<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="jquery@1.11.0" data-semver="1.11.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <h1>Add things into blank <code>iframe</code></h1>
      <p>
        <button id="load-bootstrap" class="btn btn-primary">Load bootstrap</button> &nbsp;
        <button id="enable-button-func" class="btn btn-success">Enable button functionality</button> &nbsp;
        <button id="big-button" class="btn btn-danger">Bigger button</button>
      </p>
      <iframe id="whity" src="about:blank" frameborder="0"></iframe>
    </div>
  </body>

</html>

// Code goes here

$(function () {
  var iframeId = 'whity';
  
  addHTML(iframeId, "\
    <div class='container'>\
      <h2>I'm an <code>iframe</code></h2>\
      <p>Showing off some bootstrap css</p>\
      <button class='btn btn-default'>I'm of no use</button>\
    </div>\
  ");
  
  $('#load-bootstrap').one('click', function () {
    loadCSS(iframeId, 'https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css');
  });
  
  $('#enable-button-func').one('click', function () {
    var DATA = JSON.stringify({
      iframeId: iframeId
    });
    
    var CODE = '' + (function (data) {
      var $doc = $($('#' + data.iframeId)[0].contentDocument);
      
      $doc.find('button')
      .click(function () {
        alert('Hurrah!!!');
      })
      .text('Click me!')
      .addClass('btn-warning');
    }).toString();
    
    addScript(iframeId, '(' + CODE + ')(' + DATA + ')');
  });
  
  $('#big-button').one('click', function () {
    addStyle(iframeId, "\
      button.btn {\
        font-size: 28px;\
      }\
    ");
  });
});

function loadCSS(iframeId, href, appendSelector) {
  appendSelector = appendSelector || 'head';
  
  var $doc = $($('#' + iframeId)[0].contentDocument);
  
  var linkElm = $doc[0].createElement('link');
  linkElm.type = 'text/css';
  linkElm.rel = 'stylesheet';
  linkElm.href = href;
  
  $doc.find(appendSelector).append(linkElm);
}

function addStyle(iframeId, code, appendSelector) {
  appendSelector = appendSelector || 'head';
  
  var $doc = $($('#' + iframeId)[0].contentDocument);
  
  var styleElm = $doc[0].createElement('style');
  styleElm.type = 'text/css';
  styleElm.appendChild($doc[0].createTextNode(code));
  
  $doc.find(appendSelector).append(styleElm);
}

function addScript(iframeId, code, appendSelector) {
  appendSelector = appendSelector || 'head';
  
  var $doc = $($('#' + iframeId)[0].contentDocument);
  
  var scriptElm = $doc[0].createElement('script');
  scriptElm.type = 'text/javascript';
  scriptElm.appendChild($doc[0].createTextNode(code));
  
  $doc.find(appendSelector).append(scriptElm);
}

function addHTML(iframeId, code) {
  var $doc = $($('#' + iframeId)[0].contentDocument);
  $doc.find('body').append(code);
}

/* Styles go here */

iframe {
  border: 1px solid gray;
  width: 100%;
  min-height: 200px;
}