SYNCERのロゴ
アイキャッチ画像

NavigatorContentUtils.registerProtocolHandler() - プロトコルを関連付ける

registerProtocolHandler()は、NavigatorContentUtilsのメソッドです。特定のプロトコルとWebサイトのURLアドレスを関連付けます。例えば、"mailto:..."のアドレスで自身のWebアプリを起動させたりできます。クリックイベントの中など、ユーザーの操作によって実行されないといけません。

概要

名前
registerProtocolHandler
所属
NavigatorContentUtils
IDL
void registerProtocolHandler(DOMString scheme, USVString url, DOMString title);
仕様書
https://html.spec.whatwg.org/multipage/system-state.html#dom-navigator-registerprotocolhandler

説明

第1引数(scheme)には、プロトコルを表す文字列を指定します。"mailto"、"web+..."など。

第2引数(url)には、アプリケーションのURLアドレスを指定します。"%s"というキーワードは、渡されるデータに置換されます。同一オリジンのみ許可されます。

第3引数(title)には、アプリケーションのタイトルを指定します。ブラウザによっては案内に利用されます。

チュートリアル

あるPHPプログラムを用意しました。これは受け取ったデータをそのまま表示するだけの単純な内容です。

app.php

<?php
	echo $_GET["q"] ;

さて、"web+syncer:"という独自のプロトコルが、先のapp.phpに繋がるようにユーザーエージェントに登録させるのが、registerProtocolHandler()の役割です。セキュリティの関係上、app.phpは同一オリジンに存在しないといけません。この例えでは、example.comです。"%s"は置換キーワードで、この例の場合は"web+syncer:送られるデータ"をURLエンコードした値に置換されます。

<a href="web+syncer:送られるデータ">アプリを起動</a>
element.onclick = function () {
	navigator.registerProtocolHandler( "web+syncer", "https://example.com/app.php?q=%s", "SYNCERアプリケーション" ) ;
}

このメソッドは、ボタンをクリックするなど、ユーザーの操作を起点としたイベントの中で実行しなければいけません。例えば、Firefoxなら下記のように「登録しますか?」という確認メッセージが表示されます。

独自プロトコルの登録確認の例 (Firefox)
独自プロトコルの登録確認の例 (Firefox)

デモ

NavigatorContentUtils.registerProtocolHandler()のデモです。「登録」をクリックする前と後で、「独自プロトコルのリンク」をクリックした時の挙動の違いを確認してみて下さい。最後はお手数ですが、「解除」をクリックして関連付けを設定から削除して下さい。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div#result {
	white-space: pre-wrap ;
}
</style>
</head>
<body>
<p><a href="web+syncer:JavaScript" target="_blank">独自プロトコルのリンク</a></p>
<hr>
<p><button id="hoge">登録</button></p>
<p><button id="fuga">解除</button></p>
<script>
var element1 = document.getElementById( "hoge" ) ;
var element2 = document.getElementById( "fuga" ) ;

element1.onclick = function () {
	navigator.registerProtocolHandler( "web+syncer", "https://lab.syncer.jp/search?q=%s", "SYNCERの検索アプリ" ) ;
}

element2.onclick = function () {
	navigator.unregisterProtocolHandler( "web+syncer", "https://lab.syncer.jp/search?q=%s" ) ;
}
</script>

</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
××× 11.6+×-2.3×
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月11日 (水)
コンテンツを公開しました。