CODEWITHSUNDEEP
javascriptwebkitfullscreen
alex9311
alex9311

Reputation: 1420

JavaScript full screen exits when user navigates around site

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!

Upvotes: 9

Views: 5448

Answers (2)

user2239613
user2239613

Reputation: 59

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.

Upvotes: 5

fbynite
fbynite

Reputation: 2661

No, 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:

  1. Ask the user to enable their browser into fullscreen mode.

  2. Enable fullscreen (via a button which uses the API) on each page navigation (your current problem).

  3. Go with a single-page app design, so the user only has to activate Fullscreen once (via button which uses the API).

  4. Don't worry about fullscreen mode.

Upvotes: 15

Related Questions