title: How to create an about:blank page with a custom iframe
body: <p>I am trying to make a form that goes like this:</p>
  <ol>
  <li>You enter a URL into a text box.</li>
  <li>You click a button and it opens an <code>about:blank</code> page in a new tab.</li>
  <li>This page has an iframe that fills the whole screen and the src is set to the link you entered in the text box.</li>
  </ol>
  <p>This is what I have tried but whatever I choose opens blank, I am using google.com as the example here.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;about:blank | 3kh0&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;script&gt;
          function create() {
              var url = document.getElementById('input');
              var win = window.open();
              win.document.body.style.margin = '0';
              win.document.body.style.height = '100vh';
              var iframe = win.document.createElement('iframe');
              iframe.style.border = 'none';
              iframe.style.width = '100%';
              iframe.style.height = '100%';
              iframe.style.margin = '0';
              iframe.src = url;
              win.document.body.appendChild(iframe);
          }
          &lt;/script&gt;
          &lt;input type="text" value="https://www.google.com/" placeholder="https://google.com" id='input' autofocus&gt;
          &lt;button onclick='create()'&gt;Create!&lt;/button&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If you have any ideas on how I can do this that would be amazing! :)</p>