I've deiced to reword the question after more hours of attempting hacks and fixes, with no end result. I am using the SCREENFULL npm for this.
This web application is a fullscreen interactive UI for a menu system used by employee's. I desired to either have the app launch into fullscreen upon loading OR detect if fullscreen to display prompt button to enable fullscreen and launch the app. Neither seem to be doing the job at all.
My attempts included:
goFullScreen (){
screenfull.request();
}
<button onClick={(e) => this.goFullScreen()}> enable full screen </button>
works fine. Goes full screen. Now to detect to display the app (loggin page, menu etc) or only the fullscreen button (that way the app can only be view in fullscreen).
screenfull.on('change', () => {
if (screenfull.isFullscreen) {
console.log("it freaken works");
return (
<h1> hi </h1>
)
} else if (!screenfull.isFullscreen) {
// display button to go fullscreen
}
});
Does not return the <h1> hi </hi> or any thing within return, but the console does log. Strange.
UPDATE:
I decided to try a DidComponentMount (along with javascript's "onLoad" events) :
componentDidMount () {
screenfull.request();
console.log("request happened");
}
Well, the request did happen, but the fullscreen did not enable. After debugging an error checking I get a webkitfullscreen error using the screen error detector included in the package.
I have no idea why this won't work, even so why this is so difficult.
Is there a work around for this, or am I just making this a lot harder then it should be?
This web app is only running on a Android tablet and google chrome browser.
The solution was simple. https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
It was with the manifest json to get my exact desired result.
Related
i'm just finished a project in react-native. I was testing my app and i realized my app is being freezed a while after i launched it, both on iOS and Android. It's like, i can scroll through the contents of the screen but i can't press neither the pressables nor the navigation tabs at the bottom. I tried on both emulators and physical devices and the problem just keeps up.
The app is a coffee delivery app and it uses fetch api on every screen, so it uses a lot of state to store service data.
I couldn't solve the problem by scaning trough the similar issues on the internet. So i wanted to ask it here.
Is it a common problem ? How can i solve it ?
I've found out what was causing the "freeze" problem for me. Turns out i was using "setInterval" function to get the exact time at the moment for a specific reason and it was cycling with a period of 12 seconds.
This is the code i removed :
const timeInterval = setInterval(() => {
setDeliveryTimes(prev => {
const buffer = prev.map(timeObj => {
return {
...timeObj,
time: calculateDeliveryTime(timeObj.duration),
}
})
return [...buffer]
})
}, 12000)
When i opened the screen that runs the setInterval, it was still runing on the background even i did navigate to a different screen so i'm guessing this function causing some performence problems in react-native app. I don't know the exact reason deep down but when i removed it, the app maintained ok. If someone knows more deep about this, please care to make a comment to explain.
I am looking for a trick to put my website in fullscreen mode without human interaction.
I've found some examples using HTML5's techniques, but all of then needs to be triggered by a human interaction.
This website will be displayed in a TV ...
I already think in load the website using a SWF file in fullscreen mode, but instead of going to this direction, I would like to stress all possibilities using just the default pattern (html, css and javascript)
You can't force a website to display in fullscreen mode.
Imagine the security concerns if that were possible.
Malicious websites could "Hijack" a less computer literate person's desktop for all kinds of dubious business.
All of JS fullscreen api's will throw a error like this:
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture."
If you try to simply call it from your code.
I'm pretty darn sure Flash is similar, in that it requires user interaction to go fullscreen. Otherwise, we'd have seen our fair share of fullscreen popups that are nearly impossible to close.
Other answers already describe how you can go fullscreen in a more or less browser-independent way.
However, problem of needing user interaction remains.
You cannot force your webpage to display in fullscreen mode for security reasons.
User interaction is required for that.
Also, browser leaves fullscreen mode whenever user goes to another page, even on the same website, and (s)he will have to perform some "user interaction" on every page to go back into fullscreen mode.
This is the reason why your website has to be a single page if you want it to be fullscreen.
That is what I suggest:
Use a single splash page that has a hidden iFrame on it.
Whenever user clicks anywhere or presses any key, just set this iFrame to be fullscreen and show it. When you receive an event on leaving fullscreen mode, hide iFrame again to show splash.
Links open in the same frame by default, so you will stay in fullscreen mode until user explicitly leaves it or some links opens in a new tab.
Here is an example that works in Chrome:
(See it in action. Use other answers to make it browser-independent.)
<html>
<head>
<script language="jscript">
function goFullscreen() {
// Must be called as a result of user interaction to work
mf = document.getElementById("main_frame");
mf.webkitRequestFullscreen();
mf.style.display="";
}
function fullscreenChanged() {
if (document.webkitFullscreenElement == null) {
mf = document.getElementById("main_frame");
mf.style.display="none";
}
}
document.onwebkitfullscreenchange = fullscreenChanged;
document.documentElement.onclick = goFullscreen;
document.onkeydown = goFullscreen;
</script>
</head>
<body style="margin:0">
<H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
<iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>
Note, however, that websites often disallow embedding, e.g. being displayed inside an iframe. The example initially used W3Schools website instead of Python docs, but they set 'X-Frame-Options' header to 'sameorigin' (disallow cross-site embedding) and it stopped working.
P.S. I like the idea of simulating full-blown OS in browser, and it's even better in fullscreen! :) Change your OS!
Also, I am not a web developer. Just thought this question would be interesting to investigate.
You might be able to use requestFullScreen() methods as described at https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode.
Note : This still requires user input - but avoid usage of flash.
function toggleFullScreen() {
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();
}
}
}
toggleFullScreen();
This allows the page to activate full screen, and could possibly be activated via page load on a javascript page. However, there is no support for older browsers.
When I needed to do something similar I used a splash screen. The button to continue into full screen mode requested it as an attribute of a JS pop:
onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"
This is not fullproof, but worked better than any other methods I found. You likely won't be able to do this without user interaction, so using something like a splashscreen allows you to minimize the intrusion to something more commonly accepted.
This is not exactly what the OP was looking for, but in my particular situation, I found a combination of kiosk mode and some dynamic styling to work.
I was looking to start a browser with a particular URL and have it start in full screen mode. The use case is little to no user interaction on a terminal in a manufacturing plant with a status screen. Following power up, it needs to display only the status without interaction (i.e. display none of configuration UI elements unless the user interacts).
Perhaps, not realistic on a complex site, but my use was a particular "pane" (div in this case) element. To focus on the particular div, I hid the other divs, and set styles accordingly. If there happens to be user interaction to change from and to fullscreen, I (1) use the regular myElement.*requestFullScreen() document.*exitFullscreen() calls, (2) show/hide the other divs, and (3) switch between the classes below:
.right-pane-fullscreen
{
margin-left: 0px;
}
.right-pane-normal
{
margin-left: 225px;
}
Related discussion on how to use kiosk mode in Chrome (be aware that other Chrome processes running prior to launching kiosk mode can prevent this from working)
Opening Chrome browser in full window or kiosk mode on windows 7
I have a use case where I need to use the navigator.vibrate API to vibrate once an image has finished sliding in from the side:
Code pen demo here: https://codepen.io/ifusion/pen/XeWqpj
Note, this only seems to work on Android Google Chrome & Android Firefox
However if the navigator.vibrate is not activated by an actual touch then in chrome throws an error in the console:
[Intervention] Blocked call to navigator.vibrate because user hasn't tapped on the frame or any embedded frame yet: https://www.chromestatus.com/feature/5644273861001216.
Samsung are using it at the end of the second step on this site: https://explorethenextgalaxy.com/ (Only works on android chrome & android firefox).
Screenshot at the point of it happening: https://www.dropbox.com/s/e8h7s3nzfwdk9dk/Screenshot%202017-09-13%2016.50.24.png?dl=0
I have had a look through their code and they are just using the navigator.vibrate just like I am and can't see them doing anything differently.
Is there a way to by pass this? I have tried .click() etc but the error still shows.
The vibrate API is only available once the user has started interacting with your page (e.g, by tapping or dragging on the screen). It cannot be used before a user interaction -- this is to prevent web pages (particularly embedded advertisements!) from attempting to scare the user by making their phone vibrate.
There is no way to bypass this, short of restructuring your page such that the user has to tap something before seeing that content.
Another way to this easily.
Disable this option on your chrome browser by going to
chrome://flags
and find option called :: Requiring user gesture for the Vibration API and change the value to Disable.
this will require reload your browser and now every thing work find.
I just faced this problem and found easy solution:
window.navigator.vibrate() && window.navigator.vibrate(100);
using on event handler.
No more error console message.
Just check if it's mobile
const isMobile: () => {
const nav = navigator.userAgent.toLowerCase();
return (
nav.match(/iphone/i) || nav.match(/ipod/i) || nav.match(/ipad/i) || nav.match(/android/i)
);
};
isMobile() && window.navigator.vibrate(100);
if(window.navigator.userAgentData.mobile){
window.navigator.vibrate(100);
}
For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});
In chrome, if I go to chrome://flags/ and make a change on the flags page ( enable/disabe features ), a button appears at the bottom of the page which when clicked restarts chrome and re-opens the pages that were opened.
Does anyone know what javascript code allows that to happen ?
This is the html where the button appears
<div class="needs-restart" jsdisplay="needsRestart">
<div i18n-content="flagsRestartNotice">NEEDS_RESTART</div>
<button class="experiment-restart-button"
type="button"
i18n-content="flagsRestartButton">RESTART</button>
</div>
Thanks
A restartBrowser() function is called from the click of that button.
From flags.js:
/**
* Asks the C++ FlagsDOMHandler to restart the browser (restoring tabs).
*/
function restartBrowser() {
chrome.send('restartBrowser');
}
Like the comment implies, it hooks into the C++ code behind Chrome, which will attempt a restart.
Javascript by itself does not allow you to restart the browser. If it did, websites could restart your browser whenever they wanted, which would be annoying for the user. The chrome://flags/ has special permission to interact with the browser and tell it to request a restart. This code is not shown; it's part of Chrome.
I think there is no javascript solution for that but you can type in the url bar :
chrome://restart
in order to restart google chrome manually.
If you try this trick using Javascript:
window.location = 'chrome://restart';
then you will get an error message that says "Not allowed to load local resource:"
Entering the following into the address bar restarts Chrome:
> chrome:restart
But you'll need to find a way to call it:
http://www.phpied.com/files/location-location/location-location.html