English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Сегодня проект в основном завершен, все использовали свободное время, чтобы написать две статьи. Предыдущая статья "Как создать node проект"想必大家有需要学习的都已经看али. Эффект, который был показан в этой статье в конце, действительно впечатляющий, поэтому здесь хочу запомнить, чтобы в будущем можно было также посмотреть.
Все еще такой же набор, мы будем шаг за шагом объяснять, чтобы思路清晰明了.
Сначала посмотрим на эффект:
Обратите внимание на出现的弹出消息 в правом нижнем углу, мы реализуем именно такой эффект.
Эффекты看过, теперь переходим к распределению讲解模式的......
Первый шаг:Сначала напишем骨架
Следующий код написан внутри тега script, вам нужно только关心 содержимое тега script:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta content="" name="description">
<meta content="" name="keywords">
<meta content="eric.wu" name="author">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta property="qc:admins" />
<meta content="telephone=no, address=no" name="format-detection">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>Пример推送 уведомлений</title>
</head>
<body>
Просмотрите уведомления в правом нижнем углу...
</body>
</html>
<script type="text/javascript">
</script>
Второй шаг:Проверка поддержки Web Notifications API
Здесь проверяется, поддерживается ли Web Notifications API, только поддерживая这个东西, мы можем продолжить下去.
function justify_notifyAPI(){
if (window.Notification) {
// Поддерживается
// Поддерживается
} else {
// Не поддерживается
// Не поддерживается
}
}
Третий шаг:Проверка поддержки примера всплывающего окна
Здесь есть диалоговое окно, проверка того, поддерживает ли браузер пример всплывающего окна (адрес изображения можно заменить своим адресом).
function justify_showMess(){
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (status === "granted") {
var n = new Notification('Поступило сообщение:-O', {
body: 'Здесь содержимое уведомления! Что ты хочешь увидеть, гость?',
icon:"../../images/headerPic/QQ图片20160525234650.jpg"
});
} else{
var n = new Notification("малыш! я уйду тебя!");
}
});
}
}
Четвертый шаг:Пример демонстрации всплывающего контента
Атрибут title в конструкторе Notification обязателен и используется для указания заголовка уведомления, формат строки. Атрибут options является опциональным и имеет формат объекта, который используется для настройки различных параметров. Атрибуты объекта такие:
направление текста: возможные значения auto, ltr (слева направо) и rtl (справа налево), как правило, наследуется от настроек браузера.
язык: используемый язык, например, en-US, zh-CN.
текст уведомления: содержимое уведомления, формат строки, которое используется для дальнейшего объяснения цели уведомления.
тег: ID уведомления, формат строки. Группы уведомлений с одним и тем же тегом не будут отображаться одновременно, а только после того, как пользователь закроет предыдущее уведомление, на прежнем месте.
иконка: URL диаграммы, которая используется для отображения уведомлений.
function otification_construct(){
var notification = new Notification('Поступило новое письмо', {
body: 'Вы получили 1 непрочитанное письмо от Сюэ Джин.',
dir: "auto",
lang: "zh-CN",
tag: "a1",
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "Received new email"
console.log(notification.body); // "У вас всего 3 unread messages."
}
Пятый шаг:События API уведомлений
Инстанция Notification вызывает следующие три события:
show: срабатывает при отображении уведомления пользователю.
click: срабатывает при клике пользователя по уведомлению.
close: срабатывает при закрытии уведомления пользователем.
error: срабатывает при возникновении ошибки уведомления (например, когда уведомление не может быть правильно отображено).
Эти события имеют соответствующие методы onshow, onclick, onclose, onerror, которые используются для определения соответствующих обратных вызовов. Метод addEventListener также можно использовать для определения обратных вызовов для этих событий.
function otification_event(){
var MM = new Notification("Hi! My beautiful little princess!",{
body: 'У вас есть 1 письмо изouter space.',
icon:"../../images/headerPic/20100114212301-1126264202.jpg"
});
MM.onshow = function() {
console.log('Notification showning!');
};
MM.onclick = function() {
console.log('Notification have be click!');
};
MM.onerror = function() {
console.log('Notification have be click!');
// Ручное закрытие
MM.close();
};
}
Основные функции уже объяснены, вот Demo-код для достигнутого эффекта:
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
<meta content="" name="description">
<meta content="" name="keywords">
<meta content="eric.wu" name="author">
<meta content="application/xhtml+xml;charset=UTF-8" http-equiv="Content-Type">
<meta property="qc:admins" />
<meta content="telephone=no, address=no" name="format-detection">
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
<title>Web Notifications API</title>
</head>
<body>
Просмотрите уведомления в правом нижнем углу...
</body>
</html>
<script type="text/javascript">
window.onload= function(){
justify_notifyAPI(); // Определение поддерживает ли браузер Web Notifications API
justify_showMess(); // Проверка поддержки браузером примера弹出
otification_construct(); // Пример демонстрации弹出内容
otification_event(); //События API уведомлений
}
// Проверка поддержки браузером Web Notifications API
function justify_notifyAPI(){
if (window.Notification) {
// Поддерживается
// Поддерживается
} else {
// Не поддерживается
// Не поддерживается
}
}
// Проверка поддержки браузером примера弹出
function justify_showMess(){
if(window.Notification && Notification.permission !== "denied") {
Notification.requestPermission(function(status) {
if (status === "granted") {
var n = new Notification('Поступило сообщение:-O', {
body: 'Здесь содержимое уведомления! Что ты хочешь увидеть, гость?',
icon:"../../images/headerPic/QQ图片20160525234650.jpg"
});
// alert("Hi! this is the notifyMessages!");
} else{
var n = new Notification("малыш! я уйду тебя!");
}
});
}
}
// Пример демонстрации弹出内容
function otification_construct(){
var notification = new Notification('Поступило новое письмо', {
body: 'Вы получили 1 непрочитанное письмо от Сюэ Джин.',
dir: "auto",
lang: "zh-CN",
tag: "a1",
icon:"../../images/headerPic/772513932673948130.jpg"
});
console.log(notification.title); // "Received new email"
console.log(notification.body); // "У вас всего 3 unread messages."
}
// Сообщения API соответствующие события
function otification_event(){
var MM = new Notification("Hi! My beautiful little princess!",{
body: 'У вас есть 1 письмо изouter space.',
icon:"../../images/headerPic/20100114212301-1126264202.jpg"
});
MM.onshow = function() {
console.log('Notification showning!');
};
MM.onclick = function() {
console.log('Notification have be click!');
};
MM.onerror = function() {
console.log('Notification have be click!');
// Ручное закрытие
MM.close();
};
}
</script>
Вот и все, что есть в этой статье, я надеюсь, что это поможет вам в изучении, и希望大家多多支持呐喊教程。
Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат авторам, контент предоставлен пользователями Интернета, сайт не имеет права собственности, не был обработан вручную, и не несет ответственности за связанные с этим法律责任. Если вы обнаружите спорное содержимое, пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (при отправке письма, пожалуйста, замените # на @) для отчета,并提供相关证据. При обнаружении факта, сайт немедленно удалит спорное содержимое.