当前位置:首页 > 网页特效 > 网站常用 >

HTML5实现的Notifications桌面消息提醒功能

时间:2014-04-01 08:37 来源:互联网 作者:源码搜藏 收藏 推荐

运行代码 保存代码 复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。
  • 是否支持桌面提醒,请求权限,请求权限状态,显示文本消息,显示HTML消息等,若弹出是否允许***在桌面背景出消息的提示,请选择允许,否则你看不到本款代码的效果。测试的浏览器需要支持Notifications,当然中会有判断。运行网页后会在右下角显示一个小图标,本例重点演示如何使用HTML5 Notifications。
  • <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 - Notifications弹出消息</title>
    <script>
    //判断浏览器是否支持Notifications
    function supported(){
    if(window.webkitNotifications){
    alert('浏览器支持Notifications');
    } else {
    alert('浏览器不支持Notifications');
    }
    }
    //请求桌面通知权限
    function requestPermission() {
    window.webkitNotifications.requestPermission();
    }
    //获取请求权限状态
    function checkPermission() {
    switch (window.webkitNotifications.checkPermission()) {
    case 0:alert('用户已允许显示桌面通知');break;
    case 1:alert('用户还没有允许或拒绝显示桌面通知');break;
    case 2:alert('用户已拒绝显示桌面通知');break;
    }
    }
    //创建文本消息
    function textMsg(){
    var icon = 'logo.png';
    var title = '阿鹏\'s BLOG';
    var body =  'http://www.codesocang.com';
    var popup = window.webkitNotifications.createNotification(icon, title, body);
    popup.ondisplay = function(event) {
    setTimeout(function() {
    event.currentTarget.cancel();
    }, 5000);
    }
    popup.show();
    }
    //创建HTML消息
    function htmlMsg(){
    var popup = window.webkitNotifications.createHTMLNotification('msg.html');
    popup.ondisplay = function(event) {
    setTimeout(function() {
    event.currentTarget.cancel();
    }, 5000);
    }
    popup.show();
    }
    </script>
    </head>
    <body>
    <input type="button" value="是否支持桌面提醒" onclick="supported();"/>
    <input type="button" value="请求权限" onclick="requestPermission();"/>
    <input type="button" value="请求权限状态" onclick="checkPermission();"/>
    <input type="button" value="显示文本消息" onclick="textMsg();"/>
    <input type="button" value="显示HTML消息" onclick="htmlMsg();"/>
    </body>
    </html>
由源码搜藏网整理,转载请注明出处https://www.codesocang.com/tx-wangzhan/7039.html

网站常用下载排行

最新文章