UW3C首页 > JS > iNotify.js点击消息框当前页面跳转

iNotify.js点击消息框当前页面跳转

阅读：6706 次编辑日期：2017-3-20

如何能调用浏览器的弹窗消息提醒？如何点击消息框进入对应页面？这就要用到浏览器消息通知库iNotify.js，今天我们来说说~

iNotify.js：

JS 实现浏览器的 title 闪烁、滚动、声音提示、chrome、Firefox、Safari等系统通知。

下载：

    $ npm install title-notify --save-dev
    $ bower install inotify --save-dev

当然，如果想省事儿，可以点此下载。

如何使用：

   var iN = new iNotify({
        effect: 'flash',
        interval: 500,
        message:"有消息拉！",
        audio:{
            file: ['msg.mp4','msg.mp3','msg.wav']
        },
        notification:{
            title:"标题内容！",
            body:'欢迎来到UW3C技术分享~'
        }
    });
    function inotifyTest(){
        iN.setFavicon(10).setTitle('新标题').notify({
            title:"新通知",
            body:"欢迎来到UW3C技术分享~"
        })
}

注意，如果想要在inotifyTest中修改哪些参数，在实例化方法的时候必须也要实例化。例如，修改body，在new iNotify中就要事先声明。

如何点击消息新面打开：

跳转分两种，一种是在新页面打开，需要使用openurl参数。相当于a标签的target="_blank"

   var iN = new iNotify({
        effect: 'flash',
        interval: 500,
        message:"有消息拉！",
        openurl:"http://www.uw3c.com", // 点击弹窗打开连接地址
        notification:{
            title:"标题内容！",
            body:'欢迎来到UW3C技术分享~'
        }
    });
    function inotifyTest(){
        iN.setFavicon(10).setTitle('新标题').notify({
            title:"新通知",
            body:"欢迎来到UW3C技术分享~",
            openurl:"http://www.uw3c.com" // 点击弹窗打开连接地址
        })
}

如何点击消息框在当前页面跳转页面：

在当前页面跳转就需要用到另一个参数onclick，相当于a标签不加target="_blank"

   var iN = new iNotify({
        effect: 'flash',
        interval: 500,
        message:"有消息拉！",
        onclick:function(){ //点击事件
            console.log("欢迎")
        },
        notification:{
            title:"标题内容！",
            body:'欢迎来到UW3C技术分享~'
        }
    });
    function inotifyTest(){
        iN.setFavicon(10).setTitle('新标题').notify({
            title:"新通知",
            body:"欢迎来到UW3C技术分享~",
            onclick:function(){ //点击事件
                window.location.href = "http://www.uw3c.com";
            }
        })
}