HTML5中的Web Notification桌面右下角通知功能的实现
程序员文章站
2022-06-14 17:27:06
这篇文章主要介绍了HTML5中的Web Notification桌面右下角通知功能的实现代码,非常不错,具有参考借鉴价值,需要的朋友参考下吧... 18-04-19...
html5桌面通知(web notifications)对于需要实现在新消息入线时,有桌面通知效果的情况下非常有用,在此简单介绍一下这个html5的新属性。通过web notifications(桌面通知系统),网站可以在用户桌面弹出一条通知,无论用户是否浏览当前网页,甚至最小化了浏览器,通知均可到达用户桌面。
<!doctype html> <html> <head lang="en"> <meta charset="utf-8"> <title></title> </head> <body> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <a onclick="shownotification();">点我看右下角信息</a> <script> function shownotification() { window.notification.permission = "granted"; alert(window.notification.permission); if(window.notification) { if(window.notification.permission == "granted") { var notification = new notification('你有一条新信息', { body: "你好我是王小婷", icon: "img/1.jpg" }); settimeout(function() { notification.close(); }, 5000); } else { window.notification.requestpermission(); } } else alert('你的浏览器不支持此消息提示功能,请使用chrome内核的浏览器!'); }; </script> </body> </html>
实现效果:
总结
以上所述是小编给大家介绍的html5中的web notification桌面右下角通知功能的实现,希望对大家有所帮助
上一篇: 转:我只是下了个订单,鬼知道我在微服务里经历了什么?
下一篇: 榴莲是性热的食物吗,榴莲的功效和作用
推荐阅读
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
-
HTML5中的Web Notification桌面通知功能的实现方法
-
HTML5中的Web Notification桌面右下角通知功能的实现
-
HTML5桌面通知提示功能的实现
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能以及如何处理多个通知
-
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
-
HTML5桌面通知提示功能的实现
-
HTML5中的Web Notification桌面通知功能的实现方法