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:
Show Normal Notification
Show HTML Notification
JavaScript:
// Function to show Notification
function 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.');
}
}); 总结
HTML 5 notification适用于像Google Chrome一样的Web Kit浏览器,对于HTML 5 notification,Mozilla Firefox有其自己的私有属性。我将在其它文章中介绍。
中国最实用的办公自动化系统,全面提升单位的工作效率和质量,整合企业资源,规范办公流程,加快信息流通,提高办公效率,降低办公成本,通过提高执行力来完善管理,从而提升企业竞争力 含公告通知、文件传送、电子通讯薄、日程安排、工作日记、工作计划、个人(公共)文件柜、网上申请和审批、电子邮件、手机短信、个人考勤、知识管理、人事管理、车辆管理、会议管理、印信管理、网上填报、规章制度、论坛、网络会议、语音聊天、
以上就是HTML 5的消息通知机制的内容,更多相关内容请关注PHP中文网(www.php.cn)!
相关文章:










