How can I redirect in html while in fullscreen?

Use SPA style, load content dynamically. Something like:

<button id="button">Start</button> <div id="app"></div> <script> button.onclick = async function() { await document.documentElement.requestFullscreen(); document.getElementById("app").innerHTML = ` <h1>New Page Content</h1> <p>This replaced the page without leaving fullscreen.</p> `; }; </script>

The page never actually changes.

Or, another way is you request full screen again after navigation, like:

document.body.addEventListener("click", () => { document.documentElement.requestFullscreen(); });

do it on the next page, but it can be tricky since browsers require a new user interaction, so it can't happen automatically.

Just avoid navigation and swap content instead.

I am sure you know why browsers enforce this. But here is my trick, I once did a web game and I used this nice trick, I changed content and I changed URL using history.pushState(), something like this:

<button id="start">Start</button> <div id="app"> <h1>Home Page</h1> </div>

then in JS, I

const startBtn = document.getElementById("start"); const app = document.getElementById("app"); startBtn.onclick = async () => { // this to enter fullscreen await document.documentElement.requestFullscreen(); // this to change URL without redirect history.pushState({}, "", "/game"); // this to replace page content app.innerHTML = ` <h1>Game Page</h1> <p>You are still fullscreen.</p> `; };

So if for example the url changes to /game the full screen stays active but the content updates. Now if you want to go back, you will have to detect browser back navigation, you can simply do:

window.onpopstate = () => { app.innerHTML = "<h1>Home Page</h1>"; };

so back button works normally. I read somewhere that platforms like figma and youtube use something like that. Or better still create a tiny router. I hope any of the above helps.