by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10969 鑫空间-鑫生活
本文欢迎分享与聚合，全文转载就不必了，尊重版权，圈子就这么大，若急用可以联系授权。

一、前事不忘后事之师

第一眼看到registerProtocolHandler()方法的时候，说实话，我还是挺兴奋的。

这可是个有趣的东西啊，居然可以自定义协议地址，并且可以像正常链接一样访问。

试想下，有个链接地址是：

<a href="web+zxx:css">CSS标签</a>

点击后，可以自动访问CSS标签页面，是不是很帅气？

又是装逼于无形的一大利器啊，哈哈哈。

可是，当我深入体验这个API之后……嗯……怎么说呢……唉，只能说一言难尽，具体什么情况，听我慢慢道来。

二、鸟来还语法，客去更安禅

registerProtocolHandler的使用分为注册和使用两部分。

首先是注册。

所有自定义的协议头，一定要是web+开头，后面至少跟随一个英文字母（不能有数字，否则会报错）。

否则只能使用下面之一的协议。

• bitcoin
• ftp
• ftps
• geo
• im
• irc
• ircs
• magnet
• mailto
• matrix
• mms
• news
• nntp
• openpgp4fpr
• sftp
• sip
• sms
• smsto
• ssh
• tel
• urn
• webcal
• wtai
• xmpp

而上面很多协议，浏览器是内置原生行为的，例如tel、mailto、ftps等，看起来是不能随便定义的，否则有可能会冲突。

所以，先使用完全自定义的协议看看。

代码如下（注意，后面的地址不能跨域，否则也会报错）：

navigator.registerProtocolHandler('web+zxx', 'https://www.zhangxinxu.com/wordpress?s=%s');

我一开始以为是这样的，%s表示使用时候协议冒号后面的变量，所以如果有链接：

<a href="web+zxx:css">CSS标签</a>

点击后，访问的URL是 https://www.zhangxinxu.com/wordpress?s=css。

然而，真正运行后，大跌眼镜。

首先是权限提示，选择允许。

在Windows Chrome下，还会呼起系统窗口，让你选择呼起的本地软件。

Firefox浏览器则是自带的提示，选择“选择应用程序”后，再选择最上面的当前域名的这个选项即可。

此时，假设页面中有个链接元素的href的属性值是web+zxx:css。

则点击后浏览器的调整地址是……这个：

完全超出预期，%s指代的居然是完整的href属性值，而不是协议后面的值。

眼见为实，大家也可以来体验体验，狠狠地点击这里：registerProtocolHandler注册使用示意demo

这就导致，registerProtocolHandler要想应用，一定要对动态数据进行额外的处理。

例如对URL中的查询关键字进行字符处理，得到冒号后面的’css’关键字。

new URLSearchParams(location.search).get('s').replace('web+zxx:', '');

这可就麻烦了呀，看来这玩意，只能用在呼起本地程序上，直接在Web上装逼耍帅完全不可行。

一个字，失败！

三、天河渐分晓，结语问牛郎

伤心欲绝，内置的scheme类型我也懒得测试了，估计也是一个尿性。

总而言之，言而总之，registerProtocolHandler()方法想要在纯Web中玩耍是非常不方便的，也是没有任何意义的。

非要和本地的应用程序结合起来使用才有价值。

由此可见，registerProtocolHandler()方法就是个鸡肋方法，我估计我这辈子都没机会使用了。

也不知道，一个URL呼起vscode或者github桌面端软件是不是基于此方法实现的。

嗯，我回想了下我之前学到的知识……应该不是，应该是这些软件在安装的时候，直接在系统内注册好了的。

路径是，桌面软件注册，浏览器URL呼起。

而registerProtocolHandler()方法是浏览器注册，浏览器呼起。

这么一看，registerProtocolHandler()方法更是注定了无人问津。

好了，白开心一场，下篇文章再见吧。

? ? ? ? ? ? ?

本文为原创文章，欢迎分享，勿全文转载，如果实在喜欢，可收藏，永不过期，且会及时更新知识点及修正错误，阅读体验也更好。
本文地址：https://www.zhangxinxu.com/wordpress/?p=10969

（本篇完）