1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: Web-based protocol handlers
slug: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
translation_of: Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers
---
<h2 id="Background" name="Background">背景</h2>
<p>利用非http协议，从网页链接到一些别的资源，这种做法是相当普遍的。比如 <code>mailto:</code> 协议:</p>
<div style="overflow: hidden;">
<pre class="brush:html"><a href="mailto:webmaster@example.com">Web Master</a></pre>
</div>
<p>当Web页面作者想直接从网页上，为用户提供一个方便的方式发送一个电子邮件,时可以使用mailto:链接。激活链接时,浏览器应该启动默认的桌面应用程序来处理电子邮件。你可以认为这是一个<em>基于桌面的</em>协议处理器。</p>
<p>基于网络的协议处理程序也允许基于web的应用程序参与这一过程。随着越来越多的类型的应用程序迁移到web，这变得越来越重要。事实上,有许多基于web的电子邮件处理的应用程序可以处理一个mailto链接。</p>
<h2 id="Registering" name="Registering">注册</h2>
<p>设置一个web应用程序作为一个协议处理器不是一个很麻烦的过程。web应用程序可以使用<a href="/en-US/docs/Web/API/navigator.registerProtocolHandler">registerProtocolHandler()</a>注册到浏览器上，从而对于一个给定的协议来讲，作为一个潜在的处理程序。例如:</p>
<pre class="brush: js">navigator.registerProtocolHandler("mailto",
"https://www.example.com/?uri=%s",
"Example Mail");
</pre>
<p>参数为:</p>
<ul>
<li>协议名称.</li>
<li>url模板。%s用来替换链接的<code>href</code>属性，之后通过这个url来发起一个GET请求.</li>
<li>一个对用户友好的协议处理器的名字.</li>
</ul>
<p>当一个浏览器执行这段代码时,它应该向用户显示一个请求,让用户许可为处理这个协议而注册一个web应用程序的请求。Firefox在通知栏区域显示一个提示:</p>
<p><img alt="Image:wph-notification.png" src="/@api/deki/files/972/=Wph-notification.png"></p>
<div class="note"><strong>Note:</strong>试图执行登记或注册时，当前网页必须与提供的URL模板在相同的域，否则将会失败。例如,http://example.com/homepage.html可以为<code class="plain" style="font-size: 14px;">http://example.com/handle_mailto/%s</code><span style="line-height: 1.5;">注册一个协议处理程序</span><span style="line-height: 1.5em;">, 但</span><code class="plain" style="font-size: 14px;">http://example.<em><strong>org</strong></em>/handle_mailto/%s不可以</code><span style="line-height: 1.5em;">.</span></div>
<p> </p>
<p>多次注册相同的协议处理程序会弹出不同的通知,表明协议处理器已经注册。因此,发起一个注册协议处理程序的请求，之后检查是否注册是一个很好的方法。比如下面的例子。</p>
<h3 id="Example" name="Example">例子</h3>
<pre class="brush: js"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Web Protocol Handler Sample - Register</title>
<script type="text/javascript">
var url = "http://starkravingfinkle.org/projects/wph/handler.php?value=%s";
if (!navigator.isProtocolHandlerRegistered("fake", url)) {
navigator.registerProtocolHandler("fake", url, "Fake Protocol");
}
</script>
</head>
<body>
<h1>Web Protocol Handler Sample</h1>
<p>This web page will install a web protocol handler for the <code>fake:</code> protocol.</p>
</body>
</html>
</pre>
<h2 id="Activating" name="Activating">激活</h2>
<p>现在,只要用户点击链接,使用注册协议,浏览器将跳转到web应用程序注册时提供的URL。Firefox在默认情况下,跳转前会提示用户操作。</p>
<p><img alt="Image:wph-launch.png" src="/@api/deki/files/971/=Wph-launch.png"></p>
<h3 id="Example_2" name="Example_2">Example</h3>
<pre class="brush: html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Web Protocol Handler Sample - Test</title>
</head>
<body>
<p>Hey have you seen <a href="fake:this%20is%20fake">this</a> before?</p>
</body>
</html>
</pre>
<h2 id="Handling" name="Handling">处理</h2>
<p>下一步是处理这个动作。浏览器在激活的链接中提取出href属性，之后与注册时提供的URL模板进行拼装，之后经由拼装好的URL发起一个HTTP GET请求.因此下面的例子中，浏览器会基于此URL发起一个GET请求:</p>
<pre>http://starkravingfinkle.org/projects/wph/handler.php?value=fake:this%20is%20fake</pre>
<p>服务端代码可以提取查询字符串的参数，执行所需的操作。</p>
<div class="note"><strong>Note:</strong>服务端代码会接收到href的<strong>全部</strong>内容。这意味着服务端代码必须解析出数据中的协议。</div>
<h3 id="Example_3" name="Example_3">Example</h3>
<pre class="brush: php"><?php
$value = "";
if ( isset ( $_GET["value"] ) ) {
$value = $_GET["value"];
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
<title>Web Protocol Handler Sample</title>
</head>
<body>
<h1>Web Protocol Handler Sample - Handler</h1>
<p>This web page is called when handling a <code>fake:</code> protocol action. The data sent:</p>
<textarea>
<?php echo(htmlspecialchars($value, ENT_QUOTES, 'UTF-8')); ?>
</textarea>
</body>
</html>
</pre>
<h2 id="References" name="References">参考</h2>
<ul>
<li><a href="http://www.w3.org/TR/2011/WD-html5-20110525/timers.html#custom-handlers">http://www.w3.org/TR/2011/WD-html5-20110525/timers.html#custom-handlers</a></li>
</ul>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
<li><a href="/en-US/docs/DOM/window.navigator.registerContentHandler" title="DOM/window.navigator.registerContentHandler">window.navigator.registerContentHandler</a></li>
<li><a href="/en-US/docs/XPCOM_Interface_Reference/nsIProtocolHandler" title="nsIProtocolHandler">nsIProtocolHandler</a> (XUL only)</li>
<li><a class="external" href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/" title="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler Enhancing the Federated Web</a> at Mozilla Webdev</li>
<li><a href="https://developers.google.com/web/updates/2011/06/Registering-a-custom-protocol-handler">Register a custom protocolHandler</a> at Google Developers.</li>
</ul>
|
