无法使用Google Chrome显示桌面通知 [英] Unable to show Desktop Notifications using Google Chrome
问题描述
我遵循使用通知API 中的说明。我还遇到过很多像下面这样的问题，因为我在< head> 内添加了 document.querySelector（）部分：
未捕获的TypeError：无法调用null的方法'addEventListener'
现在我有了以下源代码，我可以在其中检查通知支持和检查通知权限链接。
指导我如何以更简单的方式引入通知。此外，我试过这个：
$ $ p $ $ $ $ $＃html）。click（function（）{
if（ window.webkitNotifications.checkPermission（）== 0）{
createNotificationInstance（{notificationType：'html'}）;
} else {
window.webkitNotifications.requestPermission（）;
}
}）;
现在我坚持使用这个源代码。我需要生成HTML&简单的通知。我错过了什么吗？请指导我。
来源：
<！DOCTYPE HTML> ;
< html lang =en-US>
< head>
< meta charset =UTF-8>
< title>桌面通知< / title>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js>< / script>
< script type =text / javascript>
函数checkNotifications（）{
if（window.webkitNotifications）
alert（Notifications are supported！）;
else
alert（此浏览器/操作系统版本不支持通知。）;
}
函数createNotificationInstance（options）{
if（window.webkitNotifications.checkPermission（）== 0）{// 0是PERMISSION_ALLOWED
if（options.notificationType =='简单'）{
return window.webkitNotifications.createNotification（'icon.png'，'通知标题'，'通知内容...'）;
} else if（options.notificationType =='html'）{
return window.webkitNotifications.createHTMLNotification（'http：// localhost /'）;
}
} else {
window.webkitNotifications.requestPermission（）;
}
}
< / script>
< style type =text / css>
* {font-family：Verdana，sans-serif;}
body {font-size：10pt;保证金：0; padding：0;}
p {margin：5px;}
a {color：＃09f; text-decoration：none;}
a：hover {color：＃f00;}
< / style>
< / head>
< body>
< p>< strong>桌面通知< / strong>< / p>
< p>让我们看看通知在浏览器中的工作方式。< / p>
< p>
< a href =＃onclick =checkNotifications（）; return false;>检查通知支持< / a> ;.
Next< a href =＃onclick =alert（'Notifications are'+（（window.webkitNotifications.checkPermission（）== 0）？''：'not'）+'allowed！'） ; return false;>检查通知权限< / a>
，如果权限不存在，
< a href =＃onclick =window.webkitNotifications.requestPermission（）; return false;>请求权限< / a> ;.
创建
< a href =＃id =text>简单通知< / a>
或
< a href =＃id =html> HTML通知< / a> ;.
< / p>
< / body>
< script type =text / javascript>
document.querySelector（＃html）。addEventListener（'click'，function（）{$ b $ if（window.webkitNotifications.checkPermission（）== 0）{
createNotificationInstance（{notificationType ：'html'}）;
} else {
window.webkitNotifications.requestPermission（）;
}
}，false）;
document.querySelector（＃text）。addEventListener（'click'，function（）{$ b $ if（window.webkitNotifications.checkPermission（）== 0）{
createNotificationInstance（{notificationType ：'simple'}）;
} else {
window.webkitNotifications.requestPermission（）;
}
}，false）;
< / script>
< / html>
创建通知后，您需要调用 createNotificationInstance（{notificationType
createNotificationInstance ：'simple'}）;
您需要这样做：
var n = createNotificationInstance（{notificationType：'simple'}）;
n.show（）;
另一件事是：在执行jQuery代码时，将其包装在
$ $
$ $ $ $ b $ $ $ $ $ $ $ $ $ / ...
}）;
当在头部使用jQuery对DOM执行操作时，DOM尚未生成。 $（document）.ready 等到DOM生成并且可以保存访问并操作它。
是一个工作示例： http://jsfiddle.net/fkMA4/
BTW：我认为HTML通知已被弃用，请参阅： http://www.html5rocks.com/en/tutorials/notifications/quick/?redirect_from_locale=de
HTML内容的通知已被弃用。样本和文本
已经做相应的修改。
I followed the instructions as given in Using The Notifications API. Also I faced many problems like the below, because I added the document.querySelector() inside the <head> part:
Uncaught TypeError: Cannot call method 'addEventListener' of null
Now I have the below source, where I am able to Check Notification Support, and Check Notification Permissions links.
Guide me how to bring in notifications in a simpler way. Also, I tried this:
$("#html").click(function() {
if (window.webkitNotifications.checkPermission() == 0) {
createNotificationInstance({ notificationType: 'html' });
} else {
window.webkitNotifications.requestPermission();
}
});
Now I am stuck with this source. I need to generate HTML & Simple Notifications. Am I missing something? Please guide me.
Source:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Desktop Notifications</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
function checkNotifications() {
if (window.webkitNotifications)
alert("Notifications are supported!");
else
alert("Notifications are not supported for this Browser/OS version yet.");
}
function createNotificationInstance(options) {
if (window.webkitNotifications.checkPermission() == 0) { // 0 is PERMISSION_ALLOWED
if (options.notificationType == 'simple') {
return window.webkitNotifications.createNotification('icon.png', 'Notification Title', 'Notification content...');
} else if (options.notificationType == 'html') {
return window.webkitNotifications.createHTMLNotification('http://localhost/');
}
} else {
window.webkitNotifications.requestPermission();
}
}
</script>
<style type="text/css">
* {font-family: Verdana, sans-serif;}
body {font-size: 10pt; margin: 0; padding: 0;}
p {margin: 5px;}
a {color: #09f; text-decoration: none;}
a:hover {color: #f00;}
</style>
</head>
<body>
<p><strong>Desktop Notifications</strong></p>
<p>Lets see how the notifications work in this browser.</p>
<p>
<a href="#" onclick="checkNotifications(); return false;">Check Notification Support</a>.
Next <a href="#" onclick="alert('Notifications are ' + ((window.webkitNotifications.checkPermission() == 0) ? '' : 'not ') + 'allowed!'); return false;">Check Notification Permissions</a>
and if permissions are not there,
<a href="#" onclick="window.webkitNotifications.requestPermission(); return false;">Request Permissions</a>.
Create a
<a href="#" id="text">Simple Notification</a>
or
<a href="#" id="html">HTML Notification</a>.
</p>
</body>
<script type="text/javascript">
document.querySelector("#html").addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) {
createNotificationInstance({ notificationType: 'html' });
} else {
window.webkitNotifications.requestPermission();
}
}, false);
document.querySelector("#text").addEventListener('click', function() {
if (window.webkitNotifications.checkPermission() == 0) {
createNotificationInstance({ notificationType: 'simple' });
} else {
window.webkitNotifications.requestPermission();
}
}, false);
</script>
</html>
After creating the notification, you need to call show() on it, so instead of just:
createNotificationInstance({ notificationType: 'simple' });
you need to do:
var n = createNotificationInstance({ notificationType: 'simple' });
n.show();
The other thing is: when doing jQuery code, wrap it inside
$(document).ready(function() {
// ...
// your jQuery code
// ...
});
When doing actions on the DOM with jQuery inside the head, the DOM isn't build yet. $(document).ready waits until the DOM is build and you can savely access and manipulate it.
Here is a working example: http://jsfiddle.net/fkMA4/
BTW: I think HTML notifications are deprecated, see here: http://www.html5rocks.com/en/tutorials/notifications/quick/?redirect_from_locale=de
Notifications with HTML content have been deprecated. Samples and text have been modified accordingly.
这篇关于无法使用Google Chrome显示桌面通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
