相关疑难解决方法(0)

有没有办法检测浏览器窗口当前是否处于活动状态？

我有定期执行活动的JavaScript.当用户没有看到该站点时(即窗口或选项卡没有焦点),最好不要运行.

有没有办法使用JavaScript？

我的参考点:如果您使用的窗口未处于活动状态,则Gmail聊天会播放声音.

javascript browser focus window

Luk*_*ncl

2015 03-04

560
推荐指数

13
解决办法

25万
查看次数

切换标签时暂停/恢复CSS动画

我在页面上有一堆长时间运行的CSS动画.我想在用户切换到另一个选项卡时暂停它们,并在用户再次返回原始选项卡时恢复它们.为简单起见,我不打算在此时使用跨浏览器解决方案; 让它在Chrome中运行应该足够了.

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    document.querySelector("#test").classList.add("paused");
  } else {
    document.querySelector("#test").classList.remove("paused");    
  }
});

Run Code Online (Sandbox Code Playgroud)

div#test {
  width: 50px;
  height: 50px;
  background-color: red;
  position: absolute;
  left: 10vw;
  animation-name: move;
  animation-duration: 5s;
  animation-fill-mode: forwards;
  animation-timing-function: linear;
}

@keyframes move {
  to {
    left: 90vw
  }
}

.paused {
  animation-play-state: paused !important;
  -webkit-animation-play-state: paused !important;
  -moz-animation-play-state: paused !important;
}

Run Code Online (Sandbox Code Playgroud)

<div id="test"></div>

Run Code Online (Sandbox Code Playgroud)

上面的代码水平移动一个红色矩形.矩形完成动画需要5秒钟.

问题:动画启动后,切换到另一个浏览器选项卡; 经过一段时间(超过5秒)后切换回第一个标签.

预期结果:矩形从其停止的位置继续其路径.

实际结果:矩形出现在最终目的地并停止的大部分时间.有时它按预期工作.视频演示了这个问题.

我打了不同的价值观animation-fill-mode和animation-timing-function,但结果总是相同的.正如rv7 指出的那样,在CodePen,JSFiddle,JSBin和stackoverflow JS工具中共享示例会影响结果,因此最好直接针对本地HTTP服务器上的静态页面进行测试(或使用下面的链接).

为方便起见,我已将上面的代码部署 …

javascript css animation tabs css-animations

eug*_*sqr

2018 10-26

18
推荐指数

2
解决办法

1362
查看次数

只有在选项卡/浏览器窗口聚焦时,javascript才能运行

可能重复:
检测浏览器选项卡是否具有焦点

我有一个简单的Java小程序,可以捕获客户端的屏幕.借助一段javascript代码,我可以调用applet并捕获活动的屏幕图片.

但是,即使它仅通过单击按钮捕获活动屏幕,用户也可能通过在捕获过程中使用ALT TAB切换到其他选项卡来操纵该过程.我想确保只有在加载页面并关注页面时才能进行捕获.

到目前为止,我发现这段javascript代码似乎无法正常工作.即使页面最小化,有时也会卡在焦点上.

<script language="javascript">
     window.onpageshow = function(e) { console.log('pageshow'); };
     window.onfocus = function(e) { console.log('focus'); };
</script>

Run Code Online (Sandbox Code Playgroud)

那么有什么建议我想要实现的目标或任何其他解决方案.

javascript jquery html5

Bon*_*Kun

2017 05-23

8
推荐指数

1
解决办法

2443
查看次数

用户视图页面后启动CSS3转换？

我的主页顶部有一个CSS3动画,会在页面加载后立即启动.问题是如果用户在新选项卡中打开该页面但是没有立即查看它,即使他们没有查看该页面也会播放动画.

有没有办法只在用户拥有该页面的视图后才能启动动画？

有点像在另一个隐藏选项卡中打开YouTube视频时,如果打开该选项卡,它将无法自动播放.如果您在新选项卡中打开笔,它也会执行相同的操作,直到您查看该选项卡时它才会启动

javascript jquery css3

Zai*_*sif

2015 12-23

7
推荐指数

1
解决办法

53
查看次数

检测选项卡之间的会话结束

我正在开发一个可以在不同选项卡中打开的AngularJS webapp,我想知道哪个是检测用户何时在其中一个选项卡中注销的最佳方法; 我想在其他选项卡中弹出一个登录模式窗口.我正在考虑使用服务器发送的事件或跟踪我的服务器cookie的存在.我从来没有做过这样的事情,所以我问的是我的选择有哪些优缺点,或者我是否缺少其他更聪明的方法.

