Home > Back-end >  How do I make a link open in a new tab with the url shown as "about:blank"
How do I make a link open in a new tab with the url shown as "about:blank"

Time:03-08

When I click the "click now" button nothing happens, I want it to open in a new tab. Code:

<button onclick="myFunction()">click to play</button> 
<script>

    var urlObj = new window.URL(window.location.href);
    var url = "https://incognito42.herokuapp.com/src/gs/public/hexgl/";

    if (url) {
        var win;

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

I've tried rewriting it like this:

<html>
  <body>
    <button onclick="myFunction()">click to play</button>
    <script>
      function myFunction() {
           var win = window.open(
                            "https://incognito42.herokuapp.com/src/gs/public/vex5/",
                            "DescriptiveWindowName",
                            "width=1920,height=1080,resizable,scrollbars=no,status=1"
                            );
        myWindow.document.write('<html><head> <title>Sample</title><link rel="stylesheet" type="text/css" href="css/newsCSSWindow.css"></head><body>');
        myWindow.document.write("Sample Window");
        myWindow.document.write('</body></html>');
      }
    </script>
  </body>
</html>

but then it doesn't open in a new tab with the URL shown as "about:blank", and just to be clear I want the URL bar to say "about:blank", but it displaying the link's contents shown on the page.

this page for reference

CodePudding user response:

You can't.

While you could fix your trivial errors:

  • The URL you entered as the first argument to window.open isn't about:blank
  • You forgot the , after that first argument
  • You have var win and then myWindow.document.write

… the browser will change the displayed URL to reflect where the data from.

Browsers do not let webpages deceive users about the source of what they are looking at.

CodePudding user response:

I suspect that you meant it if you do not write in the comment exactly what

<!DOCTYPE html>
<html>
<head>

</head>
  <body>
    <button onclick="myFunction()">click to play</button> 
    <script>
      function myFunction(){
        var urlObj = new window.URL(window.location.href);
        var url = "https://incognito42.herokuapp.com/src/gs/public/hexgl/";
      
        if (url) {
            var win;
    
            document.querySelector('button').onclick = window.open(url)}
        }
    </script>
  </body>
</html>

Edited version

<!DOCTYPE html>
<html>
<head>

</head>
  <body>
    <button onclick="myFunction()">click to play</button> 
    <script>
        var urlObj = new window.URL(window.location.href);
        var url = "https://incognito42.herokuapp.com/src/gs/public/hexgl/";
      
        if (url) {
        var win;

        document.querySelector('button').onclick = function() {
            if (win) {
                win.focus();
            } 
            else {
                win = window.open();
                win.document.body.style.margin = '0'; //Set margin new blank window
                win.document.body.style.height = '100vh'; //Set height new blank window
                var iframe = win.document.createElement('iframe'); //Creates a frame for the game
                iframe.style.border = 'none';
                iframe.style.width = '100%';
                iframe.style.height = '100%';
                iframe.style.margin = '0';
                iframe.src = url;
                win.document.body.appendChild(iframe); //add a frame to the window
            }
        };
    }
    </script>
  </body>
</html>
  • Related