同性恋伴侣。 因此,今天我做了一个快速演示,向您展示了使用HTML5和一些JavaScript进行桌面通知的示例。
HTML5桌面警报的背景信息
通知允许在网页上下文之外警告用户发生的事件,例如电子邮件的传递。
您可以显示,排队和替换通知。 您还可以向邮件正文左侧显示的警报添加图标。 同样,您也可以将标记成员用于多个实例(这种情况的结果是一个通知;第二个替换具有相同标记的第一个)。 阅读有关W3C Web Notifications API的更多信息。
从我的测试来看,一次仅显示4条警报,它们被排队,因此当您关闭一个警报时,将显示下一个警报,依此类推。 另外,您不能在其中放置超链接(这将很高兴)。 这是桌面警报的外观。
出于安全原因,像大多数此类功能一样,系统也会提示您进行访问。
剧本
该脚本非常简单,仅使用webkitNotifications生成带有标题和消息的桌面警报。
/*
@Copyright: jQuery4u 2012
@Author: Sam Deering
@Script: html5desktopalert.js
*/
(function($,W,D,undefined)
{
W.JQUERY4U = W.JQUERY4U || {};
W.JQUERY4U.HTML5DESKTOPALERT = {
name: "jQuery HTML5 DESKTOP ALERT",
namespace: "W.JQUERY4U.HTML5DESKTOPALERT",
settings:
{
//turn into plugin? ...
},
cache:
{
//runtime data, dom elements etc...
},
init: function(settings)
{
this.settings = $.extend({}, this.settings, settings);
this.cache.notifications = window.webkitNotifications;
this.testBrowserSupport();
this.setupEventHandlers();
},
setupEventHandlers: function()
{
var _this = this;
$('#alert-me-btn').bind('click', function(e)
{
_this.checkPermission("desktopAlert");
});
},
//tests HTML5 browser support and permission request
testBrowserSupport: function()
{
var $browserMsg = $('#browser-support-msg');
if(this.cache.notifications)
{
$browserMsg.html("Yay! Notifications are supported on this browser.").parent().addClass('alert-success');
}
else
{
$browserMsg.html("Sorry. Notifications aren't supported on this browser.").parent().addClass('alert-error');
}
},
checkPermission: function(callback)
{
var _this = this;
if (this.cache.notifications.checkPermission() == 0)
{
_this[callback]();
}
else
{
this.cache.notifications.requestPermission(function()
{
if (this.cache.notifications.checkPermission() == 0) _this[callback]();
});
}
},
desktopAlert: function()
{
console.log('sending alert...');
var notification = window.webkitNotifications.createNotification("", $('#da-title').val(), $('#da-message').val());
notification.show();
}
}
$(D).ready( function()
{
//start up the form events
W.JQUERY4U.HTML5DESKTOPALERT.init();
});
})(jQuery,window,document);
From: https://www.sitepoint.com/html5-desktop-notifications/