博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML 5的消息通知机制
阅读量:6225 次
发布时间:2019-06-21

本文共 2227 字,大约阅读时间需要 7 分钟。

译文来源:

原文:

译文: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,有几个步骤:首先,要从用户那里获取显示通知的许可,只有当用户允许时,才能显示通知给用户。所以先要征求用户的许可而不是直接显示通知。然后,

获取用户许可之后,我们可以显示两种类型的信息:

  1. Normal/Default Notification
  2. HTML Notification

最后执行通知代码。

我已经创建了一个显示通知的JavaScript函数,注意:函数仅限用于这篇文章,因为有很多种方式可以按照每个人的需求去扩展。

HTML:

Show Normal Notification

Show HTML Notification

JavaScript

// Function to show Notificationfunction createNotification(type){   if(type ==  '')     type = 'normal';                         if(type != 'html')   {    var title ="You have received HTML 5 Notification";    var msg="Content Goes Here......";    var notification = window.Notifications.createNotification("1.png", title, msg);   }   else   {     var notification = window.Notifications.createHTMLNotification('content.html');   }   notification.show();}// Binding the Click event on buttons.$(document).ready(function (){          if (window.webkitNotifications)  {   window.Notifications = window.webkitNotifications;   $('#show_notification').click(function ()   {     if (window.Notifications.checkPermission() == 0)     {       createNotification('normal');     }     else     {       window.Notifications.requestPermission();     }   });                                 $('#show_html_notification').click(function ()   {    if (window.Notifications.checkPermission() == 0)    {       createNotification('html');    }    else    {       window.Notifications.requestPermission();    }   });  }      else  {   alert('HTML 5 Notifications are not supported on this browser/OS.');  }});
     Demo
 
           查看Demo: (ps:用Web Kit浏览器打开,此文写于2012.04)
 
     总结
             HTML 5 notification适用于像Google Chrome一样的Web Kit浏览器,对于HTML 5 notification,Mozilla Firefox有其自己的私有属性。我将在其它文章中介绍。

 

     下一篇:

转载于:https://www.cnblogs.com/ido321/p/4070444.html

你可能感兴趣的文章
jdk分析工具:jps和jstack
查看>>
sql性能优化总结
查看>>
windows 7 使用注册表创建影子账户和隐藏账户
查看>>
一个有用的python装饰器 -- 为执行程序加锁
查看>>
linux shell
查看>>
xfs文件系统优化
查看>>
eclipse.ini参数的含义和设置
查看>>
VirtualBox中常用的网络设置
查看>>
用 GetEnvironmentVariable 获取常用系统环境变量
查看>>
手把手安装ZABBIX2.2(CentOS6.5+Zabbix2.2.2)
查看>>
推送通知(本地推送+远程推送)详解
查看>>
ifconfig
查看>>
电子商务风险防控
查看>>
Android列表展示和手指滑动分页
查看>>
我的友情链接
查看>>
final 关键字修饰类、属性、方法的使用
查看>>
字符数组"student a am i"--》"i am a student"
查看>>
更改zabbix数据库mandatory
查看>>
使用Cocos Studio UI编辑器并在cocos2dx中加载
查看>>
对MYSQL进行压力测试
查看>>