I'm currently working on a web admin pannel where I've implemented a fullscreen toggle button using Font Awesome icons. Here's the relevant HTML snippet:
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt fa-lg" style="color:#060606; padding-top:10px;"></i>
</a>
This button successfully toggles fullscreen mode on and off when clicked. However, I've encountered an issue: whenever I navigate to another page within the same website or refresh the current page, the fullscreen mode is automatically exited.and this working fine in safari browser
I've tried troubleshooting this behavior but haven't been able to find a solution. Could someone please provide guidance on how to maintain fullscreen mode across page changes or refreshes?
Any help or insights would be greatly appreciated. Thank you!
To persist the full screen, you can add a flag in your local storage. The flag will be set to true once you set the application to full screen. Now, you can add a onload method and check if the flag exists in your local storage, if it does, you can go to full screen again. Once, you move out of full screen, set the flag to false.
Reference - https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event