작업 표시 줄에서 브라우저 창 깜박임 만들기


104

JavaScript를 사용하여 작업 표시 줄에서 사용자의 브라우저를 깜박임 / 깜박임 / 강조 표시하려면 어떻게해야합니까? 예를 들어 사용자가 서버에 새 메시지가 있는지 확인하기 위해 10 초마다 AJAX 요청을하는 경우 사용자가 당시 다른 응용 프로그램을 사용하고 있더라도 즉시 알 수 있기를 바랍니다.

편집 :이 사용자는 새 메시지가 도착했을 때주의가 산만 해지기를 원합니다.


7
이상한, 야후 메일은 그것을, 나는 어떻게 tho
Ayyash

답변:


86

이것은 작업 표시 줄 단추가 색상을 변경하는 데 깜박이지 않지만 마우스를 움직일 때까지 제목이 깜박입니다. 이것은 크로스 플랫폼에서 작동하며 다른 탭에있는 경우에도 작동합니다.

newExcitingAlerts = (function () {
    var oldTitle = document.title;
    var msg = "New!";
    var timeoutId;
    var blink = function() { document.title = document.title == msg ? ' ' : msg; };
    var clear = function() {
        clearInterval(timeoutId);
        document.title = oldTitle;
        window.onmousemove = null;
        timeoutId = null;
    };
    return function () {
        if (!timeoutId) {
            timeoutId = setInterval(blink, 1000);
            window.onmousemove = clear;
        }
    };
}());

업데이트 : HTML5 알림 사용을 살펴볼 수 있습니다 .


1
IE 8에서 설명한대로 작동하지 못했습니다. 제목이 계속 깜박입니다. onmousemove를 사용하는 대신 onfocus 및 onblur를 사용하여 창에 초점이 맞춰 졌는지 여부를 추적하고 onfocus 기능에서 깜박임을 중지해야했습니다. 따라서 페이지가로드 될 때 부울 "focused"변수를 토글하는 onfocus 및 onblur 함수를 등록합니다. 깜박임이 시작될 때 추적 할 또 다른 부울이 있습니다. onfocus에서 깜박임이 시작되면 중지합니다.
Peter M

4
이것은 Chrome에서 작동하지 않는 것 같습니다. Chrome이 빈 문자열이 아무것도 아니라는 것을 이해하지 못하는 것 같습니다. "빈"메시지로 하이픈을 사용하면 제대로 작동합니다.
John Bubriski

1
경고가 여러 번 트리거되면 누적되는 것처럼 보입니다. 이로 인해 간격이 점점 빨라지고 제거하면 단일 간격 만 제거됩니다.
Horse

2
Windows 7에서 제목 변경이 작업 표시 줄에서 깜박이거나 깜박이지 않습니다
Chand

1
여기에 인수 (메시지)를 어떻게 전달합니까?
shinzou

54

브라우저 제목 표시 줄에서 알림 메시지를 깜박일 목적으로 jQuery 플러그인 을 만들었습니다 . 깜박임 간격, 기간, 창 / 탭에 초점이 맞춰 졌을 때 깜박임이 멈춰야하는 경우 등과 같은 다양한 옵션을 지정할 수 있습니다. 플러그인은 Firefox, Chrome, Safari, IE6, IE7 및 IE8에서 작동합니다.

다음은 사용 방법에 대한 예입니다.

$.titleAlert("New mail!", {
    requireBlur:true,
    stopOnFocus:true,
    interval:600
});

jQuery를 사용하지 않는 경우에도 소스 코드 를보고 싶을 수 있습니다 (모든 주요 브라우저를 완전히 지원하려는 경우 제목 깜박임을 수행 할 때 해결해야하는 몇 가지 기발한 버그 및 가장자리 사례가 있습니다).


6

내 "사용자 인터페이스"응답은 : 당신이 확실 사용자가 브라우저가 깜박 원하거나 할 생각 기를 원합니까 그들이 원하는 합니까? 내가 귀하의 소프트웨어를 사용하는 경우 이러한 경고가 매우 자주 발생하여 방해를 받으면 짜증이 날 것임을 알고 있습니다.

이 방법을 사용하고 싶다면 자바 스크립트 알림 상자를 사용하세요. 이것이 Google 캘린더가 이벤트 알림을 위해 수행하는 작업이며 아마도 몇 가지 생각을했을 것입니다.

웹 페이지는 실제로 알아야 할 알림을위한 최상의 매체가 아닙니다. "ZOMG, 서버가 다운되었습니다!"라는 문구를 따라 무언가를 설계하는 경우 경고, 자동화 된 전자 메일 또는 SMS 메시지를 적절한 사람에게 보낼 수 있습니다.


11
이것은 질문에 대한 답을 제공하지 않습니다. 작성자에게 비판이나 설명을 요청하려면 게시물 아래에 댓글을 남겨주세요.
secretformula 2014-06-26

2
@secretformula 5 년 된 게시물을 파 내고 저품질로 표시하는 것이 정말로 필요합니까?
Taifun 2014-06-26

