JavaScript full screen exits when user navigates around site

前端 未结 2 751
轮回少年
轮回少年 2020-12-11 16:55

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 individ

相关标签:
2条回答
  • 2020-12-11 17:21

    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.

    0 讨论(0)
  • 2020-12-11 17:26

    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.

    0 讨论(0)
提交回复
热议问题