This question already has answers here:
How to tell if browser/tab is active [duplicate]
(6 answers)
Closed 8 years ago.
Is It possible to detect when browser window Is active/inactive
I did try:
$(window).on('focus', function(){
console.log(1);
});
$(window).on('blur', function(){
console.log(2);
});
But it seems that it's working only when user will click the window.
but showing 2 when user will click eg. browser address bar.
What I want to achieve is to detect when current tab is active one.
How to improve this code?
Active means when the tab is visible. But if you want to tell if the user's mouse is directly on the page, you could use this:
<html onmouseenter="document.getElementById('h1').innerHTML = 'active'"onmouseleave="document.getElementById('h1').innerHTML = 'not active'">
<body style="width:100%;height:100px">
<h1 id="h1">not active</h1>
</body>
</html>
With the simple code above you can tell if the users mouse is on the page or not
EDIT: using the page visibility API:
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
}
else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
}
else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
}
else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
if (document[hidden]) {
//Not visible, Do whatever
}
else {
//Visible
}
}
if (typeof document.addEventListener === "undefined" ||
typeof document[hidden] === "undefined") {
alert("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
}
else {
document.addEventListener(visibilityChange, handleVisibilityChange, false);
Related
I have seen some websites (discord. hotjar), using the Visibility API to show a bullet when the tab is inactive, and hide it when its active again,
How we can do that?
For this, you need to create two different favicons for each mode and toggle between them using the Visibility API. Something like this:
// Set the name of the hidden property and the change event for visibility
let hidden;
let visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
var link = document.querySelector("link[rel~='icon']");
if (!link) {
link = document.createElement('link');
link.rel = 'icon';
document.getElementsByTagName('head')[0].appendChild(link);
}
function handleVisibilityChange() {
if (document[hidden]) {
link.href = 'https://www.linkpicture.com/q/favicon2.ico';
} else {
link.href = 'https://www.linkpicture.com/q/favicon1_1.ico';
}
}
// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
Preview:
Does anyone know a proper way to mute the sound in the game when tab or browser is inactive?
I've tried to do this by this(by JS libraries) way
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
document.addEventListener(visibilityChange, handleVisibilityChange, false);
function handleVisibilityChange() {
$("video").prop('muted', document[hidden]);
}
but its not work for me. Thank you.
Not sure but you probably could use OnApplicationFocus and OnApplicationPause on a controller component within Unity.
It could then enable and disable all sound by simply set AudioListener.pause or alternatively the AudioListener.volume accordingly
public class FocusSoundController : MonoBehaviour
{
void OnApplicationFocus(bool hasFocus)
{
Silence(!hasFocus);
}
void OnApplicationPause(bool isPaused)
{
Silence(isPaused);
}
private void Silence(bool silence)
{
AudioListener.pause = silence;
// Or / And
AudioListener.volume = silence ? 0 : 1;
}
}
While using OnApplicationFocus will work it will also mute things if they switch to another window but you can still see the browser which may not be what you want.
If you go to the bottom of the thread below you'll see a post by someone from Unity and they give an example that uses the visibility change similar to what's in the original post but also has the Unity C# side that you'll need to actually get it to work. I didn't like hard coding the object name so I passed its gameObject.name when it calls the register function. I'm not used to working with jslib plugins so initially, I didn't convert the pointer to a string in the jslib using Pointer_stringify(str). If you do this you'll also want to set it to a local var or when an event triggers your string pointer could be anything.
Pause and Tabbing Events
Do you guys have any idea how to detect mobile Chrome sleep event? I tried with:
window.onblur = fnPause;
document.onfocusout = fnPause;
document.body.onfocusout = fnPause;
var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
if (typeof document.addEventListener === "undefined" ||
typeof document[hidden] === "undefined") {
// doesn't support event listeners :(
} else {
// Handle page visibility change
document.addEventListener(visibilityChange, function() {if (document[hidden]) {fnPause();} else {fnResume();}}, false);
}
Still fnPause() is never called when I leave the html5 game open and phone goes sleep mode and locks.
This question is not a duplicate of - Is it possible, in JavaScript, to detect when the screen is turned off in the Android & iOS browsers . Two of the solutions I tried above (blur and pagevisibility) without success and the third - using timers - only detects resume event and not sleep.
This question already has answers here:
How to prevent closing browser window?
(4 answers)
Closed 8 years ago.
I am trying to implement the functionality to confirm whether "Leaving the page" whenever the user tries to close the browser.
As of now i have implemented,
function closeIt(e) {
// For IE and Firefox prior to version 4
if (e) {
e.returnValue = 'Sure?';
}
}
window.onbeforeunload = closeIt;
This works fine for closing the browser, but instead works for all the links in the page aswell, as there is condition to identify what is causing the onbeforeunload event.
Can anyone help me identify them.
Thanks in advance.
Referring to various articles and doing some trial and errors, finally developed this idea which works perfectly for me just the way i wanted it to happen. The logic was quiet simpler it implement as well The idea was to detect the unload event that is triggered by closing the browser. In that case, the mouse will be out of the window, pointing out at the Close('X') button.
$(window).on('mouseover', (function () {
window.onbeforeunload = null;
}));
$(window).on('mouseout', (function () {
window.onbeforeunload = ConfirmLeave;
}));
function ConfirmLeave() {
return "";
}
//Edit start
var prevKey=""
$(document).keydown(function (e) {
if (e.key=="F5") {
window.onbeforeunload = ConfirmLeave;
}
else if (e.key.toUpperCase() == "W" && prevKey == "CONTROL") {
window.onbeforeunload = ConfirmLeave;
}
else if (e.key.toUpperCase() == "R" && prevKey == "CONTROL") {
window.onbeforeunload = ConfirmLeave;
}
else if (e.key.toUpperCase() == "F4" && (prevKey == "ALT" || prevKey == "CONTROL")) {
window.onbeforeunload = ConfirmLeave;
}
prevKey = e.key.toUpperCase();
//Edit End
The ConfirmLeave function will give the pop up default message, it case there is any need to customize the message, return the text to be displayed instead of empty string.
Please note that the e.key returns undefined in some versions of chrome, so its better to use e.keyCode for key values and refer to http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes for values
I need determine, if current page is active.
I know i can find if tab get/lost focus with this answer:
https://stackoverflow.com/a/1760268/449553
It is ok, if tab state change, BUT i need to get initial value.
There is a few ways to open page:
going by link in this active tab
open in new tab
open in new background tab
I understand, that page need some time to load. So I need to get this value after DOM loaded.
Is there any way to find this value?
Try pagevisibility:
var visibilityChange,hidden, state;
if (typeof document.hidden !== "undefined") {
hidden = "hidden";
visibilityChange = "visibilitychange";
state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
hidden = "mozHidden";
visibilityChange = "mozvisibilitychange";
state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
state = "webkitVisibilityState";
}
document.addEventListener(visibilityChange, function() {
document.title = document[state];
}, false);
document.title = document[state];
if(document[state]==="hidden"){
//hidden
}else{
//show
}
See the compatibility