时间:2021-07-01 10:21:17 帮助过:30人阅读
Notifications是HTML5的一个新特性~ 可以看看360电脑抢票,也是用Notifications提示的~,下面小编写了一个HTML5 Notifications桌面提醒,还是挺不错的哦!<!DOCTYPE html>
<html> <head> <meta charset="utf-8"> <title>HTML5 - Notifications</title> <script> //判断浏览器是否支持Notifications function supported(){ if(window.webkitNotifications){ alert('浏览器支持Notifications'); } else { alert('浏览器不支持Notifications'); } } //请求桌面通知权限 function requestPermission() { window.webkitNotifications.requestPermission(); } //获取请求权限状态 function checkPermission() { switch (window.webkitNotifications.checkPermission()) { case 0:alert('用户已允许显示桌面通知');break; case 1:alert('用户还没有允许或拒绝显示桌面通知');break; case 2:alert('用户已拒绝显示桌面通知');break; } } //创建文本消息 function textMsg(){ var icon = 'logo.png'; var title = '阿鹏\'s BLOG'; var body = 'http://www.1990c.com'; var popup = window.webkitNotifications.createNotification(icon, title, body); popup.ondisplay = function(event) { setTimeout(function() { event.currentTarget.cancel(); }, 5000); } popup.show(); } //创建HTML消息 function htmlMsg(){ var popup = window.webkitNotifications.createHTMLNotification('msg.html'); popup.ondisplay = function(event) { setTimeout(function() { event.currentTarget.cancel(); }, 5000); } popup.show(); } </script> </head> <body> <input type="button" value="是否支持桌面提醒" onclick="supported();"/> <input type="button" value="请求权限" onclick="requestPermission();"/> <input type="button" value="请求权限状态" onclick="checkPermission();"/> <input type="button" value="显示文本消息" onclick="textMsg();"/> <input type="button" value="显示HTML消息" onclick="htmlMsg();"/> </body> </html>
以上就是什么是Notifications?HTML5 Notifications桌面提醒的详细内容,更多请关注Gxl网其它相关文章!