HTML5教程

当前位置: HTML5技术网 > HTML5教程 > HTML 5的消息通知机制

HTML 5的消息通知机制

译文来源:http://www.ido321.com/1130.html

原文:HTML 5 Notification

译文:HTML 5 的消息通知机制

译者:dwqs

     HTML 5 已经被应用到Web开发中。跟平常一样,任何一个软件新版本的发布都期待一些新的特性,这对HTML 5也不例外。为了仅仅通过HTML提高用户交互,HTML 5已经提供了很多新的API。

     是不是非常有趣呢?并且HTML 5已经和CSS 3结合的非常棒了。

     因此,我也开始写一系列与HTML 5的API相关的文章来介绍API的使用和功能,例如Geolocation, Notification, File, 等等,第一篇文章是和Notification API相关。

     首先要意识到是,HTML 5的特性和API仅能在支持HTML 5的浏览器中正常使用,如果浏览器不支持HTML 5,就不能使用HTML 5在网页中实现任何一个功能了。现在就来了解一下notification API吧。

     什么是HTML 消息通知?

     HTML消息通知是指我们可以告诉用户一个确定的事件行为,即使此时用户在浏览器的另一个选项卡。这个通知对于New Mail, New Tweet等事件是非常有用的。

     怎么使用?

   要使用Notification API,有几个步骤:首先,要从用户那里获取显示通知的许可,只有当用户允许时,才能显示通知给用户。所以先要征求用户的许可而不是直接显示通知。然后,
获取用户许可之后,我们可以显示两种类型的信息:
Normal/Default Notification
HTML Notification
最后执行通知代码。
我已经创建了一个显示通知的JavaScript函数,注意:函数仅限用于这篇文章,因为有很多种方式可以按照每个人的需求去扩展。
HTML:
  1. <h2>Show Normal Notification</h2>
  2. <button class="btn btn-success" id="show_notification">
  3. Normal Notification
  4. </button>

  5. <h2>Show HTML Notification</h2>
  6. <button class="btn btn-success" id="show_html_notification">
  7. HTML Notification
  8. </button>
复制代码JavaScript
  1. // Function to show Notification
  2. function createNotification(type)
  3. {
  4.    if(type ==  '')
  5.      type = 'normal';
  6.                      
  7.    if(type != 'html')
  8.    {
  9.     var title ="You have received HTML 5 Notification";
  10.     var msg="Content Goes Here......";
  11.     var notification = window.Notifications.createNotification("1.png", title, msg);
  12.    }
  13.    else
  14.    {
  15.      var notification = window.Notifications.createHTMLNotification('content.html');
  16.    }
  17.    notification.show();
  18. }

  19. // Binding the Click event on buttons.

  20. $(document).ready(function ()
  21. {        
  22.   if (window.webkitNotifications)
  23.   {
  24.    window.Notifications = window.webkitNotifications;
  25.    $('#show_notification').click(function ()
  26.    {
  27.      if (window.Notifications.checkPermission() == 0)
  28.      {
  29.        createNotification('normal');
  30.      }
  31.      else
  32.      {
  33.        window.Notifications.requestPermission();
  34.      }
  35.    });
  36.                               
  37.    $('#show_html_notification').click(function ()
  38.    {
  39.     if (window.Notifications.checkPermission() == 0)
  40.     {
  41.        createNotification('html');
  42.     }
  43.     else
  44.     {
  45.        window.Notifications.requestPermission();
  46.     }
  47.    });
  48.   }   
  49.   else
  50.   {
  51.    alert('HTML 5 Notifications are not supported on this browser/OS.');
  52.   }
  53. });
复制代码

     Demo

     查看Demo: live demo (ps:用Web Kit浏览器打开,此文写于2012.04)

     总结
     HTML 5 notification适用于像Google Chrome一样的Web Kit浏览器,对于HTML 5 notification,Mozilla Firefox有其自己的私有属性。我将在其它文章中介绍。

【HTML 5的消息通知机制】相关文章

1. HTML 5的消息通知机制

2. 使用 iosOverlay.js 创建 iOS 风格的提示和通知

3. Java更新高度关注JavaScript与内存使用机制

4. 消息称Silverlight将停止开发 微软未置可否

5. 使用CSS3的褪色和动画效果构建消息提醒框

6. 利用 CSS3 的褪色和动画效果制作消息提醒框

7. jQuery消息提示框插件Tipso

8. 消息称iPad 3或采用双LED背光照明

9. 好消息:Github编辑器Atom已开源

10. HTML5教程:HTML5的基础写法

本文来源:https://www.51html5.com/a719.html

点击展开全部

﹝HTML 5的消息通知机制﹞相关内容

「HTML 5的消息通知机制」相关专题

其它栏目

也许您还喜欢