├── README.md
└── deeplink.js


/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ## Overview
 3 | 
 4 |  A util js used to deal with link deep, in this order:
 5 |   * Deep Link 
 6 |   * Open the app in app store (iOS) OR Open the app in android market  
 7 |   * Open the original URL 
 8 |   
 9 | ## Sample:
10 | 
11 | ```
12 |   <a href="http://www.ruyuapp.com"
13 |      data-app="ruyuapp://ruyuapp.com/need/i/detail?need_id=1051"
14 |      data-store-android="com.ruyuapp.sns"
15 |      data-store-ios="1109716554">下载&打开APP</a>
16 | ```
17 | 


--------------------------------------------------------------------------------
/deeplink.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |   
  3 |  
  4 |   A util used to deal with link deep, in this order:
  5 |   
  6 |   1. Deep Link
  7 |   2. Open the app in app store (iOS) OR Open the app in android market
  8 |   3. Open the original URL
  9 | 
 10 | **/
 11 | 
 12 | (function() {
 13 | 	'use strict';
 14 | 	var delay = 1200;
 15 | 	var OSs = {
 16 | 		android: {
 17 | 			prefix:"market://details?id=",
 18 | 			test: /Android/i
 19 | 		},
 20 | 		iOS: {
 21 | 			prefix: 'https://itunes.apple.com/en/app/id',
 22 | 			test: /iPhone|iPad|iPod/i
 23 | 		}
 24 | 	};
 25 | 
 26 | 	var getUserAgent = function() {
 27 | 		var k;
 28 | 		for(k in OSs) {
 29 | 			if(navigator.userAgent.match(OSs[k].test)) return k;
 30 | 		}
 31 | 		return '';
 32 | 	};
 33 | 
 34 | 	var getTime = function() {
 35 | 		return new Date().getTime();
 36 | 	};
 37 | 
 38 | 	var open = function(url) {
 39 | 		window.location.href = url;
 40 | 	};
 41 | 
 42 | 	// 处理每个链接节点
 43 | 	var parseElement = function(el) {
 44 | 		var clicked, timeout,
 45 | 			OS = getUserAgent(),
 46 | 			href = el.getAttribute('href'),
 47 | 			app = el.getAttribute('data-app'),
 48 | 			store = el.getAttribute('data-store-'+OS.toLowerCase());
 49 | 		
 50 | 		if(!app) return;
 51 | 		if(!href) el.setAttribute('href', app);
 52 | 
 53 | 		if(OS && app) {
 54 | 			//劫持链接点击事件
 55 | 			el.onclick = function(e) {
 56 | 				e.preventDefault();
 57 | 				e.stopImmediatePropagation();
 58 | 
 59 | 				var start = getTime();
 60 | 				clicked = true;
 61 | 
 62 | 				timeout = setTimeout(function() {
 63 | 					if(!clicked || !timeout) return;
 64 | 
 65 | 					var now = getTime();
 66 | 
 67 | 					clicked = false;
 68 | 					timeout = null;
 69 | 
 70 | 					//判断用户已经离开了浏览器
 71 | 					if(now - start >= delay * 2) return;
 72 | 
 73 | 					if(store){
 74 | 						open(OSs[OS].prefix + store);
 75 | 					}					
 76 | 					else if(href){
 77 | 						open(href);
 78 | 					}
 79 | 				}, delay);
 80 | 				
 81 | 				//微信和QQ浏览器
 82 | 				if(OS.toLowerCase() == "android" && (navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == "micromessenger" || navigator.userAgent.toLowerCase().match(/QQ/i) == "qq")){
 83 | 					open("http://a.app.qq.com/o/simple.jsp?pkgname="+store);
 84 | 				}else{
 85 | 					open(app);
 86 | 				}
 87 | 				
 88 | 			};
 89 | 		} else if(!href || href === '#') {
 90 | 			// 无效的链接
 91 | 			el.style.display = 'none';
 92 | 		}
 93 | 
 94 | 		//参考https://github.com/addyosmani/visibly.js
 95 | 		visibly.onHidden(function() {
 96 | 			if(!clicked || !timeout) return;
 97 | 			timeout = clearInterval(timeout);
 98 | 			clicked = false;
 99 | 		});
100 | 	};
101 | 
102 | 
103 | 	// 解析所有的链接
104 | 	var elements = document.getElementsByTagName('a'),
105 | 		i = elements.length;
106 | 
107 | 	while(i--) parseElement(elements[i]);
108 | })();
109 | 


--------------------------------------------------------------------------------