当前位置: 首页 > Web前端 > HTML

移动端判断用户是否安装了客户端

时间:2023-04-02 13:52:36 HTML

因为很多人都在问如何在about页面查看用户安装了什么软件并调用,所以我说的可能不是很正确,希望读者能够给我更多的建议。以下是我自己在项目中的解决方案和思路。iOS不能用这一段来判断。至于原因,暂时还没有查到,不过Android是可以用的。(我找到了解决ios上打不开客户端的方法,但是是治标不治本,希望大牛指导,我已经在最下面添加了。)注意:感谢王铁手童鞋帮忙指出问题。双方约定这个需要提前和客户端开发者约定好协议名称,使用URIScheme作为页面和客户端的通信协议(这个很重要)。这里的URIScheme前缀不是通常的http://,而是客户端开发者定义的,一般在写程序的时候设置。那么剩下的部分就像一个普通的URL地址,需要大家就URIScheme的具体内容达成一致,比如参数是什么等等。例如微信客户端前缀为weixin://:打开微信客户端。您可以使用手机浏览器打开微信客户端,前提是您需要安装微信客户端。现在可以调用client了,但是我们好像有个问题,如果没有需要调用的client,用户怎么办?我们不能让用户傻傻地等待在当前页面,那么我们需要做一个判断,来判断用户是否有这个软件。既然我们对客户端的判断有了一个大致的思路,那么接下来我们需要知道的是如何判断是否有软件,以及如何下载软件。在这里,我通过一个隐藏的iframe来完成。因为iframe不仅可以判断用户是否安装客户端,还可以停留在当前页面。具体代码如下:document.getElementById('openApp').onclick=function(e){//尝试通过iframe打开APP。如果能正常打开,则直接切换到APP,自动阻止a标签的默认行为//否则打开a标签的href链接varifrSrc='weixin://';如果(!ifrSrc){返回;}varifr=document.createElement('iframe');ifr.src=ifrSrc;ifr.style.display='无';document.body.appendChild(ifr);setTimeout(function(){document.body.removeChild(ifr);},1000);};if(document.all){document.getElementById('openApp').click();}//其他浏览器else{vare=document.createEvent("MouseEvents");e.initEvent("点击",true,true);document.getElementById("openApp").dispatchEvent(e);现在你完成了!~不对还有一个问题,微信端打开页面怎么办?微信禁止AppStore以外的下载链接。如果是这样的话,我们就需要一张导图来指导用户如何在微信上打开浏览器,另外一个问题延伸到这个问题上,就是安卓版和苹果版的界面。不一样,真可怜,系统还要这样区分,好吧,我们继续。区分手机系统从浏览器获取的消息,查看navigator.userAgent中的参数。更详细的判断如下:(这是我在网上找的,如果觉得少的可以补充)