编辑:在服务器上我有ServiceStack(C#)支持Server-Sent Events开箱即用

javascript browser-tab angularjs

bym*_*ere

2016 05-28

6
推荐指数

1
解决办法

668
查看次数

仅在查看页面时运行Javascript Ajax调用

我有一个在控制器上运行的Web应用程序(几乎没有限制的处理,内存和网络带宽).该页面基本上是一个充满LED的简单HTML文件,应该按间隔更新.在每个时间间隔,Javascript向服务器发送Ajax请求,并根据回复更新所有LED.现在这个工作正常!

问题是当用户打开其中一个页面并开始浏览其他内容时.出于安全性和经济原因,我们不希望在客户端未看到此页面时更新页面.这是算法:

页面更新算法的流程图

我开发了这个小测试代码,看看页面事件是如何工作的(参见jsFiddle上的直播):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function m(msg){
    document.getElementById("logplace").innerHTML+=msg+"<br/>";
}
</script>
</head>
<body onblur="m('Blur')" onerror="m('Error')" onfocus="m('Focus')" onload="m('Load')" onresize="m('Resize')" onunload="m('Unload')">
<span id="logplace"></span>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

我需要页面才能在用户当前正在查看时才更新.我搜索了Stackoverflow,以下线程似乎不是答案:

PS.JQuery也存在于服务器上.但如果有一种更简单的方法,我宁愿不使用JQuery.

javascript jquery

Ale*_*ack

2017 05-23

5
推荐指数

1
解决办法

2295
查看次数

当用户在页面上时触发事件

我有这个代码

$(document).ready(function(){
    var fade_in = function(){
        $(".quote").fadeIn();
    }
    setTimeout(fade_in, 2000);
    var fade_out = function() {
      $(".quote").fadeOut();
    }
    setTimeout(fade_out, 10000);
});

Run Code Online (Sandbox Code Playgroud)

它的作用是div"引用"慢慢淡入,停留几秒然后淡出.我想要的是所有这一切都发生在用户在页面上,如果你不在页面中,文本淡入淡出,淡出而你错过它.我怎样才能做到这一点？

html javascript jquery

Jos*_*ose

lucky-day

5
推荐指数

1
解决办法

64
查看次数

当屏幕超时时,setInterval在Android Browser/Mobile Safari中暂停

我为移动webapp构建了一个简单的基于JavaScript的计时器; 为了举例:

var a = 0;
setInterval(function() {
    console.log('a', a);
    a++;
}, 1000);

Run Code Online (Sandbox Code Playgroud)

这在Mobile Safari和Android Browser中运行良好.它将每秒登录到控制台并相应地增加a的值.(好吧,Android浏览器没有console.log支持,但让我们假设它.)

问题:如果屏幕超时(即用户停止与页面交互),则setInterval函数暂停.当用户再次打开屏幕时,它会恢复.这对我不起作用,因为我需要计时器才能继续运行.

问题:有没有办法阻止setInterval函数在屏幕超时时暂停？如果没有,是否可以防止屏幕超时？还有其他选择吗？

提前致谢!

javascript mobile-safari setinterval mobile-website android-browser

mja*_*gda

lucky-day

2
推荐指数

1
解决办法

3961
查看次数

当多个网页在浏览器的多个选项卡中处于活动状态时，Primefaces 空闲监视器

在我们的 web 应用程序中，我们有一个 baseTemplate.xhtml，我的应用程序的每个页面都使用这个模板。这个 baseTemplate.xhtml 具有处理空闲监视器的功能。
问题/问题： 如果用户打开多个选项卡并且一个选项卡处于活动状态，但另一个选项卡在指定的会话超时值内空闲，则用户将被注销。
要求： 我希望如果用户打开多个选项卡并且其中一个选项卡处于活动状态，空闲监视器不应注销。

<h:form>
<p:confirmDialog id="confirmDialog"
                 message="Please click Ok before the timer runs out: "
                 header="Are you there?"
                 severity="alert"
                 closable="false"
                 widgetVar="idleDialog">
  <p:commandButton id="confirm"
                   value="Ok"
                   process="@this"
                   onclick="clearTimeout(window.logoffTimeoutId); PF('idleDialog').hide();"/>
</p:confirmDialog>

<p:remoteCommand name="terminateIdleSession"
                 actionListener="#{idleMonitorView.onIdle}"
                 process="@this"
                 out="count"/>

<p:idleMonitor timeout="#{5 * 60 * 1000}"
               onidle="startTimer()"/>
</h:form>

<script type="text/javascript">
//<![CDATA[            
    function startTimer() {
      clearTimeout(window.logoffUpdaterId);
      PF('idleDialog').show();
      // Set timeout to 2 minutes
      var timeout = 2 * 60 * 1000;
      // Calculate when the time runs out
      window.logoffTime = new …

Run Code Online (Sandbox Code Playgroud)

session jsf primefaces

Mos*_*ava

2017 07-13

1
推荐指数

1
解决办法

825
查看次数