I have a series of pages that have "next" and "back" buttons. I would like the user to be able to go fullscreen through the whole flow. Fullscreen is working for individual pages but exits when the user goes back or forwards a page in my flow.
My fullscreen function:
var el = document.documentElement, rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
rfs.call(el);
Is there any way to keep the browser in full screen when the user navigates around?
Thanks!
I have a series of pages that have "next" and "back" buttons. I would like the user to be able to go fullscreen through the whole flow. Fullscreen is working for individual pages but exits when the user goes back or forwards a page in my flow.
My fullscreen function:
var el = document.documentElement, rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen;
rfs.call(el);
Is there any way to keep the browser in full screen when the user navigates around?
Thanks!
Share Improve this question edited May 15, 2014 at 12:10 Dairo 8201 gold badge9 silver badges24 bronze badges asked Jul 22, 2013 at 17:18 alex9311alex9311 1,4101 gold badge21 silver badges43 bronze badges 1- 2 Just a note with a side-option: I had same problem with a web-app that should be displayed fullscreen in 'controlled' devices, not public in the internet. In our case, after many tests and investigation on how to program the application to work always full-screen, the best (and easy) solution has been using a full-screen browser. In particular we have choosen 'Fully Kiosk Browser' play.google.com/store/apps/details?id=de.ozerov.fully since our devices are android tablets. But there exist similar products for other platforms. – MarcM Commented Sep 29, 2016 at 13:05
2 Answers
Reset to default 15 +50No, you will not be able to do that. Fullscreen mode must be initiated by the user.
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 have to have the user activate fullscreen mode at each new page they navigate to.
There is an alternative. You could create a single-page app. Then the user will only have to initiate fullscreen mode once, and they will be able navigate through different "pages" while remaining in fullscreen mode.
EDIT
but then how come using cmd-shift-f to get into fullscreen allows you to navigate around?
That enables the browser into fullscreen mode, which is different than using the fullscreen API. Using the fullscreen API, you are able to specify an element in fullscreen mode.
In your example the element you are displaying in fullscreen is document.documentElement which is the html element.
That's why, when your navigating in browser fullscreen mode, it stays in fullscreen. As opposed to when you have specified an element to be in fullscreen mode, fullscreen mode will exit when you navigate to a new page,changed tabs, or switch to another application.
Your options as I see it:
Ask the user to enable their browser into fullscreen mode.
Enable fullscreen (via a button which uses the API) on each page navigation (your current problem).
Go with a single-page app design, so the user only has to activate Fullscreen once (via button which uses the API).
Don't worry about fullscreen mode.
For internal application I use solution with fullscreen iframe - simple page like this:
...
<body>
<iframe id="ifr" frameborder="0" width="XXX" height="XXX" src="normal-page-with-links.html"></iframe>
</body>
...
And this page is fullscreen in browser and navigation in iframe content stays in fullscreen.