识别浏览器的获取与失去焦点
window.onfocus = function() { };
window.onblur = function() { };
// for IE
document.onfocusin = function() { };
document.onfocusout = function() { };
HTML5 Web Notification
直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button id="button">test</button>
<span id="text"></span>
<script type="text/javascript">
// 获得权限
Notification.requestPermission();
var text = document.getElementById('text');
var notification;
// 点击按钮
setTimeout(() => {
notification = new Notification("Hi，帅哥：", {
body: '可以加你为好友吗？',
icon: 'http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg'
});
}, 5000);
notification.onclick = function() {
alert('fuck you ?')
};
</script>
</body>
</html>
参考资料：http://www.zhangxinxu.com/wordpress/2016/07/know-html5-web-notification/
要注意的是浏览器的兼容性，chrome赞不支持http，即使允许了也弹不出通知。不过fixfox最新版可以实现该功能。
使用最新的360极速浏览器也可以正常支持。
网友评论