Geek Answers Handbook

Fullscreen JavaScript output when a user navigates a site

I have a series of pages with buttons "next" and "back". I would like the user to be able to watch full screen through the entire stream. Full screen mode works for individual pages, but exits when the user returns or forwards the page in my stream.

My fullscreen function:

var el = document.documentElement, rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen; rfs.call(el);

Is there a way to keep the browser in full screen when the user moves?

Thanks!

+7
javascript webkit fullscreen
source share
2 answers

No, you cannot do this. The user must start full screen mode.

From https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Using_full_screen_mode :

In addition, navigating to another page, changing tabs, or switching to another application (using, for example, Alt-Tab) while in fullscreen mode exits fullscreen mode as well.

You will need to activate the full-screen user mode on each new page that they go to.

There is an alternative. You can create a one-page application. Then the user will only need to run full-screen mode once, and they will be able to navigate through the various "pages", remaining in full-screen mode.

EDIT

but then, how to enter full-screen mode with cmd-shift-f, can you move around?

This allows the browser in full screen mode, which is different from using the full screen API. Using the full-screen API, you can specify an item in full-screen mode.

In your example, the element displayed in full screen mode is document.documentElement , which is an html element.

Therefore, when you switch to full-screen mode of the browser, it remains in full-screen mode. Unlike when you specified an item in full screen mode, full screen mode will exit when you go to a new page, change tabs, or switch to another application.

Your options, as I see it:

  • Ask the user to enable the browser in full screen mode.

  • Enable full-screen mode (using a button using the API) for each page navigation (your current problem).

  • Go with the one-page application design, so the user only needs to activate the single-line screen (using a button that uses the API).

  • Do not worry about full screen.

+8
source share

For the internal application, I use a solution with a full-screen iframe - a simple page as follows:

 ... <body> <iframe id="ifr" frameborder="0" width="XXX" height="XXX" src="normal-page-with-links.html"></iframe> </body> ...

And this page is full-screen in the browser and navigation on the contents of the iframe remains in full-screen mode.

+3
source share

More articles:


All Articles