`
zzc1684
  • 浏览: 1221005 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

js判断移动端是否安装某款app的多种方法

    博客分类:
  • Js
 
阅读更多

 

第一种方法:

 

一:判断是那种设备

var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

二:安卓设备:原理:判断是否认识这个协议,认识则直接跳转,不认识就在这里下载app

android();
 
if(isAndroid){
      function android(){
        window.location.href = "openwjtr://com.tyrbl.wjtr"; /***打开app的协议,有安卓同事提供***/
        window.setTimeout(function(){
           window.location.href = "http://www.wjtr.com/download/index.html"; /***打开app的协议,有安卓同事提供***/
        },2000);
      };

 二:ios设备:原理:判断是否认识这个协议,认识则直接跳转,不认识就在这里下载appios();

if(isiOS){
      function ios(){
        var ifr = document.createElement("iframe");
        ifr.src = "openwjtr://com.tyrbl.wjtr"; /***打开app的协议,有ios同事提供***/
        ifr.style.display = "none"; 
        document.body.appendChild(ifr);
        window.setTimeout(function(){
          document.body.removeChild(ifr);
           window.location.href = "http://www.wjtr.com/download/index.html"; /***下载app的地址***/
        },2000)
      };
}

 

第二种方法:

虽然在Js中可以启动某个app,但是并不能判断该app是否安装;
启动app需要的时间较长,js中断时间长,如果没安装,js瞬间就执行完毕。直接上代码吧!
html代码:

<a href="javascript:testApp('tel:1868888888')">打电话</a> 

 js代码:

function testApp(url) { 
  var timeout, t = 1000, hasApp = true; 
  setTimeout(function () { 
    if (hasApp) { 
      alert('安装了app'); 
    } else { 
      alert('未安装app'); 
    } 
    document.body.removeChild(ifr); 
  }, 2000) 
  
  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 (!t1 || t2 - t1 < t + 100) { 
       hasApp = false; 
     } 
  }, t); 
} 

 

第三种方法:

最近在做项目的wap版,有个需求就是,先判断手机上是否有我们的APP应用,如果有的话打开应用,没有才跳转到wap页面。 
wap简单来说就是运行在移动端浏览器上的网站。不管应用在什么地方,总之就是浏览器呗,可以通过JS来判断本地是否有某应用,实现方式实际就是将http协议转为本地软件协议。 
还是直接贴代码吧。
 如下:

<script language="javascript">
 if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
  var loadDateTime = new Date();
  window.setTimeout(function() {
   var timeOutDateTime = new Date();
   if (timeOutDateTime - loadDateTime < 5000) {
    window.location = "要跳转的页面URL";
   } else {
    window.close();
   }
  },
  25);
  window.location = " apps custom url schemes ";
 } else if (navigator.userAgent.match(/android/i)) {
  var state = null;
  try {
   state = window.open("apps custom url schemes ", '_blank');
  } catch(e) {}
  if (state) {
   window.close();
  } else {
   window.location = "要跳转的页面URL";
  }
 }
</script>

 

apps custom url schemes 是什么呢?
其实就是你与APP约定的一个协议URL,你的IOS同事或Android同事在写程序的时候会设置一个URL Scheme,
例如设置:
URL Scheme :app
然后其他的程序就可以通过URLString = app://  调用该应用。
还可以传参数,如:
app://reaction/?uid=1
原理:500ms内,本机有应用程序能解析这个协议并打开程序,调用该应用;如果本机没有应用程序能解析该协议或者500ms内没有打开这个程序,则执行setTimeout里面的function,就是跳转到你想跳转的页面。

以上就是js判断移动端是否安装某款app的多种方法,希望对大家的学习有所帮助。

 

 

 

 

 

http://stackoverflow.com/questions/13644712/launch-application-from-browser-url-scheme

launch application from browser url scheme

Manifest

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.afs"
  android:versionCode="1"
  android:versionName="1.1">
  <supports-screens
  android:largeScreens="true"
    android:normalScreens="true"
    android:smallScreens="false"
    android:resizeable="true"
    android:anyDensity="true"/>
<uses-permission android:name="android.permission.INTERNET"></uses-permission>
<uses-permission android:name="android.permission.CALL_PHONE"></uses-permission>
<uses-permission android:name="android.permission.SEND_SMS"></uses-permission>
<uses-permission android:name="android.permission.WRITE_SETTINGS"></uses-permission>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"></uses-permission>
<uses-permission android:name="android.permission.MODIFY_PHONE_STATE"></uses-permission>
<uses-permission android:name="android.permission.READ_PHONE_STATE"></uses-permission>
<uses-sdk android:minSdkVersion="9"></uses-sdk>
<application android:label="@string/app_name" android:icon="@drawable/afs"        android:debuggable="true">
      <activity android:name=".afs"
              android:label="@string/app_name"
              android:configChanges="keyboardHidden|orientation"
        android:screenOrientation="portrait">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
         <intent-filter>
             <data android:scheme="afs.com.afs"/>
             <data android:name="android.intent.action.VIEW" />
             <category android:name="android.intent.category.DEFAULT" />
             <category android:name="android.intent.category.BROWSABLE" />
         </intent-filter>    
    </activity>
</application>

 

HTML code

<a href="afs.com.afs:75235">Launch Application</a>

 

Attributes from documentation scheme://host:port/path or pathPrefix or pathPattern.

You need to change define proprely scheme and host definition. If you don't specify scheme then all URI attributes will be ignored, and won't be applied.

You could use http URI scheme.

    <data android:scheme="http" android:host="afs.com.afs"/>

and in HTML

<a href="http://afs.com.afs:75235">Launch Application</a>

Or define own URL scheme.

    <data android:scheme="myapp" android:host="afs.com.afs"/>

and in HTML

<a href="myapp://afs.com.afs:75235">Launch Application</a>

PS.

Change this

    <data android:name="android.intent.action.VIEW" />

to

    <action android:name="android.intent.action.VIEW" />
分享到:
评论

相关推荐

    通过JS启动源生app(多种方法实例)

    本篇文章将深入探讨如何通过JS启动源生app,包括多种方法的实例。 首先,我们要理解这种交互的核心机制。HTML5和JavaScript运行在浏览器环境中,而原生app则拥有设备的全部权限。JS启动原生app主要是通过调用特定的...

    利用mui框架和pdf.js插件实现pdf文件解析与查看

    接下来是**pdf.js**,这是一个由Mozilla开源的JavaScript库,专门用于在浏览器环境中解析和渲染PDF文件。它可以将PDF内容转换为高质量的HTML5 Canvas元素,使得用户无需安装额外的软件就能在线查看PDF。pdf.js支持...

    Hbuilder MUI login APP

    在HBuilder中,我们可以使用Ajax或Fetch API来异步发送请求,处理返回的JSON数据,判断登录是否成功。 3. **状态管理**:成功登录后,可以使用`plus.storage`保存用户信息,如token,以便后续页面的权限控制。同时...

    iphone的safari浏览器中实现全屏浏览的方法

    使用JavaScript监听页面加载完成(DOMContentLoaded事件),然后判断设备是否处于全屏模式。在全屏模式下,可以进一步定制用户体验,比如隐藏某些元素或者调整布局。以下是一个简单的示例: ```javascript ...

    [ThinkPHP5] 智能会议室Web端+app端.zip

    - **数据库操作**:内置强大的数据库操作组件,支持多种数据库类型,提供丰富的SQL构建和执行方法。 - **模板引擎**:强大的模板引擎,支持变量、循环、条件判断等,简化视图层开发。 - **错误处理**:提供异常...

    移动端网页开发调试神器Eruda的介绍与使用技巧

    Eruda是一款专为移动端网页前端设计的轻量级调试工具,类似于桌面端的Chrome DevTools,但针对手机网页进行了优化。这款工具由开发者liriliri创建,可以在GitHub上找到(https://github.com/liriliri/eruda)。Eruda...

    seajs 使用文档

    - **广泛的浏览器兼容性**:Sea.js 支持 Chrome 3+、Firefox 2+、Safari 3.2+、Opera 10+、IE 5.5+ 等多种浏览器,包括移动端浏览器。 #### Sea.js 配置 Sea.js 提供了一系列配置选项,以满足不同场景下的需求。 -...

    可以触摸左右滑动的导航菜单

    在移动设备上,需要区分横向滑动和纵向滑动,以及滑动的起点和终点,判断是否触发菜单的显示和隐藏。 - **动画效果**:为了让用户体验更流畅,滑动菜单的打开和关闭通常会带有过渡动画。这可以通过CSS3的`...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    工程硕士学位论文 ...研究生姓名: 唐帅 ...免去目前市场业务中企业用户需要实地地并频繁地与检测机构沟通,从而提出自己的委托乃至下委托单、等待检测报告等,设计并研发了市场上首款提供质检服务的移动端app,即“认...

    Vue页面跳转动画效果的实现方法

    【Vue页面跳转动画效果的实现方法】 在现代前端开发中,提高用户体验是至关重要的,尤其是在移动端应用中。为了模拟类似APP的流畅页面切换动画,我们可以利用Vue.js和其官方路由插件Vue Router来实现这一目标。Vue ...

    用 c # 和 Razor 创建本机移动应用和桌面应用.zip

    - Blazor支持组件化开发,类似于React或Vue.js,但使用C#作为主要编程语言。 2. **Razor语法**: - Razor是一种视图引擎,它将HTML标记与C#代码交织在一起,使得开发者可以轻松地处理数据绑定、控制流和HTML元素...

    节奏大师源码

    Cocos2d-x是一个跨平台的2D游戏开发框架,基于C++,并支持多种编程语言,如Lua和JavaScript,广泛应用于移动游戏开发。在这里,我们将深入探讨《节奏大师》源码中的关键知识点,以及Cocos2d-x框架在游戏开发中的应用...

    微信小程序——在线考试系统(源码+图片展示).zip

    3. **试题库管理**:包含单选题、多选题、判断题、填空题等多种题型,支持批量导入、编辑和删除试题。 4. **考生作答**:用户在规定时间内完成考试,系统自动保存答题记录。 5. **成绩评估**:系统自动批改并显示...

    微信小程序的表单验证

    微信小程序是一种轻量级的应用开发平台,主要用于构建移动端的应用,其设计简洁且功能强大。在微信小程序中,用户交互往往涉及到表单填写,因此表单验证成为了一个关键环节,确保用户输入的数据符合预设规则,避免...

    基于ssm微信小程序考试系统源码数据库文档.zip

    2. **小程序结构**:包括app.js(全局配置)、app.json(应用配置)、app.wxss(全局样式)等核心文件,以及多个页面文件夹,每个页面文件夹内包含json、wxml、wxss、js四个文件,分别对应页面配置、结构、样式和...

    基于mui框架下拉加载代码.rar

    - **事件监听**:使用JavaScript监听滚动或触摸事件,判断用户是否执行了下拉动作。 - **Ajax请求**:当触发下拉加载事件时,使用Ajax向服务器发送请求,获取新的数据。 - **数据处理**:将获取到的新数据添加到现有...

    微信小程序备忘录

    微信小程序是一种轻量级的应用开发平台,主要针对移动端,由腾讯公司推出,旨在提供便捷的、无需下载安装即可使用的应用体验。"微信小程序备忘录"项目是一个典型的微信小程序应用场景,它结合了多种功能,旨在帮助...

    阿里前端面试第三期.pdf

    - 可以使用多种方法实现,如Flexbox布局、Grid布局、定位和负边距结合等。 3. 重绘和回流: - 重绘是指改变元素外观,不改变布局。 - 回流是指改变布局,如改变元素大小或位置。 - 优化方法包括减少DOM操作,...

Global site tag (gtag.js) - Google Analytics