HTML5新特性[ Notifications ] 桌面消息
HTML5新特性[ Notifications ] 桌面消息
庞小明
发布于 2019-05-25 18:00:01
发布于 2019-05-25 18:00:01
在执行完以上代码后，我们就成功地创建了一个消息框实例，在Chrome下面它最终会显示成这样：
到这里我们已经成功了一半，但能不能正确地显示出这个消息框，最终还取决于用户的授权。鉴于浏览器的安全机制，只有用户同意网页弹出消息通知框，消息通知才能够真正的显示出来。所以现在我们要做的就是申请用户授权。
Notification类提供了一个requestPermission方法，用来请求用户授权，代码如下：
Notification.requestPermission(function (permission) {
console.log(permission);
popNotice();
});温馨提示：用户一旦没有授权，拒绝，以上方法将不再执行！
示例demo
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>桌面消息</title>
</head>
<body>
<!--JS代码：-->
<script type="text/javascript">
// 判断是否支持Notification
if (window.Notification) {
//Notification 方法
var popNotice = function () {
var notification = new Notification("Hi，帅哥：", {
body: '可以加你为好友吗？', //显示消息的内容
icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg' //显示消息的缩略图
});
//消息框被点击时被调用
//可以打开相关的视图，同时关闭该消息框等操作
notification.onclick = function () {
notification.close();
};
//5秒后关闭消息框
notification.onshow = function () {
setTimeout(function () {
notification.close();
}, 5000);
};
};
if (Notification.permission == "granted") { //授权
popNotice();
} else if (Notification.permission != "denied") { //没有授权时询问
Notification.requestPermission(function (permission) {
console.log(permission);
popNotice();
});
}
} else {
alert('浏览器不支持Notification');
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-01-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录