HTML5中的Web Notification桌面右下角通知功能的实现


Posted in HTML / CSS onApril 19, 2018

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桌面右下角通知功能的实现

总结

以上所述是小编给大家介绍的HTML5中的Web Notification桌面右下角通知功能的实现,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
让IE支持CSS3的不完全兼容方案
Sep 19 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
Mar 26 HTML / CSS
HTML5应用之文件上传
Dec 30 HTML / CSS
HTML5实现QQ聊天气泡效果
Jun 26 HTML / CSS
HTML5 使用 sessionStorage 进行页面传值的方法
Jul 02 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
HTML5 manifest离线缓存的示例代码
Aug 08 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
canvas画图被放大且模糊的解决方法
Aug 11 HTML / CSS
如何通过 CSS 写出火焰效果
Mar 24 HTML / CSS
CSS3实现模糊背景的三种效果示例
Mar 30 HTML / CSS
详解CSS伪元素的妙用单标签之美
May 25 HTML / CSS
HTML5实现移动端复制功能
Apr 19 #HTML / CSS
canvas实现漂亮的下雨效果的示例
Apr 18 #HTML / CSS
详解Html5 监听拦截Android返回键方法
Apr 18 #HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 #HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 #HTML / CSS
canvas线条的属性详解
Mar 27 #HTML / CSS
详解canvas绘图时遇到的跨域问题
Mar 22 #HTML / CSS
You might like
php解决约瑟夫环示例
2014/04/09 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
PHP函数rtrim()使用中的怪异现象分析
2017/02/24 PHP
PHP多进程编程之僵尸进程问题的理解
2017/10/15 PHP
前端开发必须知道的JS之原型和继承
2010/07/06 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
Javascript的闭包详解
2014/12/26 Javascript
jquery实现图片左右切换的方法
2015/05/07 Javascript
jQuery中的ready函数与window.onload谁先执行
2016/06/21 Javascript
jQuery无缝轮播图代码
2016/12/22 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
微信小程序实现九宫格抽奖
2020/04/15 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
2019/09/05 Javascript
js实现简单的打印表格
2020/01/15 Javascript
JS如何实现手机端输入验证码效果
2020/05/13 Javascript
JavaScript实现下拉列表
2021/01/20 Javascript
Python中的左斜杠、右斜杠(正斜杠和反斜杠)
2016/08/30 Python
Python如何通过subprocess调用adb命令详解
2017/08/27 Python
Python 忽略warning的输出方法
2018/10/18 Python
python操作toml文件的示例代码
2020/11/27 Python
python uuid生成唯一id或str的最简单案例
2021/01/13 Python
全球度假村:Club Med
2017/11/27 全球购物
Bogner美国官网:滑雪服中的”Dior”
2018/01/30 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
StubHub中国:购买和出售全球活动门票
2020/01/01 全球购物
C语言笔试集
2012/07/24 面试题
销售员岗位职责范本
2014/02/03 职场文书
企业文化建设实施方案
2014/03/22 职场文书
学生会宣传部部长竞选演讲稿
2014/04/25 职场文书
python 自动化偷懒的四个实用操作
2021/04/11 Python
MySQL系列之八 MySQL服务器变量
2021/07/02 MySQL
Nginx实现负载均衡的项目实践
2022/03/18 Servers
方法汇总:Python 安装第三方库常用
2022/04/26 Python