用Jquery 写一个简单的消息提醒（带声音提示）

最新推荐文章于 2024-08-31 10:02:21 发布

原创最新推荐文章于 2024-08-31 10:02:21 发布 · 1.9w 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

JS 同时被 2 个专栏收录

13 篇文章

订阅专栏

HTML5

10 篇文章

订阅专栏

本文介绍了在Web聊天程序中如何利用Jquery的Notify插件创建即时消息提醒，并结合声音提示功能。作者分享了简单的代码实现，并提到了Bootstrap封装的版本，提供了更强大的功能选项。

上周在公司做的一个Web聊天程序，需要一个即时消息提醒并且带有声音提示的功能，在网上找了一下资料，Jquery有个一插件 Jquery.Notify 这个运用比较

广，官网有他的详细介绍（https://notifyjs.com/）我这边只是依据我的需求简单的运用了一下；对了！他还有相应的Bootstrap封装的版本，功能似乎更加强大

（http://bootstrap-notify.remabledesigns.com/），不多说了，先贴一下我的代码，有问题的地方还请提出：

$(function(){
	var receiveIcon；
	var receiveMessage；
	var audioElementHovertree;
	var showNotification =false;
//只在当前页面失去焦点时提示消息
    window.onblur = function () {
        showNotification = true;
    }
    window.onfocus = function () {
        showNotification = false;
    }});

//消息提醒
function check() {
    // Let's check if the browser supports notifications
    if (!("Notification" in window)) {
        //alert("This browser does not support desktop notification");
        return false;
    }
    if (Notification.permission !== "granted") {
        Notification.requestPermission(function (permission) {
            // Whatever the user answers, we make sure we store the information
            if (!('permission' in Notification)) {
                Notification.permission = permission;
            }
        });
        return false;
    }
    return showNotification;
}

function notifyMe() {
    if (check()) {
        var notification = new Notification('新的消息', {
            icon: receiveIcon,
            //body: "Hey there! You've been notified!",
            body:receiveMessage
        });

        notification.onshow = function () {
            $('audio').remove();
            audioElementHovertree = document.createElement('audio');
            audioElementHovertree.setAttribute('src', 'http://w.qq.com/audio/classic.mp3');
            audioElementHovertree.setAttribute('autoplay', 'autoplay'); //打开自动播放
            //audioElement.load();
        }


        notification.onclick = function () {
            window.focus();
        };

        setTimeout(notification.close.bind(notification), 5000);//auto clear notifications
    }
}