In my web application I have a button to allow the users to work on full-screen mode. My problem is that it's only working for the current page, if we click a link or in any other way change pages or even if we refresh the current one the full-screen mode is lost.
this is the function I'm using to allow the full-screen:
// Handle full screen mode toggle
var handleFullScreenMode = function () {
// toggle full screen
function toggleFullScreen() {
if (!document.fullscreenElement && !document.mozFullScreenElement && !document.webkitFullscreenElement) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
}
$('#trigger_fullscreen').click(function () {
toggleFullScreen();
});
}
$(document).ready(function () {
handleFullScreenMode();
});
Is there anyway to keep the it when changing pages like what happens when you click F11?
Unfortunately not.
The API specifies that fullscreen will only operate on the current, or descending browser contexts.
When the page is changed or refreshed, the browser context changes, and the fullscreen effect is lost.
MDN also reinforces with:
... 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.
Related
I am using this javascript to make a website go fullscreen and exit fullscreen:
function ToggleFullscreen() {
elem = document.documentElement;
if (!document.fullscreenElement && !document.mozFullScreenElement &&
!document.webkitFullscreenElement && !document.msFullscreenElement) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
The problem is if the user has rotated their phone from landscape to portait at all during the pageview when you exit fullscreen the address bar doesn't reappear. This seems to be a bug as it works perfectly if they have not rotated the device prior. To get it back the user can ussually scroll up on page. However the content on the site I am currently making requires that scrolling is disabled so the user can't do that. So to them it just seems like the site has messed up and lost their address bar.
Can anybody think of a way to get the address bar back? I tried using "scrollTop = 0" and that didn't help. I even tried "scrollTop = 20" then after a delay "scrollTop = 0" and still no good. One thing that does bring it back is using "alert('message');". As you can imagine I don't want to make a message pop up every time somebody exits fullscreen though just incase they are in this state. Are there any other javascript functions that could potentially bring the address bar back just like an alert does? Or anything I could try to avoid this problem in the first place?
The only solution I found is to exit full screen mode after a delay after screen rotation:
screen.orientation.addEventListener('change', () => {
if (screen.orientation.type.startsWith('landscape')) {
document.documentElement.requestFullscreen();
}
else if (document.fullscreen) {
setTimeout(() => document.exitFullscreen(), 500);
}
});
I want to display my page in fullscreen when it opens (WITHOUT user input). How can I do that?
I tried this code, but it doesnt't really work
function fullScreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitrequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullscreen) {
element.mozRequestFullscreen();
}
}
var html = document.documentElement;
fullScreen(html);
Today (6/2018) it's not possible to call fullscreen methods without an event fired by user interaction. As doc said:
Fullscreen requests need to be called from within an event handler or
otherwise they will be denied.
https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API We can't emulate that interaction. This example shows that behavior:
<div id="somediv">
content
</div>
<script>
var div = document.getElementById("somediv");
function toggleFullScreen() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (div.mozRequestFullScreen) {
div.mozRequestFullScreen();
} else {
div.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener("click", function(e) {
console.log("click");
toggleFullScreen();
}, false);
div.click();
</script>
This example shows that console.log("click"); was executed without interaction but fullScreen is denied. If user perform a click (user event), fullScreen is allowed.
Starting fullscreen with Chrome by using onInputDown event for Text objects in Phaser enables fullscreen with margin on all sides. I found in Phaser examples that the same thing is happening with onDown event for game.input. http://phaser.io/examples/v2/display/fullscreen
I suspected my computer might be at fault but after asking a friend to try the example above he experienced something similar. The only difference was the background created by the margins.
Oddly enough if I were to call the same function that the onInputDown event from the Text object was calling but from a Button object instead there will be no margins. A proper fullscreen. Calling said function from an event listener added to html tags <p>, <label> and <button> etc. also works properly.
My question is: Why are margins created when enabling fullscreen in the way I explained in my first paragraph? Is there a way to remove those margins except for calling the function from a different source? If you get a proper fulllscreen from the example link using Chrome please add that in your answer.
//My fullscreen function
function ToggleFullScreen()
{
var elem = document.documentElement;
//Check if document is already in full screen or not.
if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement)
{
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
} //If document is not already in full screen: Check if the document has the ability to go fullscreen.
else if(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled ||document.msFullscreenEnabled)
{
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
}//If the document can not go full screen: Alert the user.
else
window.alert("Sorry. Your device or brower does not support full screen.");
}
I am facing a strange bug on Chrome 43, with this steps:
- I open a page, let say page1.html, and I go to fullscreen with html5 (with a button click)
I resize the browser window in this page1.html
Then I click a link on this pages, that opens another page, let say page2.html
The browser close the fullscreen automatically, and redirect to page2.html
In the page2.html the document.documentElement.offsetWidth/clientWidth is different from the window.innerWidth.
The html and body tag are set 100% width and 100% height on page2.html.
If I trigger a full screen mode in page2.html, and the exits from it, it seems to fix this issue
If I open page2.html normally in a new window document.documentElement.offsetWidth/clientWidth is equal to the window.innerWidth.
This is happening only in the last Chrome. Anyone have idea what is going wrong?
Why a trigger of fullscreen seems to fix the problem, what does the fullscreen mode trigger inside the browser?
Code to simulate this bug page1.html:
<html>
<head>
</head>
<body style="background-color: red">
<span onclick="fullmode();">CLICK HERE FOR FULL SCREEN MODE</span>
GO TO TO PAGE2.html
<script>
function fullmode() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
</script>
</body>
</html>
I'm building a HTML5 game but if I set the game into fullscreen if my cursor on the top it shows that notification?
I use this to set it into fullscreen:
function toggleFullScreen() {
if (!document.fullscreenElement &&
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) {
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
Thanks!
To the extent of my knowledge, this is not possible in javascript. The browser handles the showing of that notification to prevent websites from exploiting the user by going fullscreen without informing them, not showing them how to close it nor allowing them to.
Check out this answer for a bit more in-depth information:
https://superuser.com/questions/398945/disable-the-youve-gone-full-screen-notification-in-chrome
Also: https://groups.google.com/a/webmproject.org/forum/#!topic/webm-discuss/5vtRCwu50ZU
I believe that, by design, it is not possible so that an application cannot takeover the screen for nefarious purposes.
No, you cant..it's one of the default functionality of a browser. it's one of the security features implemented in browsers..
See more here https://groups.google.com/a/webmproject.org/forum/#!topic/webm-discuss/5vtRCwu50ZU