h5移动网页唤起App

最近这个困惑了很久，不断的有一些坑，目前还有疑问关于iOS唤起无效时会出现弹框的问题，这个最后再说

1、首先可能需要判断当前浏览器的来源（目前开发的App还没有上架，所以针对腾讯出品的大家广为人知的微信和qq进行了特殊处理）

function  GetMobelType()  {                
	var  browser  =   {                    
		versions:   function()  {                        
			var  u  =  window.navigator.userAgent;                        
			return  {                            
				trident:  u.indexOf('Trident')  >  -1, //IE内核
				presto:  u.indexOf('Presto')  >  -1, //opera内核
				Alipay:  u.indexOf('Alipay')  >  -1, //支付宝
				webKit:  u.indexOf('AppleWebKit')  >  -1, //苹果、谷歌内核
				gecko:  u.indexOf('Gecko')  >  -1  &&  u.indexOf('KHTML')  ==  -1, //火狐内核
				mobile:  !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
				ios:  !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
				android:  u.indexOf('Android')  >  -1  ||  u.indexOf('Linux')  >  -1, //android终端或者uc浏览器
				iPhone:  u.indexOf('iPhone')  >  -1  ||  u.indexOf('Mac')  >  -1, //是否为iPhone或者安卓QQ浏览器
				//iPhone: u.match(/iphone|ipod|ipad/),//
				iPad:  u.indexOf('iPad')  >  -1, //是否为iPad
				webApp:  u.indexOf('Safari')  ==  -1, //是否为web应用程序，没有头部与底部
				weixin:  u.indexOf('MicroMessenger')  >  -1, //是否为微信浏览器
				qq: u.match(/\sQQ/i) !== null, //是否QQ
				Safari:  u.indexOf('Safari')  >  -1,
				  ///Safari浏览器,
			};                    
		}()                
	};                
	return  browser.versions;            
}

　2、接下来需要搞清楚唤起的原理，这里请教大神，唤起是调用协议，因为我们是不能判断有没有app，只能尝试唤起，如果唤起App就是有，正常来说要将唤起当做没唤起来做，保持整个流程的稳定性，下面是唤起的代码。

经测试发现Android和iOS在微信都是不可以唤起的，所以加了一个蒙板提示在浏览器打开；在QQ里，Android是可以唤起App的，iOS不可以，所以也需要提示用户在浏览器打开。

function jump(myurl) {
	var timeout = 2300, timer = null;
	if(GetMobelType.weixin) {
		$("#bgCoverOPen").show();
	} else {
		var startTime = Date.now();
		if(GetMobelType.android) {
			var ifr = document.createElement('iframe');
			ifr.src = myurl;//这里是唤起App的协议，有Android可爱的同事提供
			ifr.style.display = 'none';
			document.body.appendChild(ifr);
			timer = setTimeout(function() {
				var endTime = Date.now();
				if(!startTime || endTime - startTime < timeout + 300) {
					document.body.removeChild(ifr);
					window.open("唤起失败跳转的链接");
				}
			}, timeout);
		}
		if(GetMobelType.ios || GetMobelType.iPhone || GetMobelType.iPad) {
			if(GetMobelType.qq) {
				$("#bgCoverOPen").show(); //提示在浏览器打开的蒙板
			} else {
				/*var ifr = document.createElement("iframe");
				ifr.src = myurl;
				ifr.style.display = "none";*/ iOS9+不支持iframe唤起app
				window.location.href = myurl; //唤起协议，由iOS小哥哥提供
				//document.body.appendChild(ifr);
				timer = setTimeout(function() {
					window.location.href = "ios下载的链接";
				}, timeout);
			};
		}
	}
}

　3、如上所示，这里在测试过程中发现打开App再回到网页，或者点击唤起的等待时间超出我们自己设定的时间2300时，网页会自动跳转到下载界面，这里是定时器的超出，目前没有明确的办法处理，但是加了一个处理的时间，

　　　　　　　　　　$(document).on('visibilitychange webkitvisibilitychange', function() {
			var tag = document.hidden || document.webkitHidden;
		    if (tag) {
		        clearTimeout(timer);
		    }
		})
		$(window).on('pagehide', function() {
		    clearTimeout(timer);
		})

　结合上面 方法一起使用可以阻止界面打开App再回到网页的展示下载页面，亲测有效，但是无法阻止界面用户唤起等待不操作时间超出这一跳转。

4、另一个坑就是开始说的iOS9+iframe唤起无效，只能使用location唤起，但是会出现弹窗

这个在请教大神的时候说的都是推荐使用Universal Links，需要客户端服务端配合解决，这里因为我们的iOS小哥哥一直在修复历史bug，开发新需求，暂时没有进行，会持更新。问题相关可以在疑问帖这里查看。

大家如果有其他解决方法也可以联系我，请多多指教，蟹蟹。