短网址,顾名思义就是相对较短的网址,比如t.cn/abcd,实际是通过abcd来查询对应的源网址(长网址)。
现在短信及微信等都能遇到很多短网址,且点击后能唤起app并调转到对应的功能页面,微信目前可能由于框架屏蔽了唤起app机制,一般微信需要提示用户手动浏览器方式打开,
大家可能会问,短网址唤起app是怎么实现的?
其实原理很简单,网上搜索也很多。简单原理:用户点击短网址发起请求(或者浏览器直接访问),手机系统识别到地址的schema,如果有安装该schema对应的app就会唤起打开,如果没有则可能没有响应或者停留在页面(个别手机机型浏览器可能屏蔽了比如三星部分机型等,由于不是本文重点,暂不细说)。
那怎么处理才能最大用户体验最好呢?目前大多是采取折中的处理,如果未唤起app,则停留默认页面,默认页面会提供下载及其他温馨提示信息引导用户操作。
function AppOpen(schema) {
var ua = navigator.userAgent.toLowerCase();
//由于ios9以上系统不能直接iframe方式唤起app,需要通过创建a链接才能唤起
if ((ua.indexOf('safari') > -1 && (ua.indexOf('os 5') == -1|| ua.indexOf('os 6') == -1|| ua.indexOf('os 7') == -1|| ua.indexOf('os 8') == -1)) {
var schemaLinkOpen = document.getElementById('schemaLinkOpen');
if (!schemaLinkOpen) {
schemaLinkOpen = document.createElement('a');
schemaLinkOpen.id = 'schemaLinkOpen';
schemaLinkOpen.style.display = 'none';
document.body.appendChild(schemaLinkOpen);
} schemaLinkOpen.href =schema;
// 执行click schemaLinkOpen.dispatchEvent(CustomClickEvent());
}
var iframeObj = document.createElement("iframe");
var startTime = (new Date()).getTime();
if (iframeObj != null) {
iframeObj.setAttribute("style", "height:0px;width:0px;display:none;");
iframeObj.setAttribute("src", scheme);
document.body.appendChild(iframeObj);
document.body.removeChild(iframeObj);
}
setTimeout(function () {
var endTime = (new Date()).getTime();
if (isiPhone) {
if (endTime - startTime < 700) {
window.open(sHrefUrl, "_parent");
}
}
}, 550);
}
function CustomClickEvent() {
var clickEvent;
if (window.CustomEvent) {
clickEvent = new window.CustomEvent("click", {
canBubble: true,
cancelable: true
});
} else {
clickEvent = document.createEvent('Event');
clickEvent.initEvent('click', true, true);
}
return clickEvent;
}
代码及原理其实很简单,但为什么需要有判断及不同的打开方式呢?
<pre name="code" class="javascript">if ((ua.indexOf('safari') > -1 && (ua.indexOf('os 5') == -1|| ua.indexOf('os 6') == -1|| ua.indexOf('os 7') == -1|| ua.indexOf('os 8') == -1))
由于ios9以上系统不能直接iframe方式唤起app,需要通过创建a链接才能唤起,但为什么不能直接用a链接方式呢,如果直接用a方式,ios8以下的浏览器(如safari)每次打开时会有提示,需要用户手动点击是否打开还是取消,用户体验不佳,这就是为什么这样处理的原因。