摘要:原文译文的消息通知机制译者已经被应用到开发中。所以先要征求用户的许可而不是直接显示通知。然后,获取用户许可之后,我们可以显示两种类型的信息最后执行通知代码。
原文:HTML 5 Notification
译文:HTML 5 的消息通知机制
译者:dwqs
HTML 5 已经被应用到Web开发中。跟平常一样,任何一个软件新版本的发布都期待一些新的特性,这对HTML 5也不例外。为了仅仅通过HTML提高用户交互,HTML 5已经提供了很多新的API。
是不是非常有趣呢?并且HTML 5已经和CSS 3结合的非常棒了。
因此,我也开始写一系列与HTML 5的API相关的文章来介绍API的使用和功能,例如Geolocation, Notification, File, 等等,第一篇文章是和Notification API相关。
首先要意识到是,HTML 5的特性和API仅能在支持HTML 5的浏览器中正常使用,如果浏览器不支持HTML 5,就不能使用HTML 5在网页中实现任何一个功能了。现在就来了解一下notification API吧。
什么是HTML 消息通知?HTML消息通知是指我们可以告诉用户一个确定的事件行为,即使此时用户在浏览器的另一个选项卡。这个通知对于New Mail, New Tweet等事件是非常有用的。
怎么使用?要使用Notification API,有几个步骤:首先,要从用户那里获取显示通知的许可,只有当用户允许时,才能显示通知给用户。所以先要征求用户的许可而不是直接显示通知。然后,
获取用户许可之后,我们可以显示两种类型的信息:
Normal/Default Notification HTML Notification
最后执行通知代码。
我已经创建了一个显示通知的JavaScript函数,注意:函数仅限用于这篇文章,因为有很多种方式可以按照每个人的需求去扩展。
HTML:
DemoShow Normal Notification
Show HTML Notification
JavaScript // Function to show Notification function createNotification(type) { if(type == "") type = "normal"; if(type != "html") { var title ="You have received HTML 5 Notification"; var msg="Content Goes Here......"; var notification = window.Notifications.createNotification("1.png", title, msg); } else { var notification = window.Notifications.createHTMLNotification("content.html"); } notification.show(); } // Binding the Click event on buttons. $(document).ready(function () { if (window.webkitNotifications) { window.Notifications = window.webkitNotifications; $("#show_notification").click(function () { if (window.Notifications.checkPermission() == 0) { createNotification("normal"); } else { window.Notifications.requestPermission(); } }); $("#show_html_notification").click(function () { if (window.Notifications.checkPermission() == 0) { createNotification("html"); } else { window.Notifications.requestPermission(); } }); } else { alert("HTML 5 Notifications are not supported on this browser/OS."); } });
查看Demo: live demo (ps:用Web Kit浏览器打开,此文写于2012.04)
总结HTML 5 notification适用于像Google Chrome一样的Web Kit浏览器,对于HTML 5 notification,Mozilla Firefox有其自己的私有属性。我将在其它文章中介绍。
原文首发:http://www.ido321.com/1130.html
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/49555.html
摘要:而回调函数通常只是提供给其它模块进行调用,为了简化编码,后续的等脚本语言中提供了对匿名函数的支持。当使用回调函数时,通常会涉及到一些上下文的传递。 严格来说,这不能算是一篇微信小程序教程,不过会使用到上一篇中的app.js代码作为示例,姑且充个数吧。 回调函数 回调函数,对于初入编程这一行的同学可能会有些难以理解,毕竟回调函数的使用和程序顺序执行的直观流程是相悖的。 想象你定了一个外卖...
摘要:作为开发同学的小伙伴客户端的浏览器,有点小调皮还做了一个同源策略的限制,当我们的数据请求遇到不同源的情况下跨域,我们就得尝试其它的通信方法,不能一条道走到黑。 showImg(https://segmentfault.com/img/bVburZO?w=600&h=450); Web2.0以来,Ajax的出世,解决了传统表单提交页面跳转,闪烁白屏等问题。使得Web页面可以实现局部更新,...
摘要:提出标准,允许脚本创建多个线程,但是子线程完全受主线程控制,且不得操作。所以,这个新标准并没有改变单线程的本质。事件循环主线程线程只会做一件事,就是从消息队列里面取消息执行消息,再取消息再执行。工作线程是生产者,主线程是消费者。 最近项目中遇到了一个场景,其实很常见,就是定时获取接口刷新数据。那么问题来了,假设我设置的定时时间为1s,而数据接口返回大于1s,应该用同步阻塞还是异步?我们...
阅读 4482·2021-10-13 09:39
阅读 1813·2019-08-29 11:12
阅读 1057·2019-08-28 18:16
阅读 1797·2019-08-26 12:16
阅读 1179·2019-08-26 12:13
阅读 2930·2019-08-26 10:59
阅读 2196·2019-08-23 18:27
阅读 2921·2019-08-23 18:02