HTML5圆桌面提醒的文章 _HTML/CSS

HTML5桌面提醒的文章

在很多社交网站如facebook, 人人网上，都会有一种消息提醒的功能。当你在浏览网页时有人给你发了消息，在你页面的右下角会出现一个小的提示框。这是一个很实用的小功能，但在目前来说，它有一个局限性：提示框只能在浏览器的当前页面中显示。如果你此时在浏览其他页面，甚至是干其他事情，提示框就显示不出来了。当前，社交网站们都使用了提示声音来增强这种提示功能。但如果告诉你有一种办法能够实现在桌面上显示出一个弹出框呢？即使你浏览器处于最小化状态也能够显示出来，答案就是HTML5

下面是实现该功能的源代码，需要注意的是，你不能简单的拷贝它们到文件中直接运行，而是通过web服务器访问才可以出现效果。

复制内容到剪贴板

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
function RequestPermission (callback) {
window.webkitNotifications.requestPermission(callback);
}
function showNotification(){
if (window.webkitNotifications.checkPermission() > 0) {
RequestPermission(showNotification);
}
else {
window.webkitNotifications.createNotification("http://tp3.sinaimg.cn/1883935250/50/0/1", "这里写标题",
"其实以后这个程序会被广泛使用于邮箱和网页游戏中。").show();
}
}
</script
</head>
<body>
<button onclick="showNotification()">Show Notification</button>
</body>
</html>

在代码中，首先需要询问用户是否同意这个站点弹出窗口，也就是用户授权。代码中对应RequestPermission方法，它带有一个回调函数，如果用户同意弹出窗口的话代码会继续执行showNotification()。第15行的三个参数：第一个为显示的图片链接，第二个是标题，第三个是消息内容。代码非常简单

以上内容均是转载，但是我发这个仅仅是为了和大家讨论下Html5的内容和开发。这个程序在Gmail和126邮箱已经被使用起来了。我想随着时间的推移，这个小程序将会被广泛使用的！IE6无法看到效果。FF应该需要验证或者安全机制打开才能看见效果。目前直接能看见的只有谷歌浏览器和IE8以上版本。但是Gmail和126的是FF也可以看到效果的。具体怎么写就需要达人来指导下了！