Clicking to enter fullscreen mode on a website will result in the Fullscreen API automatically closing

For my current project, I am creating an offline website and would like it to display in full screen when opened. I have been using the Fullscreen API, but it exits fullscreen mode when a user navigates to another page. After researching the issue, it seems that this is a common problem due to the DOM tree being destroyed.

I have come across discussions on how to keep the webpage in fullscreen mode after clicking a link, but I am still unsure of the best solution. The concept of "Ajax Loaders" has been mentioned, but I find the information vague and confusing since I am new to this area.

Is there any other workaround or alternative method that can help me achieve my goal? It's essential for the website to be cross-browser compatible, as I will be sharing the files via USB and cannot predict which browser will be used to open it.

Answer №1

Referencing the official whatwg specification on navigation:

According to the spec, if the active document of a browsing context is not the same as the specified entry's document, certain steps must be taken including exiting fullscreen mode.

  1. Exit fullscreen completely...

It seems that fullscreen mode will be dismissed when there is a complete change in the DOM, like during page navigation.

For more information, consider exploring options such as Chromium.

Edit:

Regarding AJAX loaders, it involves transforming your webpage into a "single page app," where content is loaded once and all functionality relies on JavaScript. Tools like Angularjs can assist with this, but restructuring your site in this manner requires significant architectural changes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fundamental CSS Selector

I'm encountering an issue with CSS selectors while using Foundation 5: I am having trouble selecting the desired element, which seems strange to me. The specific problem I am facing is related to changing the background-color of the "Right Button Act ...

Positioning Avatar component at the center of Card component

Hello there, I am currently trying to center my <Avatar> elements using Material UI with React within the <Card> components. The layout appears very crowded right now. What would be the most effective method to achieve this? I attempted setti ...

Why isn't this setState function activating?

I am working on creating a versatile notification React component for my application that can be accessed from any part of the code. I have written the following code, where I am attempting to find a workaround for exporting the showNotif function: func ...

What is another option for toggling in jQuery?

After deprecating the toggle method, I found a new way to toggle div: $("#syndicates_showmore").on("click", function () { if (!clicked) { $('#syndicates').fadeTo('slow', 0.3, function () { $(this).css( ...

Please be aware that the website's loading speed may be slower than usual

Is it possible to notify a user that the website may take longer to load due to their slower internet connection? For example: Attention! It appears that the page is loading slowly because of your connection speed. Please be patient while the websi ...

Issues with jQuery autocomplete when using special characters (Norwegian)

On my website in Norway, I am facing an issue with jQuery's autocomplete function. When users type in the Norwegian characters æ, ø, and å, the autocomplete feature suggests words with these characters within them but not ones that start with these ...

What is the process of transforming a string into a JSON object?

var str = '""{""as"":""N9K-93180YC-EX""}""'; I attempted to remove the extra quotes using a regular expression: var str1 = str.replace(/\"/g, ""); After removing the extra quotes, the string now looks like "{as:N9K-93180YC-EX}". However, ...

What could be the reason for my Vue application failing to load, even though the mounted event is being triggered

Here's an interesting scenario. The code functions correctly in CodePen and even in Stack Overflow's code renderer, but it fails to work on my GitHub Pages site. No errors are triggered, and the console logs for the created and mounted events ex ...

When editing html files in Vim, the javascript indent filetype plugin is sourced unexpectedly

After experimenting with my vim settings, I noticed an unexpected behavior. When editing html files in vim, both the indent/javascript.vim and indent/html.vim filetype plugins seem to be sourced simultaneously. Is this intentional or a bug? How can I ensur ...

creating a distinct angular service for every controller

Lately, I've been utilizing Angular services to store my commonly used codes that are required across different parts of my project. However, I have encountered an issue where variables in the service are shared between controllers. This means that if ...

The best method for sending JSON or JS objects along with Form Data using AJAX POST to PHP for optimal efficiency

Although it may seem like a repetitive question at first glance, I have carefully gone through all related posts and have not come across a clear answer or solution to my specific issue. Any guidance towards relevant material would be greatly appreciated, ...

In react-native, when the string includes spaces, it will result in a line change

I am currently utilizing react-native in combination with styled-components. Whenever a string is typed into the text and followed by pressing the spacebar, it either results in too many line breaks or creates excessive empty spaces. An example of this i ...

Is there a way to send a variable to the alert function using $.ajax()?

I need assistance with confirming the deletion of a record. When the user clicks on the button, it should send the value 'Yes' to a $_POST request in PHP for deleting the record. However, instead of working as expected, it is showing me the JavaS ...

transition from mapStateToProps to using hooks

Just dipping my toes into the world of React (hooks) and learning by writing code. I'm grappling with converting MapStateToProps to hooks, specifically stuck on one part just before 'currentItem'. Here's the original code snippet: co ...

Are the maps intersecting within the field of vision?

I have 2 components in my angular application each showing a map from mapbox. Here is the code for one of the components: Component import { Component, OnInit } from '@angular/core'; import * as mapboxgl from 'mapbox-gl'; @Component( ...

Extracting user's clicked username to store in the database

I'm currently working on a script that allows users to mention others, but I've hit a roadblock. Each user can select another user by clicking on their name, which then adds the username to a designated div. Users can also input additional text ...

I am a beginner in the world of Typescript/Angular, and I have encountered a compiling error TS2339. It seems that even when the condition *ngIf="x.length > 0;" should be false, the

I'm currently enrolled in a Typescript/Angular course where I am learning about the implementation of "*ngIf". During one of the lessons, the instructor provided an example using an empty array to demonstrate how it fails the condition and results in ...

Tips for preventing line breaks within table cells

Looking at the image below, I need to display the Hallticket in a single line. The first one is retrieved directly from the database, while the second one is added dynamically using JavaScript. How can I show both sets of data in a single line? <td&g ...

Error TS2346: The parameters provided do not match the signature for the d3Service/d3-ng2-service TypeScript function

I am working with an SVG file that includes both rectangular elements and text elements. index.html <svg id="timeline" width="300" height="100"> <g transform="translate(10,10)" class="container" width="280" height="96"> <rect x ...

creating a fresh window using AJAX in Ext JS

While I know there may be similar questions out there, the details of my situation are unique. I'm facing an issue with building a new window using ExtJS, starting from a pre-existing grid. The goal is to populate this new window with references to el ...