可能重复:
测试窗口是否具有焦点
我经常使用的网站有一个在线聊天功能(弹出窗口,非常类似于Facebook).当我的浏览器不在此站点的选项卡上时,会发出警报以警告我收到任何新的聊天消息,并且当我的浏览器不在此站点的选项卡上时,声音不会发生(按设计我假设) .
这是如何实现的?代码(我假设并因此在我的客户端执行的javascript)如何知道我什么时候/不在看网站?
谢谢
我已经尝试过使用onblur来解决我的问题,但这只是因为焦点从一个文本框变为另一个文本框或类似的东西.我正在为嵌入式浏览器编写一个有几个问题的网页.当浏览器被隐藏时,gif没有被隐藏,并且似乎它保留在缓存中.我的想法也许是有一种方法可以调用浏览器隐藏gif,因为焦点丢失了.在这种情况下,焦点类似于用户点击另一个窗口.这似乎超出了网络技术的范围,但我想我会问.
谢谢!
是否有可用于向用户显示返回其网页的消息的跨浏览器事件?
例如,用户打开了十个应用程序或选项卡.他们从我们的应用程序收到新通知,我会显示一个通知框.当他们切换到我们的标签时,我想开始我们的通知动画.
Activate事件是桌面应用程序共同但到目前为止,对window,document并且body,无论是"activate"或"DOMActivate"应用程序或制表符,但之间交换的时候做任何事情"focus"和"blur"做.此事件有效,但命名不同,应该执行此操作的事件不同.
那么使用跨浏览器的正确事件还是有另一个事件?
您可以通过在控制台或页面中添加它进行测试,然后在应用程序或选项卡之间进行交换:
window.addEventListener("focus", function(e) {console.log("focused at " + performance.now()) } )
window.addEventListener("blur", function(e) {console.log("blurred at " + performance.now()) } )
Run Code Online (Sandbox Code Playgroud)
更新:
在链接中可能重复的是W3的网页浏览权限的文档的链接在这里.
它说要使用visibilitychange事件来检查页面何时可见或隐藏,如下所示:
document.addEventListener('visibilitychange', handleVisibilityChange, false);
Run Code Online (Sandbox Code Playgroud)
但是有一些问题:
顶级浏览上下文的文档可以处于以下可见性状态之一:
隐藏文档在任何屏幕上都不可见.可见文档至少在一个屏幕上至少部分可见.这与hidden属性设置为false的条件相同.
所以它解释了为什么在切换应用时它不会触发.但即使切换应用程序和窗口完全隐藏,事件也不会触发(在Firefox中).
所以在页面的最后是这个说明:
Page Visibility API使开发人员能够了解文档何时可见或焦点.当附加到Window对象时,现有机制(例如焦点和模糊事件)已经提供了一种机制来检测Document何时是活动文档.
因此,似乎建议使用焦点和模糊来检测窗口激活或应用切换是公认的做法.
我发现这个答案接近于制作跨浏览器解决方案所需要的但需要关注和模糊(至少对于Firefox).
观察:
StackOverflow有一个反对提及框架或库的策略.这里链接的答案有"最佳"答案的支持.
但这些可能会变得过时.从昨天开始,我发现提到了两个框架(polyfill),试图在这里明显解决同样的问题和isVis(不创建链接).如果这是一个问答网站,并且有一个有效的答案是"这里有一些适用于我的代码"但是"这是我使用相同代码创建的库,可以保持最新并在github上维护"不是有效,然后在我看来它错过了它的目标.
我知道上面应该可以去meta而且我有但是他们因为某些原因拒绝改变现状.在这里提到它,因为它是一个相关的例子.
IE11 有一个有据可查的 iframe 内存泄漏。在 SPA 中,如果您使用 iframe,内存将增长到大约 1.5GB,之后它会变慢直到崩溃。
我的任务是检测浏览器何时崩溃并尽快重新启动页面。该应用程序是嵌入在 ASP.NET MVC 中的 Vue.JS。
IE11 浏览器中提供了哪些内存/性能检测?
其他想法?谢谢。:)
来源:https : //developer.microsoft.com/en-us/microsoft-edge/platform/issues/10186458/ https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8449104/ http://support.sas.com/kb/60/514.html
javascript performance memory-leaks internet-explorer-11 vue.js
其他 许多答案也涵盖了正在运行的Javascript脚本如何判断其当前窗口是否处于活动状态。但是,这是一组相当严格的选择,并且之间没有区别(例如)
尽管在后两种情况下该网页仍然对用户可见,但所有这些都被视为无效。
尽管有证据表明,鉴于网络浏览器沙箱的工作原理,从技术上讲这是不可能的,但我仍然希望能够发现上述两者之间的差异。例如,为(1)或(2)暂停动画,但为(3)或(4)保留动画。我想知道是否Javascript(加上框架,我想是WebAssembly)提供了一种机制来确定这一点-否则,是否有任何特定的浏览器具有从一页的javascript代码中进行确定的机制。
具体到谷歌浏览器:我试图检测页面何时失去焦点,但不是当它失去javascript控制台/其他开发工具的焦点时(即页面仍然是主要焦点)。
有任何想法吗?
我尝试过使用window.onblur和visibilitychange事件。
简短的用例:我正在开发一个游戏,由于某种原因,当它运行我的编辑器(OSX 上的 sublime text 2)时速度慢得像爬行一样。如果我改变窗口焦点就可以了。所以我试图在进入编辑器时暂停游戏,但在 javascript 控制台中保持游戏运行
[编辑]
由于我的问题显然不清楚,试图澄清:我希望能够区分以下之间的区别:
我想播放动画并确保访问者会看到它.我的问题是,当有人在后台打开一个新的浏览器选项卡时(例如通过单击链接target="_blank"),文档的就绪事件是不够的,因为访问者有可能仅在几分钟后才会看到该站点,所以他不会从一开始看到动画或任何东西.
有没有办法在用户点击浏览器选项卡时启动我的动画(通过运行正确的JavaScript函数)?是否有可能模仿此行为的事件或任何其他解决方法?如果代码仅在第一次执行或每次用户单击浏览器选项卡时执行都无关紧要.
我想仅当我的网站中没有打开的 chrome 选项卡或选项卡已打开且未选择(活动)时才显示 GCM 服务工作线程消息。
\n\n这是我的代码。
\n\n错误: chrome 未定义(\xe2\x80\xa6)。
\n\n清单.json
\n\n { \n "name": "Webplus Express", \n "short_name": "Webplus Express", \n "icons": [{ \n "src": "https://raw.githubusercontent.com/deanhume/typography/gh-pages/icons/typography.png", \n "sizes": "192x192",\n "type": "image/png" \n }], \n "start_url": "/index.html", \n "display": "standalone", \n "gcm_sender_id": "298340340811",\n "gcm_user_visible_only": true,\n "background": {\n "scripts": ["service-worker.js"]\n }, \n "permissions": [\n "gcm","tabs","activeTab"\n ] \n }\nRun Code Online (Sandbox Code Playgroud)\n\nservice-worker.js
\n\n // The service worker running in background to receive the incoming\n// push notifications and user clicks\nself.addEventListener(\'push\', function(event) { …Run Code Online (Sandbox Code Playgroud) service google-chrome worker push-notification google-cloud-messaging
我有一个使用 socket io的简单聊天应用程序。非常类似于socket io chat 官方demo。每当用户最小化页面或打开另一个应用程序或页面脱离焦点时,Socket io 就会在所有移动浏览器上 ping 超时。
在我的 Web 应用程序中,每当用户从移动设备上的 chrome/firefox/safari 浏览器单击文件输入上传时,它都会打开电话对话框以从厨房中选择文件以进行选择和上传。在此期间(我的聊天页面由于可见性而失去焦点),当用户搜索文件时,恰好在 30 秒后,socket io 客户端发出 ping 超时,人员聊天断开连接。
在我的应用程序级别,如果 socket io 由于任何原因进入 ping 超时,我正在重新连接,但这并不能解决我的问题,因为如果用户在 31 秒后单击 1 个文件,则不会发送该图像文件聊天,因为套接字 io 在此期间超时,当用户的焦点重新回到浏览器选项卡上时,需要几秒钟才能重新连接。因此文件上传操作丢失,因为文件已上传但套接字 io 连接处于 ping 超时状态。所以当它重新连接时,选定的文件上传永远不会发送给其他连接的用户。
我尝试使用此代码检测何时用户的页面焦点已关闭,
document.addEventListener("visibilitychange", onchange);
Run Code Online (Sandbox Code Playgroud)
然后一旦页面没有聚焦,我使用 setinterval 将我的自定义心跳事件发送到我的服务器代码。(只是为了防止 socket io 与服务器通信以保持连接有效)。这适用于桌面浏览器,但在所有移动浏览器上,只要用户的页面不在焦点上,即如果用户最小化浏览器,则打开一个新应用程序,或转到选择文件上传屏幕,套接字 io 在 30 秒后超时,有时甚至更快。
我的客户端js代码:
var beating;
//function to detect if user gone out of page
//startSimulation and pauseSimulation defined elsewhere
function handleVisibilityChange() {
//socket = this.socket;
if (document.hidden) { …Run Code Online (Sandbox Code Playgroud) 我想确定使用jquery或javascript,即用户是否在同一浏览器上切换了标签?
即如果用户当前站在浏览器上说mozilla-firefox选项卡1号,现在他已经打开了另一个选项卡,表示选项卡2,此时会出现一个弹出窗口,其中显示消息"tab changed changed"
javascript ×9
html ×2
asp.net ×1
chat ×1
css ×1
events ×1
execution ×1
focus ×1
jquery ×1
memory-leaks ×1
node.js ×1
onblur ×1
performance ×1
service ×1
settimeout ×1
socket.io ×1
visibility ×1
vue.js ×1
window ×1
worker ×1