js桌面消息提示和title提醒

最新推荐文章于 2024-02-19 21:45:59 发布

vcxiaohan2

最新推荐文章于 2024-02-19 21:45:59 发布

阅读量7.7k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u011500781/article/details/51306690

版权

jQuery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

请在这里查看示例 ☞ notice示例

1 有时候大家如果遇到网上教程不行的情况，多半是因为自己的chrome版本太高了，这里我推荐的两个教程，都写了新版本浏览器如何调用的代码

http://www.jb51.net/html5/186999.html

http://tanning555.blog.163.com/blog/static/529751712014102955831587/ (含老版本chrome方法不同)

2 目前ie和360兼容模式不兼容，chrome和ff完美兼容(不兼容的情况下，我们可以通过改变title来达到提醒的目的)

3 查找已经允许的站点

chrome：

ff：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tip</title>

    <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

    <style>
        * {margin: 0; padding: 0;}
        body, html {width: 100%; height: 100%;}
    </style>
</head>
<body>
    <button id="tip1" class="tip1">显示通知</button>
    <script>
        ;$(function() {
            var timer = null,
                title = $('title').text();

            $('#tip1').on('click', function() {
                showMsgNotification('title', 'msg');
                return false;
            });

            $('body').on('click', function() {
                clearInterval(timer);
                $('title').text(title);
            });

            function showMsgNotification(title, msg) {
                var Notification = window.Notification || window.mozNotification || window.webkitNotification;

                if(Notification) {//支持桌面通知
                    if(Notification.permission == "granted") {//已经允许通知
                        var instance = new Notification(title, {
                            body: msg,
                            icon: "images/reload.png",
                        });

                        instance.onclick = function() {
                            $('body').css({'background': 'red'});
                            console.log('onclick');
                            instance.close();
                        };
                        instance.onerror = function() {
                            console.log('onerror');
                        };
                        instance.onshow = function() {
                            console.log('onshow');
                        };
                        instance.onclose = function() {
                            console.log('onclose');
                        };
                    }else {//第一次询问或已经禁止通知(如果用户之前已经禁止显示通知，那么浏览器不会再次询问用户的意见，Notification.requestPermission()方法无效)
                        Notification.requestPermission(function(status) {
                            if (status === "granted") {//用户允许
                                var instance = new Notification(title, {
                                    body: msg,
                                    icon: "images/reload.png"
                                });

                                instance.onclick = function() {
                                    // Something to do
                                };
                                instance.onerror = function() {
                                    // Something to do
                                };
                                instance.onshow = function() {
                                    // Something to do
                                };
                                instance.onclose = function() {
                                    // Something to do
                                };
                            }else {//用户禁止
                                return false
                            }
                        });
                    }
                }else {//不支持(IE等)
                    var index = 0;    

                    clearInterval(timer);
                    timer = setInterval(function() {
                        if(index%2) {
                            $('title').text('【　　　】'+ title);//这里是中文全角空格，其他不行
                        }else {
                            $('title').text('【新消息】'+ title);
                        }
                        index++;

                        if(index > 20) {
                            clearInterval(timer);
                        }
                    }, 500);
                }



                

            }

        });
        
    </script>
</body>
</html>

vcxiaohan2

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js桌面消息提示和title提醒

1 有时候大家如果遇到网上教程不行的情况，多半是因为自己的chrome版本太高了，这里我推荐的两个教程，都写了新版本浏览器如何调用的代码http://www.jb51.net/html5/186999.htmlhttp://tanning555.blog.163.com/blog/static/529751712014102955831587/ (含老版本chrome方法不同)
复制链接

扫一扫