1.?HTML代碼

url:?http://view.seeyouyima.com/startup.html?num=424&url=meetyou.linggan%3A%2F%2F%3Fpush_type%3D62

<a οnclick="download_meiyou();return false;" title="下載" href="javascript:;" id="download-btn"></a>

2. JS代碼

<script type="text/javascript">

// 獲取url參數(shù)，Bug: 如果是版本，則要同時兼任2.0和2兩種情況。

function getUrlParam(name) {

? ? var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|#|$)");

? ? var r = window.location.search.substr(1).match(reg);

? ? if (r != null)?{

? ? ? ? if (name == 'v') {?//版本

? ? ? ? ? ? r[2] = parseFloat(r[2].substr(0, 3));

? ? ? ? ? ? return r[2];

? ? ? ? }

? ? ? ? return encodeURIComponent(decodeURIComponent(unescape(r[2])));

? ? }

? ? return null;

}

?

// 區(qū)分userAgent瀏覽器類型，Bug: 微信判斷，不能用var weixin = navigator.userAgent.match(/MicroMessenger/i) == "micromessenger";進行判斷。

var browser = navigator.userAgent.toLowerCase();?//userAgent類型;

var ios = browser.indexOf("iphone") > -1 || browser.indexOf("ipad") > -1 || browser.indexOf("ipod") > -1 || browser.indexOf("itouch") > -1 || browser.indexOf("ios") > -1 || browser.indexOf("mac") > -1;?//ios終端

var android = browser.indexOf("android") > -1 || browser.indexOf("linux") > -1;?//android終端

var weixin = browser.indexOf('micromessenger') > -1;?//微信瀏覽器

var other = browser.indexOf('mqqbrowser') > -1 || browser.indexOf('ucweb') > -1;?//其它瀏覽器

var wp = browser.indexOf('windows phone') > -1;?//window phone終端

var pc = browser.indexOf('windows nt') > -1 || browser.indexOf('macintosh') > -1;?//PC終端=window終端+mac終端

?

// 設(shè)置各個版本的下載鏈接地址

var path = {
? ? 169: {
? ? ? ? ios: 'https://itunes.apple.com/us/app/you-zi-jie-shou-ji-shang-nu/id1054877169?l=zh&ls=1&mt=8',
? ? ? ? android: 'http://yzjdl.xixiaoyou.com/169.apk',
? ? ? ? wechat: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.meiyou.youzijie&ckey=CK1319740419600'
? ? },
? ? 224: {
? ? ? ? ios: 'http://um0.cn/1DDQhs',
? ? ? ? android: 'http://yzjdl.xixiaoyou.com/youzijie224.apk',
? ? ? ? wechat: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.meiyou.youzijie&ckey=CK1319740419600'
? ? },
? ? 225: {
? ? ? ? ios: 'http://um0.cn/1Vzj5G',
? ? ? ? android: 'http://yzjdl.xixiaoyou.com/youzijie225.apk',
? ? ? ? wechat: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.meiyou.youzijie&ckey=CK1319740419600'
? ? },
? ? 226: {
? ? ? ? ios: 'http://um0.cn/35VMNr',
? ? ? ? android: 'http://yzjdl.xixiaoyou.com/youzijie226.apk',
? ? ? ? wechat: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.meiyou.youzijie&ckey=CK1319740419600'
? ? },

? ? 264: {
? ? ? ? ios: 'https://itunes.apple.com/app/apple-store/id1054877169?pt=91900801&ct=fensitong264&mt=8',
? ? ? ? android: 'http://yzjdl.xixiaoyou.com/youzijie264.apk',
? ? ? ? wechat: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.meiyou.youzijie&ckey=CK1319740419600'
? ? },
? ? 265: {
? ? ? ? ios: 'https://itunes.apple.com/app/apple-store/id1054877169?pt=91900801&ct=fensitong265&mt=8?',
? ? ? ? android: 'http://yzjdl.xixiaoyou.com/youzijie265.apk',
? ? ? ? wechat: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.meiyou.youzijie&ckey=CK1319740419600'
? ? },
? ? 423: {
? ? ? ? ios: 'https://itunes.apple.com/app/apple-store/id1054877169?pt=91900801&ct=uctoutiao423&mt=8?',
? ? ? ? android: 'http://yzjdl.xixiaoyou.com/youzijie423.apk',
? ? ? ? wechat: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.meiyou.youzijie&ckey=CK1319740419600'
? ? },
? ? 424: {
? ? ? ? ios: 'https://itunes.apple.com/app/apple-store/id1054877169?pt=91900801&ct=uctoutiao424&mt=8',
? ? ? ? android: 'http://yzjdl.xixiaoyou.com/youzijie424.apk',
? ? ? ? wechat: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.meiyou.youzijie&ckey=CK1319740419600'
? ? }
};

?

// 點擊按鈕，執(zhí)行download_meiyou函數(shù)，Bug: 其中PC端的統(tǒng)一下載Android的版本。

//?Bug: 在IOS和Android判斷中均要優(yōu)先判斷微信類型，否則微信中的鏈接直接打開ios鏈接而無反應(yīng)。

function download_meiyou() {

? ? var downloadURL = "";

? ? var num =?getUrlParam('num');

? ? if (ios) {

? ? ? ? if (weixin)

? ? ? ? ? ? downloadURL = path[num].wechat;

? ? ? ? else

? ? ? ? ? ? downloadURL = path[num].ios;

? ? } else if (android || other) {

? ? ? ? if (weixin)

? ? ? ? ? ? downloadURL = path[num].wechat;

? ? ? ?else

? ? ? ? ? ?downloadURL = path[num].android;

? ?// } else if (wp) {

? ?// ? ? downloadURL = "http://t.cn/RPcmviT";

? ? } else {

? ? ? ? downloadURL =?path[num].android;

? ? }

? ? window.location.href = downloadURL;

}

?

// 自動打開APP，Bug: 其中IOS利用window.location直接跳轉(zhuǎn)協(xié)議地址，Android利用iframe打開。

window.onload = function() {

? ? var url = getUrlParam('url');

? ? if (url) {

? ? ? ? url = decodeURIComponent(url);

? ? }

? ? if (ios) {

? ? ? ? window.location = url;

? ? } else if (android) {

? ? ? ? var b = document.createElement("iframe");

? ? ? ? b.src = url;

? ? ? ? b.style.display = "none";

? ? ? ? window.setTimeout(function() {

? ? ? ? ? ? document.body.appendChild(b);

? ? ? ? }, 10);

? ? ? ? window.setTimeout(function() {

? ? ? ? ? ? document.body.removeChild(b);

? ? ? ? }, 2000);

? ? }

}

</script>

總結(jié)

以上是生活随笔為你收集整理的H5下载打开APP页面通用模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。