Search code examples
javascripthtml

How to create an about:blank page with a custom iframe

I am trying to make a form that goes like this:

  1. You enter a URL into a text box.
  2. You click a button and it opens an about:blank page in a new tab.
  3. This page has an iframe that fills the whole screen and the src is set to the link you entered in the text box.

This is what I have tried but whatever I choose opens blank, I am using google.com as the example here.

<!DOCTYPE html>
<html>
    <head>
        <title>about:blank | 3kh0</title>
    </head>
    <body>
        <script>
        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);
        }
        </script>
        <input type="text" value="https://www.google.com/" placeholder="https://google.com" id='input' autofocus>
        <button onclick='create()'>Create!</button>
    </body>
</html>

If you have any ideas on how I can do this that would be amazing! :)

Update: If you are looking at this question for a working product, please visit the link below!

https://3kh0.net/extra/aboutblank

Solution

  • You should add ".value" at the end of line 9.

    from

    var url = document.getElementById('input');

    to

    var url = document.getElementById('input').value;