我想实现与Gmail现在相同的功能。当新电子邮件到达或新聊天到来时,会显示通知弹出窗口,如果您单击该电子邮件,则会关注包含Gmail的标签。
我有这段代码:
var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { this.cancel(); };
n.show();
当我点击通知时,它会消失。现在我需要在onclick函数中添加一些代码来调出和聚焦创建此通知的页面。我知道这是可能的,因为GMail做得很好。但我没有成功查看Gmail来源(它们是最小化和混淆的)。
有人知道怎么做吗?
答案 0 :(得分:95)
您可以在Google Chrome中放置window.focus()。单击时它将聚焦到该窗口。
var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { window.focus(); this.close(); };
n.show();
我在Gmail中打开了检查员,添加了上面的代码,移到了另一个标签页然后运行它。该通知出现后,一旦点击,就会将我带回Gmail。
答案 1 :(得分:46)
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();
};
});
答案 2 :(得分:20)
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();
};
}
}
答案 3 :(得分:1)
使用onclick
属性并不是一个好习惯,对于jQuery使用addEventListener
for vanilla javascript或on
方法。
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();
});
答案 4 :(得分:0)
它应该是this.close()
而不是this.cancel()
,如下所示:
var n = window.webkitNotifications.createNotification('ico.gif','Title', 'Text');
n.onclick = function(x) { window.focus(); this.cancel(); };
n.show();