不罗嗦直接上代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta name="format-detection" content="telephone=no">

  <title>Document</title>

  <script src="./jquery-3.2.1/jquery-3.2.1.min.js"></script>

</head>

<body>

  <div class="box">

      <img id="btn" src="./images/750-1280.jpg"></img>

  </div>

  <style>

    html,body,.box{

      margin: 0;

      padding: 0;

      width: 100%;

      height: 100%;

    }

    img{

      width: 100%;

      height: 100%;

    }

  </style>

  <script>

    function detectVersion() {

      let isAndroid,isIOS,isIOS9,version,

        u = navigator.userAgent,

        ua = u.toLowerCase();

      if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {   //android终端或者uc浏览器

        //Android系统

        isAndroid = true

      }

      if(ua.indexOf("like mac os x") > 0){

        //ios

        var regStr_saf = /os [\d._]*/gi ;

        var verinfo = ua.match(regStr_saf) ;

        version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");

      }

      var version_str = version+"";

      if(version_str != "undefined" && version_str.length >0){

        version = parseInt(version)

        if(version>=8){

          // ios9以上

          isIOS9 = true

        }else{

          isIOS = true

        }

      }

      return {isAndroid,isIOS,isIOS9}

    }

    // 判断手机上是否安装了app，如果安装直接打开url，如果没安装，执行callback

    function openApp(url,callback) {

      stopDefault()

      let {isAndroid,isIOS,isIOS9} = detectVersion()

      if(isAndroid || isIOS){

        var timeout, t = 4000, hasApp = true;

        var openScript = setTimeout(function () {

          if (!hasApp) {

            callback && callback()

          }

          document.body.removeChild(ifr);

        }, 5000)  

        var t1 = Date.now();

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

        ifr.setAttribute('src', url);

        ifr.setAttribute('style', 'display:none');

        document.body.appendChild(ifr);

        timeout = setTimeout(function () {

          var t2 = Date.now();

          if (t2 - t1 < t + 100) {

              hasApp = false;

          }

        }, t);

      }

      if(isIOS9){

        // window.location.href = url;

        setTimeout(function() {

            callback && callback()

        }, 1000);

        setTimeout(function() {

            location.reload();

        }, 2000);

      }

    }

    //跳转h5网站

    function goConfirmAddr(){

      window.location.href = 'https://m.tb.cn/h.3Fe5mRA?sm=6f43f6'

      stopDefault()

    }

    function stopDefault(e) {

      if (e && e.preventDefault) {

        e.preventDefault();//防止浏览器默认行为(W3C)

      } else {

        window.event.returnValue = false;//IE中阻止浏览器行为

      }

      return false;

    }

    //配置对应图片大小

    function getWidthAndHeight(){

      console.log(window.innerHeight + "，" +window.innerWidth+','+window.screen.height);

      var num = window.innerWidth/window.innerHeight;

      let {isAndroid,isIOS,isIOS9} = detectVersion()

      if(isAndroid) {

        $('#btn').attr("src","./images/1080-1601.jpg");

      }else{

        switch(window.screen.height){

          case 736:

          $('#btn').attr("src","./images/720-1062.jpg");

          break;

          case 667:

          $('#btn').attr("src","./images/1080-1844.jpg");

          break;

          case 568:

          $('#btn').attr("src","./images/750-1280.jpg");

          break;

          case 812:

          $('#btn').attr("src","./images/1080-1844.jpg");

          break;

          default:

          $('#btn').attr("src","./images/1242-1786.jpg");

        }

      }

    }

    window.onload = function(){

      getWidthAndHeight()

      //3秒内点击多次只执行一次

      var checkClick = false;

      $('#btn').click(function() {

        if(checkClick === true) {

          return false

        }

        openApp("taobao://m.tb.cn/h.3Fe5mRA?sm=6f43f6",goConfirmAddr)

        checkClick = true;

        setTimeout(function(){

          checkClick = false

        },3000)

      });

    }

  </script>

</body>

</html>

