一个网址只对应一个网页,但并非每个 URL Schemes 都只对应一款应用。这点是因为苹果没有对 URL Schemes 有不允许重复的硬性要求,所以曾经出现过有 App 使用支付宝的 URL Schemes 拦截支付帐号和密码的事件。
一般网页的 URL 比较好预测,而URL Scheme 因为没有统一标准,所以非常难猜,通过猜来获取 应用的 URL Schemes 是不现实的。
前面普及了一下URL Schemes的相关知识,作为个前端开发者,就不去深究其中的原理,都交给app开发者吧。接下来开始我们的正题。首先当然是要客户端提供App的Url Schemes。
用浏览器去打开scheme
在浏览器中打开 scheme 就像打开一个不同的http地址一样。可以在一个 a 标签中打开。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打开App</title>
</head>
<body>
<a href="luwei://" id="open">打开应用</a>
</body>
</html>
点击上面的H5页面中的链接将会尝试唤醒对应app,在一些浏览器中,可能会弹出一个提示框,询问用户是否允许打开应用。
如果打开的 scheme 在本地没有对应的 app,则点击不会反应。
当然还可以使用 JavaScript 代码打开,只需要添加相应的事件触发和处理即可。
在JavaScript代码中打开连接有以下几种方式:
新建一个隐藏的 iframe ,地址指向需要打开的url
使用 window.location 或者 window.location.href 刷新当前页面
新建一个隐藏的 a 标签,地址指向打开的url,并触发打开链接事件
动态创建一个script脚本,在这个脚本中新建一个a标签并打开
// 打开url的方式
var urlOpen = {
// 在ios支持不好
'iframe' : function(url) {
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = url;
document.body.appendChild(iframe);
},
'location' : function(url) {
window.location.href = url;
},
'href' : function(url) {
var a = document.createElement('a');
a.style.display = 'none';
a.href = url;
document.body.appendChild(a);
a.click();
},
'script' : function(url) {
var script = document.createElement('script');
script.setAttribute('type', 'test/javascript');
script.innerHTML = '(function(){' +
'var a = document.createElement("a");' +
'a.style.display = "none";' +
'a.href = "' + url.replace(/"/g, '"') + '";' +
'document.body.appendChild(a);' +
'a.click();' +
'})()';
document.body.appendChild(script);
},
'open' : function(url) {
window.open(url);
}