2
@Taifun VLQF 대기열에 올라 왔으므로 그렇습니다. Meta도 이것에 대해 논의했습니다
secretformula 2014-06-26

@secretformula, 이것은 실제로 질문에 대한 아주 좋은 대답을 제공합니다 : JavaScript 사용 alert.
Sam

틀렸거나 말거나, 이것은 나에게 대답이 아닌 것 같지만, 역사에 따르면 2 명의 중재자가 이미 NAA 플래그를 거부했음을 알 수 있으므로 여기에서 합의를 따르고 있습니다.
Jean-François Fabre

6

아마도 당신은 Windows 자바 스크립트 API에 대한 으르렁 거리는 창에서 이것을 할 수 있습니다.

http://ajaxian.com/archives/growls-for-windows-and-a-web-notification-api

하지만 사용자는 으르렁 거리는 것을 설치해야합니다.

결국 이것은 NotificationAPI의 형태로 Google Gears의 일부가 될 것입니다.

http://code.google.com/p/gears/wiki/NotificationAPI

따라서 지금은 으르렁 거리는 접근 방식을 사용하고, 가능하면 창 제목 업데이트로 돌아가고, 결국 Gears 알림 API를 사용하려는 시도를 이미 엔지니어링하는 것이 좋습니다.


5
                var oldTitle = document.title;
                var msg = "New Popup!";
                var timeoutId = false;

                var blink = function() {
                    document.title = document.title == msg ? oldTitle : msg;//Modify Title in case a popup

                    if(document.hasFocus())//Stop blinking and restore the Application Title
                    {
                        document.title = oldTitle;
                        clearInterval(timeoutId);
                    }                       
                };

                if (!timeoutId) {
                    timeoutId = setInterval(blink, 500);//Initiate the Blink Call
                };//Blink logic 

3

내가 이것을 생각할 수있는 유일한 방법은 메시지가 수신 될 때 alert ( 'you have a new message')와 같은 일을하는 것입니다. 창이 최소화 된 경우 작업 표시 줄이 깜박이지만 원하지 않는 대화 상자도 열립니다.


1
현재 브라우저에서 일관되지 않음-각각 다르게 작동하며 작업 표시 줄 아이콘이 깜박이지 않습니다 (테스트 된 Win8-IE10, Chrome, Firefox)
danwellman

3

Gmail이 사용하는 접근 방식을 취하고 페이지 제목에 메시지 수를 표시하는 것은 어떻습니까?

때때로 사용자는 새 메시지가 도착했을 때주의가 산만 해지는 것을 원하지 않습니다.


2

window.focus ()를 시도해 볼 수 있지만 화면이 전환되면 성 가실 수 있습니다.


1

사용자에게 알리기 위해 각각의 새 메시지로 웹 페이지의 제목을 변경할 수 있습니다. 나는 브라우저 채팅 클라이언트를 위해 이것을했고 대부분의 사용자는 그것이 충분히 잘 작동한다고 생각했습니다.

document.title = "[user] hello world";

1

AFAIK, 일관성을 유지하는 좋은 방법은 없습니다. IE 전용 웹 기반 IM 클라이언트를 작성했습니다. 우리는 대부분의 경우 작동하는 window.focus ()를 사용했습니다. 때로는 실제로 창이 전경 앱에서 포커스를 훔치 게하여 정말 짜증나게 할 수 있습니다.


0

이러한 사용자는 새 메시지가 도착할 때주의가 산만 해지기를 원합니다.

회사 내부 프로젝트 용 앱을 작성하는 것 같습니다.

알림 아이콘을 추가 한 다음 새 메시지를 받으면 멋진 팝업이나 풍선 팝업 등을 할 수있는 .net에서 작은 Windows 앱을 작성하는 것을 조사하고 싶을 수 있습니다.

이것은 지나치게 어렵지 않으며 '트레이 아이콘을 어떻게 표시합니까?'와 '알림 팝업을 어떻게 수행합니까?'라고 물어 보면 훌륭한 답변을 얻을 수 있습니다. :-)

기록을 위해 (경고 / 프롬프트 대화 상자를 사용하는 것 외에) JS에서 작업 표시 줄을 깜박일 수 없다고 확신합니다. 이것은 Windows에 특화된 것이며 JS는 실제로 그렇게 작동하지 않습니다. 일부 IE 관련 Windows ActiveX 컨트롤을 사용할 수 있지만 가난한 사용자에게 IE를 유발합니다. 하지마 :-(


0
function blinkTab() {
        const browserTitle = document.title;
        let timeoutId;
        let message = 'My New Title';

        const stopBlinking = () => {
            document.title = browserTitle;
            clearInterval(timeoutId);
        };

        const startBlinking = () => {
            document.title = document.title  === message ? browserTitle : message;
        };

        function registerEvents() {
            window.addEventListener("focus", function(event) { 
                stopBlinking();
            });

            window.addEventListener("blur", function(event) {
                const timeoutId = setInterval(startBlinking, 500);
            });
        };

        registerEvents();
    };


    blinkTab();
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.