[英]How can I detect when user switches the tab using javascript?
I want to end the fullscreen mode when the tab is changed or quickly switched.我想在标签更改或快速切换时结束全屏模式。 Is it possible to do it with javascript?是否可以用 javascript 做到这一点?
I have the following javascript code which ends fullscreen I want help in detecting the change in inter chrome tabs [using ctrl + tab shortcut] also in detecting the change in windows tabs like when a person switch chrome(any browser) to file explorer (for example)[using alt + tab shortcut].我有以下 javascript 代码结束全屏我需要帮助检测铬间标签的变化[使用 ctrl + 标签快捷方式] 也检测 windows 标签的变化,比如当一个人将 chrome(任何浏览器)切换到文件资源管理器(对于示例)[使用 alt + tab 快捷方式]。
My javascript code --我的 javascript 代码——
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
I want to wrap this code in the switch tab function.我想将此代码包装在开关选项卡 function 中。 Please help.请帮忙。
I also tried -我也试过——
document.addEventListener("visibilitychange", function tabsswitch() {
if(document.hidden) {
alert('document hidden')
}
});
but that's not working when i change the windows tab for instance like i switch from chrome to my code editor and again back to chrome it does't show any alert.但是当我更改 windows 选项卡时,这不起作用,例如我从 chrome 切换到我的代码编辑器,然后再回到 chrome,它没有显示任何警报。
There is HTML 5 API to detect if tab visibility is changed:有 HTML 5 API 来检测标签可见性是否改变:
document.addEventListener("visibilitychange", function () {});
The Page Visibility API provides us with two top-level attributes: document.hidden (boolean) and document.visibilityState (which could be any of these strings: “hidden”, “visible”, “prerender”, “unloaded”).页面可见性 API 为我们提供了两个顶级属性:document.hidden(布尔值)和 document.visibilityState(可以是以下字符串中的任何一个:“hidden”、“visible”、“prerender”、“unloaded”)。
This would not be not good enough without an event we could listen to though, that's why the API also provides the useful visibilitychange event.如果没有我们可以收听的事件,这还不够好,这就是 API 还提供有用的可见性更改事件的原因。
So, here's a basic example of how we could take action on a visibility change:因此,这是一个基本示例,说明我们如何对可见性更改采取行动:
function handleVisibilityChange() {
if(document.hidden) {
// the page is hidden
} else {
// the page is visible
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);
I got similar issue, while using FullScreen mode tab visibility wasn't working.我遇到了类似的问题,而使用全屏模式选项卡可见性不起作用。 To detect the visibility while using alt + tab add this to existing code要在使用 alt + tab 时检测可见性,请将其添加到现有代码中
window.addEventListener('focus', function() {
console.log('show');
}, false);
window.addEventListener('blur', function() {
console.log('hide');
}, false);
this worked for me!这对我有用! Hope this will be useful to detect the tab change in full screen and while using alt + tab希望这对于在全屏和使用alt + tab时检测选项卡更改很有用
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.