HTML button opening link in new tab hiding url-CodePudding

I'm making a website and I want to have a button for a new tab but I want it to hide the URL. So when they get sent to the new tab, it will say about:blank instead of the URL it takes them to. How do you do that? (Example: https://sites.google.com/bcsd5.org/tharc/games/numbered-games/1v1-lol)

CodePudding user response：

Not possible.

Unless you mean to just have a button that will create a new tab in a browser in which case you'd do : <a href="about:blank" target="_blank">Hello</a>

CodePudding user response：

If we take a look at the page you linked, we can see a script tag right under the button. It reads:

 
    var urlObj = new window.URL(window.location.href);
    var url = "https://tharc.herokuapp.com/service/hvtr:-/3v3.non/";

    if (url) {
        var win;

        document.querySelector('button').onclick = function() {
            if (win) {
                win.focus();
            } 
            else {
                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);
            }
            document.querySelector('button').style.background='#ff5148';
            document.querySelector('button').innerHTML="Page Opened!";
        };
    }

However, we can simplify it:

    var url = "https://tharc.herokuapp.com/service/hvtr:-/3v3.non/";

    document.querySelector('button').onclick = function() {
        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);
    }

What does it do?

 var url = "https://tharc.herokuapp.com/service/hvtr:-/3v3.non/";

This gives us the URL we will be redirected to.

  document.querySelector('button').onclick = function() {

The rest of the script will be run upon clicking the button (so we assign it to onclick).

win = window.open();
win.document.body.style.margin = '0';
win.document.body.style.height = '100vh';

Open a new window and style it properly (make the occupy the whole window).

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);

Create an iframe in that window and place it into the of that window. Make the iframe cover the whole (hence the whole page).

To summarize:

Create a new window with no title.
Create an iframe in that window that shows the required URL.