html5 デスクトップ リマインダー: 通知アプリケーションの紹介_html5 チュートリアル スキル

WBOY
リリース: 2016-05-16 15:51:00
オリジナル
1406 人が閲覧しました

HTML5 のデスクトップ リマインダー (Web 通知) では、現在のページ ウィンドウにメッセージ ボックスをポップアップ表示できます。これにより、ユーザーが複数のタブを開いて Web を閲覧するときに、リマインダーがより便利かつ簡単に表示されます。現在、この機能をサポートしているのは Webkit カーネルのみです。
この機能を有効にするには、Chrome の http モードで開く必要があります。
デスクトップリマインダー機能は、window.webkitNotifications オブジェクト (Webkit カーネル) によって実装されます。
window.webkitNotifications オブジェクトには属性がなく、次の 4 つのメソッドがあります:
1.requestPermission()
このメソッドは、この権限があれば、ユーザーからのメッセージ リマインダー権限を申請するために使用されます。は現在開いていません。ユーザーが認証すると、ブラウザーによって認証インターフェイスがポップアップ表示され、オブジェクト内にステータス値 (0、1、または 2 の整数) が生成されます。
0: ユーザーが同意したことを示します。 ;
1: ユーザーが拒否も同意もしないデフォルト状態を示します。
2: ユーザーがメッセージ リマインダーを拒否することを示します。
2.checkPermission()
このメソッドは、requestPermission()で申請されたパーミッションのステータス値を取得するために使用されます。
3.createNotification()
このメソッドは、純粋なメッセージとしてリマインダー メッセージを作成します。
iconURL: メッセージに表示されるアイコン アドレス、
title: メッセージのタイトル、
body: メッセージ本文のテキスト内容
このメソッドは、Notification オブジェクトを返し、このオブジェクトに対してさらに多くの設定を行うことができます。
Notification オブジェクトの属性とメソッド:

コードをコピー
コードは次のとおりです:

dir: ""
onclick: null
onclose: null
ondisplay: function (event) {
onerror: null
onshow: null
replaceId: ""
tag : ""
__proto__: 通知
addEventListener: function addEventListener() { [ネイティブ コード] }
cancel: function cancel() { [ネイティブ コード] }
close: function close( ) { [ ネイティブ コード ] }
コンストラクター: 関数 Notice() { [ネイティブ コード] }
dispatchEvent: 関数dispatchEvent() { [ネイティブ コード] }
removeEventListener: 関数 RemoveEventListener() { [ネイティブ コード] ] }
show: function show() { [ネイティブコード] }
__proto__: オブジェクト

dir: メッセージの配置方向を設定します。可能な値は「auto」です。 (自動)、「ltr」(左から右)、「rtl」(右から左)。
タグ: メッセージにタグ名を追加します。この属性が設定されている場合、新しいメッセージ リマインダーがある場合、同じラベルのメッセージは同じメッセージ ボックスにのみ表示され、後のメッセージ ボックスが前のメッセージ ボックスに置き換わります。それ以外の場合は、複数のメッセージ プロンプト ボックスが表示されます。最大 3 つのメッセージ ボックスが表示されます。3 つを超えると、それ以降のメッセージ通知がブロックされます。
onshow: このイベントはメッセージ ボックスが表示されるとトリガーされます。
onclick: このイベントはメッセージ ボックスがクリックされるとトリガーされます。
onclose: このイベントはメッセージが閉じられるとトリガーされます。 onerror: このイベントはエラーが発生したときにトリガーされます。
メソッド:
addEventListener && RemoveEventListener: イベントを追加および削除するための従来のメソッド。
show: メッセージ リマインダー ボックスを表示します。メッセージ リマインダー ボックス;
キャンセル: 閉じると同じように、メッセージ リマインダー ボックスを閉じます。 HTML のメッセージを受け取り、1 つのパラメータを受け入れます。 HTML ファイルの URL このメソッドは、Notification オブジェクトも返します。
例:



コードをコピーします

コードは次のとおりです:




HTML5 の通知








関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート