日期:2014-05-17  浏览次数:20707 次

HTML5桌面提醒的文章

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

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

复制内容到剪贴板
  1. <html>  
  2. <head>   
  3.   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">   
  4.   <script>   
  5.     function RequestPermission (callback) {  
  6.       window.webkitNotifications.requestPermission(callback);  
  7.     }  
  8.   
  9.     function showNotification(){  
  10.       if (window.webkitNotifications.checkPermission() > 0) {  
  11.         RequestPermission(showNotification);  
  12.       }  
  13.       else {  
  14.               window.webkitNotifications.createNotification("http://tp3.sinaimg.cn/1883935250/50/0/1", "这里写标题",   
  15.           "其实以后这个程序会被广泛使用于邮箱和网页游戏中。").show();   
  16.       }  
  17.     }  
  18.         </script  
  19. </head>   
  20. <body>   
  21.         <button onclick="showNotification()">Show Notification</button>   
  22. </body>