ホームページ ウェブフロントエンド H5 チュートリアル html5 デスクトップ リマインダー: 通知アプリケーションの紹介_html5 チュートリアル スキル

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

May 16, 2016 pm 03:51 PM
html5

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 の通知








このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles