Develop Reference

Android Chrome hides address bar after exiting fullscreen with javascript after rotating screen (bug?)

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);
}
});

Edit iframe attributes from a widget in Adobe Captivate

I am writing a widget for Adobe Captivate, which has to work in HTML5. This widget contains a button to toggle the full screen mode. Basically, the plugin looks like that:
function toggleFullscreen(elem) {
elem = 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();
}
}
}
document.getElementById("fullscreen").addEventListener("click", toggleFullscreen);
<button id="fullscren">Toggle full screen</button>
But the widget is inserted in an iframe, and this iframe does not have the allowfullscreen attribute, and therefore prevents the button to toggle the full screen mode.
I am looking for a way either to add the allowfullscreen attribute to the iframe by executing some Javascript from the inside of the iframe, either to publish the project with the correct configuration to automatically add this attribute.
I tried to use the Javascript accessor parent.document, but I get an error :
Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

Using the parent attribute in Javascript is enough. You can then add the allowfullscreen attribute with this line :
parent.document.getElementsByTagName('iframe')[0].setAttribute('allowFullScreen', 'true');
However, this does not work when displaying the published project from a local source (Cross-origin protection). It works fine when displayed from a webserver (even localhost).

Margin when in fullscreen

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.");
}

loosing full-screen when changing pages or refreshing

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.

How to open Web page in Fullscreen mode (F11 functionality) on body load

I am building a web application and I’m want to our web application open on fullscreen in browser by default
I want, as our application run on browser at the same time it will open in full screen mode.
I’m getting output on button click but this is not working on onload event of body.
Javascript Code:
<script>
function show() {
var elem = document.body;
if ((document.fullScreenElement !== undefined && document.fullScreenElement === null) || (document.msFullscreenElement !== undefined && document.msFullscreenElement === null) || (document.mozFullScreen !== undefined && !document.mozFullScreen) || (document.webkitIsFullScreen !== undefined && !document.webkitIsFullScreen)) {
if (elem.requestFullScreen) {
elem.requestFullScreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullScreen) {
elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
} else if (elem.msRequestFullscreen) {
elem.msRequestFullscreen();
}
} else {
if (document.cancelFullScreen) {
document.cancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
</script>
HTML Code:
This is working
<input type="button" value="click to toggle fullscreen" onclick="show()">
But this is not working
<body onload="show()">
Please help me how can I achieve this.
Thanks.

It's not allowed to start the full screen mode without any user-interaction.

FullScreen mode requires user interaction. When a user fires any event (i.e. click, keypress, keydown) then your window can go to fullscreen.
If you have that option that you'll be able to manage that interaction then you can go with jQuery fullScreen plugin
Try this way : [Using user interaction]
<html>
<head>
<meta charset="UTF-8" />
<title>Test iframe</title>
// load jQuery
<script src="./jquery-fullscreen-plugin-master/jquery-2.1.1.js"></script>
// load jquery fullscreen plugin
<script src="./jquery-fullscreen-plugin-master/jquery.fullscreen-min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#fullscreenButton").on("click", function(){
$("body").fullScreen(true);
});
});
</script>
</head>
<body style="background:white">
<button id="fullscreenButton">Go to FullScreen Mode</button>
</body>
</html>
There's another way which is close to your scenario. But for that you have to let malicious script (auto fullscreen in your case) allowed in your browser.
javaScript :
var height = window.screen.availHeight;
var width = window.screen.availWidth;
for(var i = 0; i < 2; i++){
window.open ("http://www.google.com/","","fullscreen=yes, width=" + width + ", height=" + height + "");
}
The following script will open new window in fullscreen mode. But first time it'll as for your permission to allow popups from your site. If you allow those it'll always execute next time until it is blocked again.
So what is happening here is you are getting the resolution of your device and open the window with the appropriate height and width.
jsFiddle - window.open()