H5跳转app代码的更多相关文章

  1. iOS H5页面打开APP技术总结

    iOS端H5页面打开APP的方式目前主要有两种:URL Scheme和Universal Links.其中Universal Links是iOS9.0以后推出的一种新的方案,由于它需要在iOS9.0以 ...

  2. 基于mui的H5套壳APP开发web框架分享

    前言 创建一个main主页面,只有主页面有头部.尾部,中间内容嵌入iframe内容子页面,如果在当前页面进行跳转操作,也是在iframe中进行跳转,而如果点击尾部按钮切换模块.页面,那就切换ifram ...

  3. APP跳转小程序，小程序跳转APP

    关注公共号,搜索 "APP跳转小程序,小程序跳转APP",查看原文 前置条件: 开发环境:windows 开发框架:uni-app , H5+,nativeJS,mpvue 编辑器 ...

  4. iOS 7 新版微信 URL 不支持跳转 App Store 的解决方案

    今天早上刚到公司,就收到反馈说公司前端页面的下载按钮在 iOS 7 的微信内置浏览器里面点击无效,经过确认之后,前端代码是正常的,问题出在了微信上,然后谷歌之,原来腾讯在***. 是 BUG 还是刻意 ...

  5. H5+混合移动app应用开发——开篇

    前言 经过2个多月的艰苦奋斗,app的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程.不要问我有多坑,我会告诉你很多,很多..... 过去一直从事.ne ...

  6. vue打包app嵌入h5，区分app进入和android，ios显示不同的下载链接

    vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接 需求:自己app打开的登录页面不显示app下载链接.其他地方打开判断android手机的跳转到android下载页链 ...

  7. 简话h5唤起本地app

    在没接触这个功能之前,查询各种文档后也只是似懂非懂,做过之后,发现其实很简单,简言之就是通过一个iframe或者a标签来跳转app端提供的URL schema(至于这个URL schema的组成格式, ...

  8. 手机浏览器跳转APP

    背景 对于APP来说,回流分享页是最好的最便宜的也是最病毒式的拉新方式.让新用户去下载APP是重要的.对老用户来说,可以直接调起APP也是提升用户体验和让用户有侵入式体验的重要手段.所以我们一起来看看 ...

  9. 前端判断是否APP客户端打开触屏，实现跳转APP原生组件交互之遐想

    今天做了一个html的活动页面,本来马上就要完工,准备开开心心收尾,结果~... 产品突然提出需要说,要讲html中的某些交互和APP原生组件挂钩,心里一万头xxx奔过~ 静下心来思考 以往我们是判断 ...

随机推荐

  1. Go语言学习笔记（2）——零散的话题（反射）

    这部分是<Go语言编程>这本书的第9章的内容.书中给该章节的定位是一个文章集,其包含了一些Go语言中比较少涉及,或是比较深入的讨论的内容.因为第一节就是反射,而反射在我看来是比较重要的内容 ...

  2. mysql修改最大连接数

    root@localhost ~]# nano /etc/my.cnf编辑my.cnf在[mysqld]中加入:set-variable=max_connections=1000 更改 MySQL 在 ...

  3. 网际互连__TCP/IP三次握手和四次挥手

    在TCP/IP协议中,TCP协议提供可靠的连接服务. 位码即tcp标志位,有6种标示: SYN(synchronous建立联机).ACK(acknowledgement 确认).PSH(push传送) ...

  4. 终于有人把Elasticsearch原理讲透了!学习的第一篇总览全局

    诗词大会引出的话题 随着央视诗词大会的热播,小史开始对诗词感兴趣,最喜欢的就是飞花令的环节. 但是由于小史很久没有背过诗词了,飞一个字很难说出一句,很多之前很熟悉的诗句也想不起来. 倒排索引 吕老师: ...

  5. Docker下使用centos无法使用systemctl怎么办

    提交正在使用的容器: docker commit [ContainerId] 提交停止正在运行无法使用Systemctl的容器: docker stop [ContainerId] 删除这个容器(可选 ...

  6. Sqoop export参数updatemode两种模式updateonly和allowinsert区别

    1.更新导出(updateonly模式)1.1参数说明-- update-key,更新标识,即根据某个字段进行更新,例如id,可以指定多个更新标识的字段,多个字段之间用逗号分隔. -- updatem ...

  7. 从零开始教你安装Oracle数据库

    1.数据库安装 1.1下载 根据自己的操作系统位数,到oracle官网下载(以oracle 11g 为例) 之后把两个压缩包解压到同一个文件夹内(需要注意的是,这个文件夹路径名称中最好不要出现中文.空 ...

  8. hdu5643 King's Game(约瑟夫环+线段树)

    Problem Description In order to remember history, King plans to play losephus problem in the parade ...

  9. 恢复win10 LTSC 2019 图片查看器功能

    1.开始–运行–输入"regedit"打开注册表. 2. 在打开的注册表编辑器中,从左侧依次展开:HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Win ...

  10. C# 静态类 单例模式 对比

    公司的类都需要使用单例模式实现,这个可以节省资源,避免重复对象的生成.但是静态类也可以做到这一点,而且写起来更简洁,于是查阅相关资料,希望弄明白两者的差别. 1.单例模式可以在用到的时候初始化,而静态 ...