前段时间，小颖公司需要实现：用户在微信中打开一个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. linux 查看用户列表

    cat /etc/passwd|grep -v nologin|grep -v halt|grep -v shutdown|awk -F":" '{ print $1"| ...

  2. 到底如何选择PHP框架？Yii、ThinkPHP、laravel、CI.

    如果你是为了工作和就业,你应该选择框架以工作为目标,看公司里面未来招聘中用的最多的是什么框架.很简单的判断方式 很多朋友都不知道如何去选择框架,选择框架的时候就会很纠结.到底该学什么框架,选择什么框架 ...

  3. GNU Makefile中的条件控制结构

    在常见的编程语言中,使用条件控制结构诸如if ... else if ... else...是很寻常的事情,那么在GNU Makefile中如何使用呢? ifeq ifneq 例如:foo.sh #! ...

  4. WebAPI HelpPage帮助页

    WebAPI HelpPage是个插件,根据代码的注释生成API说明页,一目了然. 下面开始安装和配置 1.添加引用 先选择管理NuGet程序包,搜索 Microsoft.AspNet.WebApi. ...

  5. 使用XSSFWorkbook 读取excel

    工作中用到 使用XSSFWorkbook 读取excel 具体代码如下, private (List<(string columnName, string colomnDescription)& ...

  6. 整理：C#常用字符串操作，常用数值类型转换

    一.字符串操作 1. 字符串连接 //将指定的数组所有元素拼接为一个字符串 string[] arr = {"A","B","C"}; st ...

  7. vue中通过WeixinJSBridge关闭微信公众号当前页面，返回微信公众号首页

    之前有个需求,点击菜单进入到微信公众号模块,然后点击返回的时候不知道到哪里去,后来觉得点返回的时候直接关闭页面,但是window.close()并不能关闭页面,然后经过查找资料,发现通过以下方法可以 ...

  8. new的原理及实现

    new的过程 // new运算的过程 /** * 1.创建一个空对象: * 2.该空对象的原型指向构造函数(链接原型):将构造函数的 prototype 赋值给对象的 __proto__属性: * 3 ...

  9. 如何提高你的移动开发中AS3/AIR性能

    Shawn Blais 让我了解到如何在移动平台上对AS3代码进行优化.他的博客(http://esdot.ca/site/category/blog)只有十来篇文章,但都是些很意思的信息,尤其适合我 ...

  10. MySQL5.7 安装和配置环境变量

    安装 1.下载安装包 官网地址:https://dev.mysql.com/downloads/mysql/ 2.选择 Custom,自定义 3.根据自己系统选择 x64还是x86,然后点击第一个箭头 ...