【问题标题】:Possible to flash a Browser window using Javascript?可以使用 Javascript 刷新浏览器窗口吗?
【发布时间】:2010-10-03 22:56:48
【问题描述】:

像许多程序一样任务栏/停靠栏闪烁它们的窗口以提醒用户切换到该程序,

是否可以使用 Javascript 刷新 Browser 窗口? (也欢迎仅 FireFox 的脚本)

这对于有大量实时活动的基于网络的聊天/论坛/社区软件很有用。

【问题讨论】:

  • 伙计……我一定是瞎了眼……我重新阅读了这个问题 4 次,但我仍然使用 Javascript 将其读为“没有”,并且真的被 javascript 的答案弄糊涂了。

标签: javascript firefox browser


【解决方案1】:

@Hexagon Theory:你为什么要重写整个 head 元素只是为了改变 head 中一个元素的值?您的解决方案在多个层面上都非常低效。

<html>
<head>
<link rel="icon" href="on.png" type="image/png" id="changeMe" />
<script type="text/javascript" src="flash.js"></script>
</head>
<body>
</body>
</html>

flash.js:

function Flasher(speed) {
  var elem = document.getElementById('changeMe');

  this.timer = setTimeout(function() {
    elem.href = elem.href ==  'on.png' ? 'off.png' : 'on.png';
  }, speed);

  this.stop = function() { clearTimeout(this.timer); }
}

/* sample usage
 *
 * var flasher = new Flasher(1000);
 * flasher.stop();
 */

它实际上不必是一个类,但它有助于保持全局命名空间的清洁。这是未经测试的,但如果由于某种原因简单地更改 href 不起作用,请克隆链接节点,更改 href 并用克隆的链接替换旧链接。

【讨论】:

    【解决方案2】:

    在这一点上,似乎只有弹出一个警告对话框才能解决问题......我觉得这似乎有点太侵入性了,特别是考虑到您试图使用它。但是,您可以修改 document.title 以吸引用户的注意力,而不是让它闪烁,方法是在站点名称前添加一些信号(可能是字符串“NEW!”),然后使用间隔不断将其更改为"",然后会产生一个不错的小“闪烁”错觉。

    简单示例:

    <html>
    <head>
    <title>Chat System</title>
    <script>
    var timer, old_t = document.title, blink_amount = 5, cur_b = 0;
    function notify()
     {
    cur_b = 0;
    timer = setInterval(function()
     {
    if (cur_b < blink_amount * 2)
     {
    cur_b++;
    document.title = (document.title.indexOf('NEW! ') != -1) ? old_t : 'NEW! ' + old_t;
     }
    else
     {
    clearInterval(timer);
     }
     }, 600);
     }
    
    notify();
    
    // From here, it's just a matter of calling the
    // notify() function whenever you detect a new message.
    </script>
    </head>
    <body>
    </body>
    </html>
    

    【讨论】:

    • 问题在于,在“任务栏”上没有文本标签的系统(例如 OS X、Win7 和许多 Linux GUI)上,您将看不到任何事情发生。
    • 更改 dcument.title 是我见过的最好的,其他的都太麻烦了。 (Gmail 中内置的聊天功能就是这样做的,因此您可以通过一个非常生动的示例来决定)。
    • @Steve:在这些情况下,无论如何,您都不能闪烁图标。在 OSX 上,可接受的行为是反弹停靠图标(或在其上放置一个徽章),但我没有看到任何 javascript 方式来做到这一点。 (Fluid SSB 以某种方式做到了这一点 - 我看到停靠图标上的未读 gmail 计数)
    【解决方案3】:

    嘿,这个问题的另一个有趣的解决方案刚刚击中了我。为什么不真正通过让图标在浏览器中闪烁来吸引用户的注意力?例如,您可以制作两个图标(在下面的示例中为 on.pngoff.png)并反复交换它们以真正吸引用户的眼球。以下是一个简单的实现;请记住,您需要远程引用此脚本或将其放在页面正文中,因为它使用的方法会反复替换 @987654321 的内容@ 标签。不过,试一试;我更喜欢它的简单性。

    page.html:

    <html>
    <head>
    <link rel="icon" href="on.png" type="image/png" />
    <script type="text/javascript" src="flash.js"></script>
    </head>
    <body>
    </body>
    </html>
    

    flash.js:

    var timer, speed = 175;
    function flash()
     {
    head_html = document.getElementsByTagName('head')[0].innerHTML;
    if (head_html.indexOf('href="on.png"') != -1)
    document.getElementsByTagName('head')[0].innerHTML = head_html.replace('on.png', 'off.png');
    else
    document.getElementsByTagName('head')[0].innerHTML = head_html.replace('off.png', 'on.png');
    timer = setTimeout('flash()', speed);
     }
    
    function kill_flash() {clearTimeout(timer);}
    
    flash();
    

    【讨论】:

    • 很有趣,但我说的是闪烁浏览器的任务栏按钮,而不仅仅是选项卡。大多数浏览器在任务栏上显示他们的应用程序图标,而不是页面上的。
    【解决方案4】:

    我刚刚发现了 Firefox 的 window.getAttention(),但它只有在插件调用它时才有效。

    • Windows,窗口的任务栏按钮闪烁
    • Linux,一些窗口管理器会闪烁任务栏按钮,而另一些则立即聚焦窗口
    • Macintosh,桌面右上角的图标闪烁

    【讨论】:

      【解决方案5】:

      Window.Focus() 应该在 Windows 上执行此操作,但不确定是否在其他平台上。如果窗口被最小化,你可能会发现它会将窗口带到前台,这会很烦人:)

      【讨论】:

      • Window.Focus 不是函数,window.focus() 什么也不做(windows xp/FF3)。
      • window.focus() 聚焦浏览器窗口并将其置于前面。但是如果我们在窗口中打开了多个标签,它就不起作用了。
      猜你喜欢
      • 2013-11-16
      • 1970-01-01
      • 2011-01-31
      • 2010-11-05
      • 1970-01-01
      • 2011-07-24
      • 2012-11-28
      • 2011-10-24
      • 1970-01-01
      相关资源
      最近更新 更多