HTML5實現的Notifications桌面消息提醒功能

2024-09-05 12:19:10

字體：大中小

來源：轉載

供稿：網友

是否支持桌面提醒，請求權限，請求權限狀態，顯示文本消息，顯示HTML消息等，若彈出是否允許***在桌面背景出消息的提示，請選擇允許，否則你看不到本款代碼的效果。測試的瀏覽器需要支持Notifications，當然中會有判斷。運行網頁后會在右下角顯示一個小圖標，本例重點演示如何使用HTML5 Notifications。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>HTML5 - Notifications彈出消息</title><script>//判斷瀏覽器是否支持Notificationsfunction 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>

上一篇：HTML5實現端訪問時禁止放大和縮小網頁

下一篇：CSS3動畫：利用 transition實現slideDown效果