Question 195728 in Html Question posted in
Some basic documentation can be found here.

Html – Open a link in fullscreen

I’m trying to open a link in full screen. I took the code from here.
https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_element_requestfullscreen

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<button onclick="openFullscreen();">Open Link in Fullscreen Mode</button>

<a href="https://www.yahoo.com" id="mypagelink"></a>

</body>
</html>

<script>
var elem = document.getElementById("mypagelink");

function openFullscreen() {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}
</script>

Here is the Codepen link.
https://codepen.io/mochi777/pen/xxQqZGZ

It opens in fullscreen but just black window. What am I doing wrong?

Tags:

2

Answers


  1. 0

    Hello Toshi i think this answer will help you achieve your requirement

    https://stackoverflow.com/a/66790295/13987286

    Login or Signup to reply.
  2. 0

    The API you are using is designed to make the targeted element full screen. That element is an <a> element with no content inside it so when it is made full screen it appears to be blank.

    You seem to be under the impression that it will load the link target (the URL in the href attribute) full screen. That’s a mistaken impression.

    Browsers don’t provide an API to open URLs full screen. It is something that can only be done by the page itself in response to the user interacting with it.

    A couple of possible work arounds are:

    • Open the URL in an iframe and make the iframe full screen. This will require that the URL does not use X-Frame-Options or a CSP to ban you from placing it in an iframe.
    • Use the window.open API to open the URL in a new window and set the dimensions equal to the height and width of the screen. This will display at least some browser chrome as you can’t eliminate things like the title bar entirely.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search