h5页面打开app

作者: CRUD_科科 | 来源:发表于2018-08-19 20:18 被阅读11次

    项目中 直播app分享出来的直播h5页面 点击进入按钮:已下载app 就进入app,未下载跳转到下载页面

    判断是安卓还是ios

    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
    var isiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if(isiOS){
    document.getElementById('download-app').value = 'http://baidu.com';
    }else{
    document.getElementById('download-app').value = 'http://jd.com/8JZ5OO';
    }

    页面代码

    <a id="call-app" href="javascript:;" style="display: inline-block;float: right;">
    <input id="download-app" type="hidden" name="storeurl" value="http://jd.com/8JZ5OO">
    <div class="intoR">
    <span>立即进入</span>
    </div>
    </a>

    已下载打开APP 未下载跳转到input的value也就是下载页面

    scheme_IOS和scheme_Adr这两个参数是app端给的呼起app url。

    var ua = navigator.userAgent.toLowerCase();
    var t;
    var config = {
    /scheme:必须/
    scheme_IOS: 'lbbox1214151904://com.lababox',
    scheme_Adr: 'schemedemo://aa.com/test/scheme?name=google&page=1',
    download_url: document.getElementById('download-app').value,
    timeout: 600
    };

    function openclient() {
    var startTime = Date.now();

    var ifr = document.createElement('iframe');

    ifr.src = ua.indexOf('os') > 0 ? config.scheme_IOS : config.scheme_Adr;
    ifr.style.display = 'none';
    document.body.appendChild(ifr);

    var t = setTimeout(function() {
    var endTime = Date.now();

    if (!startTime || endTime - startTime < config.timeout + 200) {
    window.location = config.download_url;
    } else {

    }
    }, config.timeout);

    window.onblur = function() {
    clearTimeout(t);
    }
    }
    window.addEventListener("DOMContentLoaded", function(){
    document.getElementById("call-app").addEventListener('click',
    openclient, false);
    }, false);
    主要地址参数是app端生成的,不用前端考虑,最终我们主要判断是android还是iOS就好了。如有错误,请大神指教。

    相关文章

      网友评论

        本文标题:h5页面打开app

        本文链接:https://www.haomeiwen.com/subject/yuhhiftx.html