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 相关文章推荐
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
Sep 14 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
Canvas与Image互相转换示例代码
Aug 09 HTML / CSS
html5使用canvas实现跟随光标跳动的火焰效果
Jan 07 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5为输入框添加语音输入功能的实现方法
Feb 06 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
canvas绘制视频封面的方法
Feb 05 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
html实现弹窗的实例
Jun 09 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
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
php计算程序运行时间的简单例子分享
2014/05/10 PHP
PHP中16个高危函数整理
2019/09/19 PHP
TP5框架model常见操作示例小结【增删改查、聚合、时间戳、软删除等】
2020/04/05 PHP
js获取单元格自定义属性值的代码(IE/Firefox)
2010/04/05 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
2012/09/26 Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
2013/02/07 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
jQuery插件制作之全局函数用法实例
2015/06/01 Javascript
jQuery+css3实现Ajax点击后动态删除功能的方法
2015/08/10 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
jQuery实现圣诞节礼物传送(花式轮播)
2016/12/25 Javascript
angularjs2中父子组件的数据传递的实例代码
2017/07/05 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
python实现的简单FTP上传下载文件实例
2015/06/30 Python
Python 调用Java实例详解
2017/06/02 Python
教你用Python创建微信聊天机器人
2020/03/31 Python
Python创建字典的八种方式
2019/02/27 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
pytorch 中的重要模块化接口nn.Module的使用
2020/04/02 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
python爬虫用request库处理cookie的实例讲解
2021/02/20 Python
英国现代家具和照明购物网站:Heal’s
2019/10/30 全球购物
德国户外装备、登山运动和攀岩商店:tapir store
2020/02/12 全球购物
办公室驾驶员岗位职责
2013/11/15 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
财务总经理岗位职责
2014/02/16 职场文书
史上最牛辞职信
2015/05/13 职场文书
银行工作心得体会范文
2016/01/23 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby