Html唤起手机APP，如果有就唤起，如果没有就跳到下载页。

最新推荐文章于 2024-05-03 01:00:52 发布

活着1989

最新推荐文章于 2024-05-03 01:00:52 发布

阅读量1.5w

点赞数 6

分类专栏： js

本文链接：https://blog.csdn.net/weixin_38109191/article/details/80409722

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

公司是做游戏的，最近给了一个需求，游戏里面开房间，点击分享到微信后，微信用户点击该链接。如果用户已经安装了APP就直接拉起APP直接进去游戏房间，如果没有就要跳转到下载页面。

对于一个java小白来说，直接懵逼。又不会写页面，只好百度，各种查询。愣是搞了2天，才出来。

直接贴源码，欢迎各位批评指导。

<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
           .wtips{
        	position:absolute;
        	left:0;
        	top:0;
        	background-color:rgba(0,0,0,0.65);
        	width:100%;
        	height:100%;
        	z-index:100;
        }
        .wtips img{
        	width:90%;
        	height:50%;
        	margin:1% 5%;
        }       
        </style>

    </head>
<script type="text/javascript">
var isAndroid;
var isIOS;
var id;

function load(){
	var ua = window.navigator.userAgent.toLowerCase();
	var u = navigator.userAgent;
    isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
	isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	var micromessenger = ua.match(/MicroMessenger/i);
	var weixin = micromessenger == 'micromessenger'?true:false;
	// 判断是否是微信内置浏览器
	if (weixin) {
		var u = navigator.userAgent;
	        isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
		isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	    if (isAndroid) {
	       //这个是安卓操作系统
	    	document.getElementById("tips_weix").src="./common/img/tips_weixin_android.png"
	    }
	    if (isIOS) {
	　　	//这个是ios操作系统
	    }
		document.getElementById("tipsdiv").style.display="";
	}
		// Safari 浏览器跳转IOS下载页
		if(/webkit/i.test(ua) &&!(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))){
			
			document.getElementById("down").href="苹果同事提供下载地址";
		}
	if(!weixin){
		var src = window.location.href; 
		var I = src.substr(src.indexOf("?id=") + 4).length; 
		var T = src.indexOf("?id="); 
		if (0 >= T) return ""; 
		if (I == src.length) return -1; 
		id = src.substr(src.indexOf("?id=") + 4); 
		var test = document.getElementById("test");
// 		alert("id =  "+id);  
// 		test.href = "dfish://zy.app/openfish?roomid="+id;
// 		alert("a标签的href ： "+test.href);
		test.οnclick=openApp("要监听的URL scheme协议");
	}
	
}

//判断手机上是否安装了app，如果安装直接打开，如果没安装，跳转到下载页面
function openApp(url) { 
	if(isAndroid){
	    var timeout, t = 1000, hasApp = true;  
	    var openScript = setTimeout(function () {  
	        if (!hasApp) { 
	        var durl = "安卓同事提供下载地址";
	          window.location.href=durl; 
	        }
	        document.body.removeChild(ifr);  
	    }, 2000)  
	  
	    var t1 = Date.now();  
	    var ifr = document.createElement("iframe");  
	    ifr.setAttribute('src', url);  
	    ifr.setAttribute('style', 'display:none');  
	    document.body.appendChild(ifr);  
	    timeout = setTimeout(function () {  
	         var t2 = Date.now();  
	         if (!t1 || t2 - t1 < t + 100) {  
	             hasApp = false; 
	         }
	    }, t);  
	}
	if(isIOS){
		document.getElementById("test").href=url;
		document.getElementById("test").click();
	}
	
}


</script>
<body οnlοad="load()"  style="height: 100%" id="body">
    <a id='test' href="javascript:void(0);" style="display: none;" ></a>
    <a id='down' href="安卓下载的APK地址"  ><img height="100%" width="100%" src="./common/img/mahjong1.jpg"></a>
    <div id="tipsdiv" class="wtips" style="display: none">
	       <img id="tips_weix" src="./common/img/tips_weixin_ios.png">
    </div>
</body>
</html>

本来if(isIOS)里面的是和if(isAndroid)的一样，但是后面发觉不能直接拉起游戏的URL scheme协议。就问老大，老大也百度了一堆，说IOS9屏蔽了 iframe这个标签。所以只好就用一个最原始的方法。直接在a标签里面用href去跳转。

如果用户没有安装APP，这个时候Safari页面会出一个改网址无效。如果安装了就能直接拉进房间。

2天终于搞好了，实在不容易。

活着1989

关注

6
点赞
踩
29

收藏

觉得还不错? 一键收藏
9
评论
Html唤起手机APP，如果有就唤起，如果没有就跳到下载页。

公司是做游戏的，最近给了一个需求，游戏里面开房间，点击分享到微信后，微信用户点击该链接。如果用户已经安装了APP就直接拉起APP直接进去游戏房间，如果没有就要跳转到下载页面。对于一个java小白来说，直接懵逼。又不会写页面，只好百度，各种查询。愣是搞了2天，才出来。直接贴源码，欢迎各位批评指导。&lt;!DOCTYPE html&gt;&lt;html style="height: 100%"&...
复制链接

扫一扫

专栏目录