chrome里的protocolhandler机制
vscode://vscode.git/clone
| Scheme | Authority | Path | Query |
|---|---|---|---|
vscode:// | timmoverlaan.uri-open-recent | /open-or-clone | ?project=<PROJECT>&url=<GIT_URL> |
注册protocolhandler
-
scheme一个包含站点希望处理的协议的字符串。例如，你可以通过传入
"sms"来注册处理SMS文本信息链接。 -
url处理器的URL，string类型。这个字符串应该包含一个"%s"的占位符，其会被将要受理的文档的 escaped 链接所替换。这个链接（译者按：指将要受理的文档的 escaped 链接，也就是替换占位符的字符串）可能是一个真实的URL，或者是一个电话号码，邮件地址之类的。
navigator.registerProtocolHandler("web+vscode",
"vscode://timmoverlaan.uri-open-recent/open-or-clone/?uri=%s",
"Burger handler");
navigator.unregisterProtocolHandler("web+vscode",
"vscode://timmoverlaan.uri-open-recent/open-or-clone/?uri=%s",
"Burger handler");
分析
多次注册相同的协议处理程序会弹出不同的通知,表明协议处理器已经注册。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
user-select: none;
background-color: pink;
width: 100px;
height: 100px;
margin: 100px;
}
</style>
</head>
<body>
<div class="card">点击添加</div>
<div class="card2">点击移除</div>
<script>
var c = document.querySelector(".card");
var c2 = document.querySelector(".card2");
c.addEventListener(
"click",
() => {
navigator.registerProtocolHandler(
"web+vscode",
"vscode://timmoverlaan.uri-open-recent/open-or-clone/?uri=%s",
"Burger handler"
);
},
false
);
c2.addEventListener(
"click",
() => {
navigator.unregisterProtocolHandler(
"web+vscode",
"vscode://timmoverlaan.uri-open-recent/open-or-clone/?uri=%s",
"Burger handler"
);
},
false
);
</script>
</body>
</html>
