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 transform 属性来变换背景图的方法
May 07 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
css3实现3D色子翻转特效
Dec 23 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
用CSS3打造HTML5的Logo(实现代码)
Jun 16 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
详解移动端HTML5页面端去掉input输入框的白色背景和边框(兼容Android和ios)
Dec 15 HTML / CSS
关于h5中的fetch方法解读(小结)
Nov 15 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
HTML5录音实践总结(Preact)
May 07 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 HTML / CSS
CSS中float高度塌陷问题的四种解决方案
Apr 18 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生成静态HTML速度快类库
2007/03/18 PHP
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
laravel 实现向公共模板中传值 (view composer)
2019/10/22 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
在网页里看flash的trace数据的js类
2009/01/10 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
2010/01/15 Javascript
使用forever管理nodejs应用教程
2014/06/03 NodeJs
jquery中one()方法的用法实例
2015/01/16 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
php利用curl获取远程图片实现方法
2015/10/26 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
2016/02/25 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
使用JavaScript解决网页图片拉伸问题(推荐)
2016/11/25 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
2017/04/23 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
python并发2之使用asyncio处理并发
2017/12/21 Python
python模块smtplib学习
2018/05/22 Python
Python面向对象程序设计中类的定义、实例化、封装及私有变量/方法详解
2019/02/28 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
用python写爬虫简单吗
2020/07/28 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
澳大利亚宠物食品和用品商店:PETstock
2020/01/02 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
酒店门卫岗位职责
2013/12/29 职场文书
大学总结自我鉴定
2014/01/18 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
企业法人任命书
2015/09/21 职场文书
Python安装及建立虚拟环境的完整步骤
2022/06/25 Servers
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS