H5实现桌面通知以及提示功能的实例


本文摘自PHP中文网,作者黄舟,侵删。

这篇文章主要介绍了HTML5实现桌面通知 提示功能,非常不错,具有参考借鉴价值,需要的朋友参考下吧

具体代码如下所示:


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<button id="button">有人想加你为好友</button>

<p id="text"></p>

;(function (){

    if(window.Notification){

        var btn = document.getElementById("button");

        var txt = document.getElementById("text");

        btn.onclick = function (){

            if(Notification.permission == "granted"){

                popNotice();

            }else if(Notification.permission != "denied"){

                Notification.requestPermission().then(function (permission){

                    popNotice()

                })

            }

        };

        function popNotice(){

            if(Notification.permission == "granted"){

                var notification = new Notification("你好:",{

                    body:"请问今晚有空吗",

                    icon:"http://image.zhangxinxu.com/左边头像地址"

                });

                notification.onclick = function (){

                    txt.innerHTML = new Date().toTimeString().split(" ")[0]+"收到信息";

                    notification.close();

                }

            }

        }

    }else{

        console.log("浏览器不支持Notification");

    }

})();

Notification.requestPermission()是个请求 ,让浏览器出现是否允许通知的提示 和 Notification.permission 一样 返回 "3"个值 "granted" "default" "denied" 户允许通知, 用户目前还没有管, 用户嫌弃

总结

以上就是H5实现桌面通知以及提示功能的实例的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5本地数据库实例详解

HTML5 data-* 自定义属性实例分享

秀野堂HTML5入门视频教程的资源推荐

HTML5 video 上传预览图片视频,设置、预览视频某秒的海报帧

HTML5原生拖拽操作实例讲解

h5实现可缩放的时钟动画

HTML5 video/audio播放本地文件

分享HTML5虚拟键盘出现挡住输入框的解决办法

常用的HTML5列表标签

12个冷门的h5设计小技巧

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...