바탕 화면 알림을 생성 한 Chrome 탭에 초점을 맞추는 방법은 무엇입니까?


82

현재 Gmail과 동일한 기능을 구현하고 싶습니다. 새 이메일이 도착하거나 새 채팅이 오면 알림 팝업이 나타나고 클릭하면 Gmail 탭에 초점이 맞춰집니다.

이 코드가 있습니다.

var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { this.cancel(); };
n.show();

알림을 클릭하면 사라집니다. 이제이 알림을 생성 한 페이지를 표시하고 초점을 맞추기 위해 onclick 함수에 몇 가지 코드를 추가해야합니다. GMail이 아주 잘하기 때문에 가능하다는 것을 알고 있습니다. 그러나 나는 Gmail 소스를 조사하는 데 성공하지 못했습니다 (최소화되고 난독 화되어 있음).

아무도 이것을하는 방법을 알고 있습니까?


this.cancel은 현재 Canary 채널에서 더 이상 사용되지 않으며 제거되었습니다.
Brandito

답변:


107

Google 크롬에 window.focus ()를 배치하면됩니다. 클릭하면 해당 창에 초점이 맞춰집니다.

var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { window.focus(); this.close(); };
n.show();

Gmail에서 인스펙터를 열고 위의 코드를 추가하고 다른 탭으로 이동하여 실행했습니다. 알림이 표시되고 클릭하면 Gmail로 돌아 왔습니다.


3
와 ! 그 간단한?! :-) 좋은 대답, 감사합니다. 나는 그것을 위해 꽤 오랫동안 봤지만 그것을 찾을 수 없었다. 이제 완벽하게 작동합니다. 다시 한 번 감사드립니다.
Frodik

1
문제 없어요! 해킹 재미 :-)
Mohamed Mansour

나던 작품은 지금 jsfiddle.net/l2aelba/RhHgR :(, 내가 경고처럼 해킹 할 수 ()이 윈도우에 다시 초점을 맞 춥니 다
l2aelba

2
지금 어떻게 작동하는지 아는 사람 있나요? 코드가 더 이상 TAB에 초점을 맞추지 않습니다. thta는 최신 Chrome에서 알림을 클릭해도 원래 탭에 초점을 맞추지 않음을 의미합니다. Gmail에서 여전히 wokrk합니까?
hko

6
이것은 이제 더 이상 사용되지 않습니다 . 크로스 브라우저 솔루션은 아래 Oswaldo의 답변을 참조하십시오.
nickf 2015 년

48

알림 사용 .

if (typeof Notification !== 'undefined') {
  alert('Please us a modern version of Chrome, Firefox, Opera or Safari.');
  return;
}

Notification.requestPermission(function (permission) {
  if (permission !== 'granted') return;

  var notification = new Notification('Here is the title', {
    icon: 'http://path.to/my/icon.png',
    body: 'Some body text',
  });

  notification.onclick = function () {
    window.focus();
  };
});

window.focus();트릭을 수행합니다! 정답으로 표시되어야합니다.
Maxime Lafarie

3
window.focus()크롬 60에하지 작업과 jazzcat 솔루션 parent.focus()작품
pikax

이것은 작동하지만 "바로 가기 만들기"옵션을 사용하고 독립 실행 형 앱으로 전환하자마자 리디렉션이 작동하지 않고 새 탭이 열립니다.
Waza_Be

26

window.focus()최신 Webkit 브라우저 버전 (Chrome, Safari 등)에서는 항상 작동하지 않습니다. 하지만 parent.focus()그렇습니다.

완전한 jsfiddle은 다음과 같습니다 : https://jsfiddle.net/wv0w7uj7/3/

암호:

function notifyMe() {
  if (Notification.permission !== "granted")
    Notification.requestPermission();
  else {
    var notification = new Notification('Notification title', {
      icon: 'http://cdn.sstatic.net/stackexchange/img/logos/so/so-icon.png',
      body: "You've been notified!",
    });

    notification.onclick = function () {
      parent.focus();
      window.focus(); //just in case, older browsers
      this.close();
    };
  }
}

1
anothe 컨텍스트를 참조하는 'this'가있는 것이 정상이므로 call 대신 'onclick'이벤트 this.close를 호출 evt.target.close하는 것이 좋습니다 . notification.onclick = function (evt) { evt.target.close(); }
Alejandro Silva

parent.focus (); 나를 위해 작동합니다! 크롬 68.0.3440.106 작업
Johan Morales

2

onclick속성을 사용 addEventListener하거나 바닐라 자바 ​​스크립트에 사용하거나 onjQuery에 메서드 를 사용하는 것은 좋은 습관이 아닙니다 .

var notify = new Notification('Test notification');

바닐라:

notify.addEventListener('click', function(e) {
    window.focus();
    e.target.close();
}, false);

jQuery :

$(notify).on('click', function(e) {
    window.focus();
    e.target.close();
});

0

그것은해야 this.close()보다는 this.cancel()이 같은 :

var n = window.webkitNotifications.createNotification('ico.gif','Title', 'Text');
n.onclick = function(x) { window.focus(); this.cancel(); };
n.show();
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.