前段时间，小颖公司需要实现：用户在微信中打开一个html5，在该html5中通过点击下载按钮，Android手机会跳到Android的下载地址，IOS会跳转到IOS下载地址，其它则跳转到另一个指定地址。

1.若用户是在浏览器中打开该html5，点击下载按钮后会跳转到相应的版本app下载地址。

2.若用户在微信中打开该html5，则先提示用户，用浏览器打开该html5，然后在浏览器中打开该html5后，再点击下载按钮跳转到相应的版本app下载地址。

具体实现方法：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>安装</title>

</head>

<body>

<div class="view-container">

    <div class="etc-handle">

        <a href="javascript:void(0)" onclick="downApp()">点击安装</a>

    </div>

</div>

<script type="text/javascript">

    (function(){

       window.alert = function(name){

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

        iframe.style.display="none";

        iframe.setAttribute("src", 'data:text/plain');

        document.documentElement.appendChild(iframe);

        window.frames[0].window.alert(name);

        iframe.parentNode.removeChild(iframe);

        }

      })();

    var browser = {

        versions: function () {

            var u = navigator.userAgent, app = navigator.appVersion;

            return {         //移动终端浏览器版本信息

                trident: u.indexOf('Trident') > -1, //IE内核

                presto: u.indexOf('Presto') > -1, //opera内核

                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核

                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核

                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端

                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端

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

                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器

                iPad: u.indexOf('iPad') > -1, //是否iPad

                webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部

            };

        }(),

        language: (navigator.browserLanguage || navigator.language).toLowerCase()

    }

    function downApp(){

        var urls = {

            'android':'XXX.apk',

            'ios':'XXX/id1438617787',

            'other':'https://www.baidu.com/index.php?tn=monline_3_dg'

        };

        if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面

            var ua = navigator.userAgent.toLowerCase();//获取判断用的对象

            if (ua.match(/MicroMessenger/i) == "micromessenger") {

                alert("点击右上角按钮，然后再弹出的菜单中，点击在浏览器中打开，即可安装");

            }else if (browser.versions.ios) {

                window.location.href=urls.ios;

            }

            else if(browser.versions.android){

                window.location.href=urls.android;

            }

        } else {

            window.location.href=urls.other;

        }

    }

</script>

</body>

</html>

js判断客户端是iOS还是Android移动终端的更多相关文章

  1. 判断客户端是IOS还是Android

    PHP 判断客户端是IOS还是Android <?php if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')||strpos($_SERVER['H ...

  2. ASP.NET MVC Filters 4种默认过滤器的使用【附示例】 数据库常见死锁原因及处理 .NET源码中的链表 多线程下C#如何保证线程安全? .net实现支付宝在线支付 彻头彻尾理解单例模式与多线程 App.Config详解及读写操作 判断客户端是iOS还是Android，判断是不是在微信浏览器打开

    ASP.NET MVC Filters 4种默认过滤器的使用[附示例]   过滤器(Filters)的出现使得我们可以在ASP.NET MVC程序里更好的控制浏览器请求过来的URL,不是每个请求都会响 ...

  3. js如何判断客户端是iOS还是Android等移动终端

    判断原理:JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来 ...

  4. JS判断是否是ioS或者Android

    每个客户端都带有自身的UA标识,通过JavaScript,可以获取客户端标识,我们可以获取浏览器的userAgent,用正则来判断手机是ios(苹果)还是Android(安卓)客户端. 项目实例:ht ...

  5. PHP 判断客户端是IOS还是Android

    <?php if(strpos($_SERVER['HTTP_USER_AGENT'], 'iPhone')||strpos($_SERVER['HTTP_USER_AGENT'], 'iPad ...

  6. 判断客户端是iOS还是Android，判断是不是在微信浏览器打开

    bool flag = false; string agent = System.Web.HttpContext.Current.Request.UserAgent.ToLower(); string ...

  7. JS判断客户端是否是iOS或者Android或者ipad（二）

    js判断客户端是IPAD和iphone 多了就不说了,直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22     funct ...

  8. H5案例分享：使用JS判断客户端、浏览器、操作系统类型

    使用JS判断客户端.浏览器.操作系统类型 一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Androi ...

  9. JS判断客户端、浏览器、操作系统

    一.JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. 方法一: var u = navigator.us ...

随机推荐

  1. thinkphp区间查询、统计查询、SQL直接查询

    区间查询 $data['id']=array(array('gt',4),array('lt',10));//默认关系是(and)并且的关系 //SELECT * FROM `tp_user` WHE ...

  2. Fiddler抓包工具怎么设置HTTPS抓包

    最近在学习使用 Fiddler 抓包工具时遇到一个问题,Fiddler 默认只对 HTTP 协议进行抓包,如果出现下图提示,则需要进行相应设置才可以抓包HTTPS 具体步骤 ①:Tools-Optio ...

  3. IntelliJ IDEA 创建java application

    1.打开IntelliJ IDEA,选择File——New——Project... 2.选择左侧的java,然后在右侧的Project SDK 中添加 java 环境目录,点击Next 3. 在下面的 ...

  4. ant-design-pro引用css

    ant-design-pro中默认只能引用less文件,引用了css文件也是无效的.所以需要在配置文件config.js中找到  cssLoaderOptions,在 getLocalIdent中加入 ...

  5. javascirpt的json.stringify()方法在IE浏览器兼容性模式下出错的原因与解决办法

    今天开机混底薪的时候遇到一个JSON.stringify()在IE浏览器兼容模式下的问题. 问题描述 一个弹窗选择的功能原来好好的,突然就不行了. 想要调试调试不了,报错信息也看不到(一开F12这破I ...

  6. django学习_学生信息管理后台

    一.功能: 实现对学生对个人信息的增删查改 实现后台对所有学生信息的操作 二.此后台采用的是MVC的风格模式进行编码 1.VIEWS部分 from django.http import HttpRes ...

  7. 【CTS2019】氪金手游（动态规划）

    [CTS2019]氪金手游(动态规划) 题面 LOJ 洛谷 题解 首先不难发现整个图构成的结构是一棵树,如果这个东西是一个外向树的话,那么我们在意的只有这棵子树内的顺序关系,子树外的关系与这棵子树之间 ...

  8. 【spring boot】【redis】spring boot 集成redis的发布订阅机制

    一.简单介绍 1.redis的发布订阅功能,很简单. 消息发布者和消息订阅者互相不认得,也不关心对方有谁. 消息发布者,将消息发送给频道(channel). 然后是由 频道(channel)将消息发送 ...

  9. Spring Boot 静态页面跳转

    本篇博客仅为自己提个醒:如何跳转页面而不麻烦控制器. 当我们创建 Spring Boot 项目时(勾选了 Thymeleaf 和 Web),目录结构会是如下:        其中图二是我创建了一个 h ...

  10. vue基础之data

    使用 调用data onLoad(option) { _self = this; _self.$data.xxxx = "te"; } 绑定节点 元素~~~~ <input ...