zoukankan      html  css  js  c++  java
  • 移动端打开app事例

    <!DOCTYPE html>
    <html lang="zh-cn">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>尝试打开APP的DEMO</title>
    <link rel="stylesheet" href="asserts/css/xmsCore.css" type="text/css" />
    <style>
    body{
        padding:5%;
    }
    
    .remark{
        margin-top:1em;
        color:#ababab;
    }
    </style>
    </head>
    <body>
        <h1>尝试打开APP的DEMO</h1>
        <div class = "custom-border border-color">
            <a id = "tryOpenApp" href = "index.htm">尝试打开app</a>
        </div>
        <div class = "remark">mark</div>
        <div class = "remark">如果安装了app,那么打开,不然的话,会打开下载页</div>
    <script type="text/javascript" src="asserts/js/jquery.min.js"></script>
    <script>
    $(function () {
    
    function _openAppUrl(appUrl){
        var ua = navigator.userAgent.toLocaleLowerCase(),
            openBrowser = null,
            deviceVersion = 0,
            matchVersion = null,
            openAppType = "",
            downLoadUrl = 'index.htm';
      
        //如果是在微信内部点击的时候
        if(ua.indexOf("micromessenger") != -1 ){
            _openAppUrl = function(){
                alert("DEMO,请在移动端的浏览器查看!");
            }
        }else{
            //在浏览器打开,判断是在移动端还是在PC端
            if(matchVersion = navigator.userAgent.match(/OSs*(d+)/)){
                //赋值,并且判断
                //IOS设备的浏览器
                deviceVersion = matchVersion[1] || 0;
      
                if(deviceVersion - 9 >= 0){
                    openAppType = "newType";
                }
            }else if(matchVersion = navigator.userAgent.match(/Androids*(d+)/)){
                //Android的设备
                deviceVersion = matchVersion[1] || 0;
      
                if(deviceVersion - 5 >= 0){
                    openAppType = "newType";
                }
      
            }else{
                //PC端的设备
                openAppType = "pc";
            }
      
      
            if(openAppType == "pc"){
                _openAppUrl = function(){
                    alert("DEMO,请在移动端的浏览器查看!");
                }
            }else if(openAppType == "newType"){
                //使用新的方法,尝试打开APP
                //IOS>9,Android>5的版本
                _openAppUrl = function(url){
                    var history = window.history,
                        body = $("body").eq(0),
                        ifr = $('<iframe class = "full-screen dn" style = "z-index:101;border:none;100%;height:100%;" src="'+downLoadUrl+'"></iframe>');
      
                    body.append(ifr);
                    $(window).on("popstate",function(e){
                        var state = history.state;
                        
                        if(!state){
                            ifr.addClass("dn");
                        }
                    });
      
                    function _show(){
                        history.pushState({}, "下载APP链接页", "");
                        ifr.removeClass("dn");
                    }
      
                    _openAppUrl = function(url){
                        location.href = url;
                        _show();
                    }
      
                    _openAppUrl(url);
      
                }
            }else{
                //使用计算时差的方案打开APP
                var checkOpen = function (cb){
                    var _clickTime = +(new Date()),
                        _count = 0,
                        intHandle = 0;
      
                    //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
                    intHandle = setInterval(function(){
                        _count++;
                        var elsTime = +(new Date()) - _clickTime;
                        
                        if (_count>=100 || elsTime > 3000 ) {
                            clearInterval(intHandle);
                            //计算结束,根据不同,做不同的跳转处理,0表示已经跳转APP成功了
                            if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
                                cb(0);
                            } else {
                                cb(1);
                            }
                              
                        }
                    }, 20);
                }
      
                _openAppUrl = function(url){
                    var ifr = document.createElement('iframe');
      
                    ifr.src = url;
                    ifr.style.display = 'none';
      
                    checkOpen(function(opened){
                        if(opened === 1){
                            location.href = downLoadUrl;
                        }
                    });
      
                    document.body.appendChild(ifr);
      
                    setTimeout(function() {
                        document.body.removeChild(ifr);
                    }, 2000);
                }
      
            }
      
        }
      
        _openAppUrl(appUrl);
    
    }
      
        var appUrl = "QDReader://";
      
        $("#tryOpenApp").on("click",function(){
            _openAppUrl(appUrl);
            return false;
        });
        
    });
    </script>
    </body>
    </html>
  • 相关阅读:
    WEB存储
    2D变形
    HTML5音频与视频
    HTML5 canvas元素
    HTML5表单
    Can't finish GitHub sharing process Successfully created project 'springcloud-parent' on GitHub,
    Intellij idea上传项目到github
    Git for Windows安装和基本设置
    Eclipse注释快捷键、如何生成API以及可能遇到的问题解决
    mysql忘记密码
  • 原文地址:https://www.cnblogs.com/zhangrenjie/p/7159353.html
Copyright © 2011-2022 走看看