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.
Related
I need feature of activating fullscreen and deactivating fullscreen and every thing works great when i use document.requestFullScreen and document.cancelFullScreen API. But when user activate fullscreen using F11 then document.cancelFullScreen API doesn't work as i wants.
I tried finding and testing many stackoverflow answers but none of those helped me. I wants to reverse/cancel the fullscreen effect of F11 key press done by user.
Here is demo i created where you can see that issue code sand box ,in this sandbox just open output in new separate window/tab, then press F11 which will activate fullscreen, now try to press 'Go Fullscreen' i provided which is not able to exit fullscreen effect.
I have tried this method it is working fine as on my try, I have add code bellow, also I have create new file in your code sand box called "test.html", and also here is the result link. Hope it will be the solution for your trouble.
<!DOCTYPE html>
<html>
<head>
<style>
.full-container {
background-color: yellow;
}
</style>
</head>
<body>
<div id="full-container" class="full-container">
Open this page in New Window to see effect of button
<button onclick="goFullscreen()">go FullScreen</button>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var fullScreenMod = false;
$(document).on("keydown", function (ev) {
if (ev.keyCode === 27 || ev.keyCode === 122) {
goFullscreen();
return false;
}
});
/* Standard syntax */
document.addEventListener("fullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* Firefox */
document.addEventListener("mozfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* Chrome, Safari and Opera */
document.addEventListener("webkitfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
/* IE / Edge */
document.addEventListener("msfullscreenchange", function () {
fullScreenMod = !fullScreenMod;
});
function goFullscreen() {
console.log("fullscreen called");
let topContainer = document.getElementById("full-container");
let isWholeFullScreen = fullScreenMod;
if (isWholeFullScreen == false) {
isWholeFullScreen = !isWholeFullScreen;
if (topContainer.requestFullScreen) {
topContainer.requestFullScreen();
} else if (topContainer.mozRequestFullScreen) {
topContainer.mozRequestFullScreen();
} else if (topContainer.webkitRequestFullScreen) {
topContainer.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (topContainer.msRequestFullscreen) {
topContainer.msRequestFullscreen();
}
} else {
isWholeFullScreen = !isWholeFullScreen;
if (document.exitFullScreen) {
document.exitFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>
</html>
At the moment I am trying to display an image in fullscreen via javascript. (Fullscreen API - https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API)
Javascript code:
var enterFullscreen = function(el) {
if(el.requestFullscreen) {
el.requestFullscreen();
} else if(el.msRequestFullscreen) {
el.msRequestFullscreen();
} else if(el.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if(el.webkitRequestFullscreen) {
el.webkitRequestFullscreen();
} else {
noFullscreenSupport();
}
var exitFullscreen = function() {
if(document.exitFullscreen) {
document.exitFullscreen();
} else if(document.msExitFullscreen) {
document.msExitFullscreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else {
noFullscreenSupport();
}
var initFullScreenButtons = function() {
$('.fullScreenButton').each(function(e) {
$(this).bind('click', function() {
if((window.innerWidth === screen.width && window.innerHeight === screen.height) || (window.fullScreen)) {
exitFullscreen();
} else {
enterFullscreen(document.documentElement);
}
});
});
I get the fullscreen buttons and bind them to a click event which calls the function to enter the fullscreen.
Images:
Without fullscreen
Fullscreen
The result is that the image sometimes displays in fullscreen or in a semi-fullscreen, where the background of the page is displayed on the bottom of the page with the width/height of browser-taskbar and windows-taskbar.
Furthermore, as soon as I try to use the developer tool of the browser the visual bug dissappears.
I found the solution for my problem. Instead of passing document.documentElement (root-element) I have to pass document.body (body-element) to the function.
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.
The code below is a working example when you click the image it opens webpage browser in fullscreen, HOWEVER I don't know how to make the javascript toggle fullscreen mode when clicking image again.
So the script needs to open full screen mode when clicking image the first time, then exit full screen mode when clicking the same image the second time.
HTML:
<h1>Click image to toogle fullscreen mode</h1>
<img id="logo" src="http://i.imgur.com/lPZh57Y.png" alt="logo" />
JavaScript:
(function () {
var viewFullScreen = document.getElementById("logo");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
var cancelFullScreen = document.getElementById("logoCONFLICT");
if (cancelFullScreen) {
cancelFullScreen.addEventListener("click", function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}
})();
A simple solution would be to keep track when you request the full screen & exit full screen calls. And run the appropriate code based on this value. You don't need two separate click listeners for this. Just another if else statement.
<script>
(function () {
var viewFullScreen = document.getElementById("logo");
var isFullScreen;
if(viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
if(!isFullScreen) {
var docElm = document.documentElement;
if(docElm.requestFullscreen) docElm.requestFullscreen();
else if(docElm.msRequestFullscreen) docElm.msRequestFullscreen();
else if(docElm.mozRequestFullScreen) docElm.mozRequestFullScreen();
else if(docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen();
isFullScreen = true;
} else {
if(document.exitFullscreen) document.exitFullscreen();
else if(document.msExitFullscreen) document.msExitFullscreen();
else if(document.mozCancelFullScreen) document.mozCancelFullScreen();
else if(document.webkitCancelFullScreen) document.webkitCancelFullScreen();
isFullScreen = false;
}
}, false);
}
})();
</script>
Haven't tested it but should work. A better way would be to detect the fullscreen status initially and listen for the changes as described here. Instead of attempting to keep track of the status yourself.
Hope this helps! Good luck!
I'm trying to make a element of my website in fullscreen when we click on it, and it works with chrome, IE, but not with firefox.
I went to the microsoft fullscreen API, and I tested theire code, and there is no problems with any of this browsers.
Here the part of my web site I want to put in full screen.
<div class="wrap">
<div class="signin">
<div style="margin: 2px 0px -25px 10px;"><h1>Sign In or Signup</h1></div>
<?php echo $this->signin(); ?>
<span class="forget">
Forgotten Password? </span>
</div>
And here the script I use
<script type="text/javascript">
var inFullScreen = false; // flag to show when full screen
var fsClass = document.getElementsByClassName("wrap");
for (var i = 0; i < fsClass.length; i++) {
fsClass[i].addEventListener("click", function (evt) {
if (inFullScreen == false) {
makeFullScreen(evt.target); // open to full screen
} else {
reset();
}
}, false);
}
function makeFullScreen(divObj) {
alert (divObj);
if (divObj.requestFullscreen) {
alert ('standard');
divObj.requestFullscreen();
}
else if (divObj.msRequestFullscreen) {
alert ('ms');
divObj.msRequestFullscreen();
}
else if (divObj.mozRequestFullScreen) {
alert ('moz');
divObj.mozRequestFullScreen();
}
else if (divObj.webkitRequestFullscreen) {
alert ('webkit');
divObj.webkitRequestFullscreen();
}
inFullScreen = true;
return;
}
function reset() {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
inFullScreen = false;
return;
}
</script>
And the last info who can be usefull, my website is a zent framework website, it's why there is some PHP.
This code segment should work for most browsers incl. Mozilla Firefox. Specifically, Mozilla Firefox insists that the code in the event handler executes under 1 second. Else Fullscreen requests are denied. Refer: Bug Report
HTML
<button id="view-fullscreen">Fullscreen</button>
Javascript
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function() {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
} else if (docElm.msRequestFullscreen) {
docElm.msRequestFullscreen();
} else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
} else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
})
}
Refer to the FullScreen API for more details
Fullscreen API
The above code segment's working Demo: Fullscreen Demo