最近更新
阅读排行
关注本站

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

阅读:2608 次   编辑日期: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";
            }
        })
}
查看实例
将本篇文章分享到:
top