CODEWITHSUNDEEP
javascriptrefreshfullscreen
Cains
Cains

Reputation: 901

Maintain fullscreen mode while refreshing in javascript

<script>
GoFullscreen();
location.reload(); // Browser automatically goes out of fullscreen on this
</script>

If I use this code in a web page it will go fullscreen, refresh, and the browser will automatically go out of fullscreen because of the refresh. I need the code to go fullscreen and refresh, without going out of fullscreen mode.

<script>
GoFullscreen();
RefreshPage(); // Refreshes the page without going out of fullscreen
</script>

Something along these lines

If you want to know why I'm trying to refresh the page like this, it's a work around to my other question here unless I get an answer there. If anyone knows how to reload data-processing-sources on a canvas that would make it so I didn't need this. Otherwise refreshing the entire page is the only way I know to reload the data-processing-sources.

Upvotes: 7

Views: 10192

Answers (3)

Robert Puhan
Robert Puhan

Reputation: 11

<script>
    const fullscreenButton =
        document.getElementById('fullscreenButton');

    fullscreenButton.addEventListener('click', toggleFullscreen);

    function toggleFullscreen() {
        if (!document.fullscreenElement &&
            !document.mozFullScreenElement &&
            !document.webkitFullscreenElement &&
            !document.msFullscreenElement) {
            if (document.documentElement.requestFullscreen) {
                document.documentElement.requestFullscreen();
            } else if (document.documentElement.mozRequestFullScreen) {
                document.documentElement.mozRequestFullScreen();
            } else if (document.documentElement.webkitRequestFullscreen) {
                document.documentElement.webkitRequestFullscreen();
            } else if (document.documentElement.msRequestFullscreen) {
                document.documentElement.msRequestFullscreen();
            }
            //fullscreenButton.textContent = 'Exit';
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            } else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if (document.webkitExitFullscreen) {
                document.webkitExitFullscreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            //fullscreenButton.textContent = 'Enter';
        }
    }

Upvotes: 0

Scott
Scott

Reputation: 3763

You can put the content into an iframe that is 100% width by 100% height. Then make the iframe refresh itself. The page containing the iframe can be set to fullscreen and then the iframe refresh won't cause the parent page to lose its fullscreen mode.

Some helpful info about fullscreen via JS: How to make the window full screen with Javascript (stretching all over the screen)

Upvotes: 6

rdgd
rdgd

Reputation: 1446

Your question is not very detailed/descriptive of exactly the issue that you are encountering, so it makes responding with a good answer difficult. What I take away from it though is that it sounds like you should make an asynchronous http request using AJAX, so that only the information that you need is requested from the server, not your entire document again. You say that while you are in fullscreen you need some information on that same page to be refreshed, right?

Are you familiar with making AJAX requests at all? If not be warned... there's a steep learning curve. JQuery simplifies it a bit (API Documentation), but I think it is nice to learn it the plain vanilla JS way (Mozilla Dev Network Documentation)

Hope this is helpful.

Upvotes: -1

Related Questions