Javascript 如何将焦点放在创建桌面通知的 Chrome 标签上？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4906976/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get focus to a Chrome tab which created desktop notification?
提问by Frodik
I would like to implement same functionality as Gmail has nowadays. When new email arrives or new chat comes, notification popup appears and if you click it, the tab with Gmail gets focussed.
我想实现与 Gmail 现在相同的功能。当新电子邮件到达或新聊天出现时，会出现通知弹出窗口，如果您单击它，Gmail 选项卡就会聚焦。
I have this code:
我有这个代码：
var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { this.cancel(); };
n.show();
When I click notification it makes it just disappear. Now I need to add some code to onclick function to bring up and focus page that created this notification. I know it is possible because GMail does it very well. But I didn't succeed in looking into Gmail sources (they are minimalized and obfuscated).
当我点击通知时，它就会消失。现在我需要向 onclick 函数添加一些代码以显示并聚焦创建此通知的页面。我知道这是可能的，因为 GMail 做得很好。但是我没有成功查看 Gmail 来源（它们被最小化和混淆）。
Anybody knows how to do this ?
有人知道怎么做吗？
回答by Mohamed Mansour
You can just place window.focus() in Google Chrome. It will focus to that window when clicked.
您可以将 window.focus() 放在 Google Chrome 中。单击时，它将聚焦到该窗口。
var n = window.webkitNotifications.createNotification('ico.gif', 'Title', 'Text');
n.onclick = function(x) { window.focus(); this.close(); };
n.show();
I opened the inspector in Gmail, added the above code, moved to a different tab, and ran it. The notification appeared and once clicked, it brought me back to Gmail.
我在 Gmail 中打开了检查器，添加了上面的代码，移到另一个选项卡，然后运行它。通知出现了，一旦点击，它就把我带回 Gmail。
回答by Oswaldo Alvarez
Using Notifications.
使用通知。
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();
};
});
回答by jazzcat
window.focus()does not always work in recent Webkit browser versions (Chrome, Safari etc). But parent.focus()does.
window.focus()在最近的 Webkit 浏览器版本（Chrome、Safari 等）中并不总是有效。但parent.focus()确实如此。
Here's a complete jsfiddle: https://jsfiddle.net/wv0w7uj7/3/
这是一个完整的 jsfiddle：https://jsfiddle.net/wv0w7uj7/3/
Code:
代码：
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();
};
}
}
回答by Tim
It's not really good practice to use the onclickproperty, use the addEventListenerfor vanilla javascript or onmethod for jQuery.
使用onclick属性、使用addEventListenerfor vanilla javascript 或on方法用于 jQuery并不是很好的做法。
var notify = new Notification('Test notification');
Vanilla:
香草：
notify.addEventListener('click', function(e) {
window.focus();
e.target.close();
}, false);
jQuery:
jQuery：
$(notify).on('click', function(e) {
window.focus();
e.target.close();
});
回答by Nadav B
It should be this.close()rather than this.cancel(), like this:
它应该是this.close()而不是this.cancel()，像这样：
var n = window.webkitNotifications.createNotification('ico.gif','Title', 'Text');
n.onclick = function(x) { window.focus(); this.cancel(); };
n.show();
