`
z2009zxiaolong
  • 浏览: 76509 次
  • 性别: Icon_minigender_1
  • 来自: 湖南
社区版块
存档分类
最新评论

Html5新特性-Notifications入门

Html5新特性Desktop NotificationsNotifications的使用桌面通知的使用jQuery 
阅读更多

Chrome内置支持Notifications，Firefox需要安装插件（插件下载地址：http://code.google.com/p/ff-html5notifications/）。

注意，必须在服务器中运行才会有桌面通知效果！

一个Notifications使用的小例子，代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        $(window).load(function(){
            // 检查客户端（一般是浏览器）对Notifications的支持
            //Chrome内置支持，Firefox需要安装插件
            if (window.webkitNotifications) {
                console.log("浏览器支持Notifications！");
                // alert("浏览器支持Notifications！");
            }
            else {
                console.log("浏览器不支持Notifications！");
                // alert("浏览器不支持Notifications！");
            }
        });

        $(document).ready(function(){
            function createNotification(options) {
                if (options.notificationType == 'simple') {
                    // 创建一个文本通知: 
                    return window.webkitNotifications.createNotification(
                        'images/rails.png', // 图标路径 - 可以是相对路径
                        '通知', // 通知的标题
                        '哈哈，你中彩咯！' // 通知的内容
                    );
                }
                else if (options.notificationType == 'html') {
                    // 或者创建一个HTML通知: 
                    return window.webkitNotifications.createHTMLNotification(
                        // HTML路径 - 可以是相对路径
                        'xxx.html'
                    );
                }
            }

            document.querySelector('#show_button').addEventListener('click', function() {
                if (window.webkitNotifications.checkPermission() == 0) {
                    // 0 表示允许Notifications
                    notification = createNotification({notificationType: 'simple'});
                    notification.ondisplay = function() { 
                        console.log("display");
                    };
                    notification.onclose = function() { 
                        console.log("close"); 
                    };
                    notification.show();
                    setTimeout('notification.cancel()', 4000)
                } else {
                    window.webkitNotifications.requestPermission();
                }
            }, false);
        });
    </script>

</head>

<body>
	<button id="show_button" type="button">点我看效果</button>
</body>

</html>

附上源代码。

  • Notifications.zip (43.1 KB)
  • 描述: Notifications使用实例源代码
  • 下载次数: 119
1
顶
2
踩
分享到：
| Ruby版快速判素数算法
评论
4 楼 z2009zxiaolong 2012-09-04  
iwangxiaodong 写道
昨天看到一个类似的文章,写得也不错: HTML5 桌面提醒功能

同样是代码，我最注重代码的风格，缩进是最基本的美观原则。那个确实实现了基本功能，很多细节不同，好不好还是由用户体验评定。
3 楼 z2009zxiaolong 2012-09-04  
jianglijia 写道
看不到效果呢怎么？

Chrome内置支持，Firefox需要安装插件，不支持IE，还有必须在服务器比如tomcat中运行。
2 楼 iwangxiaodong 2012-09-04  
昨天看到一个类似的文章,写得也不错: HTML5 桌面提醒功能
1 楼 jianglijia 2012-09-04  
看不到效果呢怎么？
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics