html5页面js判断是否安装app,以及判断是否在app内部打开html5页面

一、html5页面js判断是否安装app

目前还不能通过浏览器直接判断是否安装app

通过谷歌参考别人的方式和测试

我们知道安装了某个app后通过scheme跳转协议(引荐:http://www.jianshu.com/p/eed01a661186)进入到app

没有安装时点击链接是无效的

所以通过点击链接后到执行进入app之间的时间差来判断是否安装app

1、下面只是处理了安卓系统时

  

   if (navigator.userAgent.match(/android/i) ){
    var nowTime = new Date().valueOf();
    setTimeout(function(){
         var launchTime = new Date().valueOf() - nowTime;
         if(launchTime < 28){     //28是调试估算出来的打开本地app基本需要的时间
              window.location = "/phone/forward/app_download_redirect"; //下载app页面
         }
    },25);
    window.location="mysppscheme://";//自己定义的scheme协议
  } 

2、iphone用一样的原理实现测试有效

3、weixin分享里面的页面会在url添加变量isappinstalled

 isappinstalled=1的时候代表安装了app,值为0的时候代表没有安装

 微信屏蔽了url scheme直接跳转,所以weixin分享页通过提示浏览器打开

 再根据之前的isappubstalled值来判断是否安装app

var isWeixin = navigator.userAgent.match(/MicroMessenger/ig); //是否在微信
var appInstalled = document.location.href.indexOf("isappinstalled=1")>=0; //是否安装app

上面方式是我通过谷歌看大家提出的方式和自己的测试唯一还没出现问题的方式

当然后续有问题会继续更新

二、判断是否在app内部打开html5页面

判断当前页面是否在app内部打开,单纯的web前端还不能解决

需要客户端对userAgent添加自己app相关的字段

(useragent设置Android:http://www.jincon.com/archives/354/)

(useragent设置IOS:http://www.jianshu.com/p/5f02451b8e87)

var userAgent = navigator.userAgent.toLowerCase(), //获取userAgent
     isInapp = userAgent.indexOf("sunyuki")>=0;//查询是否有相关app的相关字段
时间: 2024-10-06 00:45:19

html5页面js判断是否安装app,以及判断是否在app内部打开html5页面的相关文章

WebView 基本应用示例——Android 使用WebView在应用内部打开web页面

最近用到WebView 在应用内部加载URL 展示web页面 ,顺便贴出一个简单的示例. 对于一般应用,仅用来展示web页面的话,不需要复杂的处理逻辑,但新手在做的过程或许会遇到这样的问题:(大牛可忽略了) 1.调用webView.loadUrl() 方法,依然会调用系统浏览器: 2.按返回键 直接退出界面,而不是返回打开web网页的上一级. 其实,如果只简单展示网页的话,只需一下 1.给WebView 设置 自己定义的 WebViewClient: 2.覆盖 WebViewClient()中的

【JS】点击页面判断是否安装app并打开,否则跳转下载的方法

应用场景 App产品在运营推广上有一个需求,就是要求可以让用户在访问我们的推广网页时,就可以判断出这个用户手机上是否安装了我们的App,如果安装了则可以直接在网页上打开,否则就引导用户前往下载.从而形成一个推广上的闭环. 解决办法 而对于点击链接后,能否直接打开,可以通过下面的代码来实现.前提条件:你得知道你的APP对应的打开协议,如贴吧APP,协议为:com.baidu.tieba:// ,微信的:weixin:// ,等等 1 <!-- a标签点击打开的动作,在click事件中注册 -->

点击页面判断是否安装app并打开,否则跳转app store的方法

常常有这样的场景,咱们开发出来的APP需要进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码.但往往我们都是直接给推广图片加了一个下载链接(App Store中的).所以咱们来模拟一下用户的操作步骤: 1.用户第一次访问宣传页面 a.点击Banner,进入到APP Store中对应的APP下载页 b.APP下载页中提示:安装:用户点击安装 c.安装完成后,APP下载页中提示:打开:用户继续点击打开 d.用户正常使用APP 2.用户第二次访问宣传页面 a.点击Banner,进入到AP

使用HTML5的JS选择器操作页面中的元素

上一篇文章介绍了HTML5新增的JavaScript选择器,今晚正式实践一下,使用HTML5的JS选择器操作页面中的元素. 文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用HTML5的JS选择器操作页面中的元

html5与js关于input[type=&#39;text&#39;]文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick=&quot;select();&quot;。做购物车页面时会要用到。

关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="select();".做购物车页面时会要用到. input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange: 1.onchange事件与onpropertychange事件的区别:onchange事件在内容改变(两次

打造支持apk下载和html5缓存的 IIS(配合一个超简单的android APP使用)具体解释

为什么要做这个看起来不靠谱的东西呢? 由于刚学android开发,还不能非常好的熟练控制android界面的编辑和操作,所以我的一个急着要的运用就改为html5版本号了,反正这个运用也是须要从server获取大量数据来展示在手机上面的,也就是说:必须联网,才干正常工作,于是想了一下,反正都要联网获取数据,为什么不直接用我相对熟悉一点的 html来做这个运用呢?省的花费不够用的时间去学习android界面的控制,于是就简单了:用蹩脚的手段做了一个android程序的启动欢迎界面,内页就是一个全屏的

web app教程:MUI学习笔记第二课:页面布局

页面初始化 在app开发中,若要使用HTML5+扩展api,必须等plusready事件发生后才能正常使用,mui将该事件封装成了mui.plusReady()方法,涉及到HTML5+的api,建议都写在mui.plusReady方法中.如下为打印当前页面URL的示例: mui.plusReady(function(){      console.log("当前页面URL:"+plus.webview.currentWebview().getURL());}); mui.init() 

原创 HTML5:JS操作SVG实践体会

在工业信息化系统里,常常需要动态呈现系统的数据在一张示意图里,用于展现系统状态,分析结果等.这样用JavaScript操作svg 元素就有现实意义.本人近期做了一些实践,现分享一下. 需求: 你下面这样一张示意图. A1至A8,分别用显示各个检测或控制点状态,不同状态显示不同颜色.后端技术不是本文讨论重点,前端技术才是本文讨论重点.前端用H5来实现. 方案: 一.先将该示意图导出成svg格式的文件.例如”用Viso 绘图,然后导出成svg文件“. 二.在浏览器中打开svg文件,查看源码,拷贝sv

Agile国人出品HTML5+CSS3+JS移动应用开发框架

Agile 是一个基于HTML5+CSS3+JS的移动应用开发框架,在体验上尽量接近Native Like,并且同时支持单页模式和多页模式. Agile 让HTML5在移动应用开发中充分发挥优势.所有开发者都能快速上手.所有设备都可以适配.所有项目都适用. 简单.可扩展 Agile 支持Zepto和jQuery双引擎及相应的扩展:同时Agile均支持单页模式和多页模式的移动应用,可以与ExMobi.PhoneGap等流行的跨平台开发框架一起使用. 一个框架.多种设备 你的移动应用能在 Agile