最近公司App产品在运营推广上有一个需求,就是要求可以让用户在访问我们的推广网页时,就可以判断出这个用户手机上是否安装了我们的App,如果安装了则可以直接在网页上打开,否则就引导用户前往下载。从而形成一个推广上的闭环。

在iOS上,其实只需要在<head>标签内增加一个<meta>标签,系统就会自动帮你在顶部生成一个Banner,而且会智能引导用户操作(如果未安装就跳转AppStore,否则直接打开)。格式如:<meta name='apple-itunes-app' content='app-id=你的APP-ID'>。比如加一个百度贴吧的Native APP大Banner,用下面这串儿代码:

<meta name='apple-itunes-app' content='app-id=477927812'>

但是上面的方法仅限于iOS设备,且无法定义Banner的形式。另外打开应用时也无法告诉App端要做什么操作。(因为后来运营有提出了新的需求,比如在推广网页上打开的App就直接进行某项操作。)

那么,我们可以通过另外一种协议的方式来达到上述要求的效果,即:

1.可以在web页面中直接打开App。

2.打开App的同时可以进行传值操作,告诉移动端程序应该做什么。

前提:知道你的App对应的打开协议。例如百度贴吧的协议为:com.baidu.tieba://,微信的协议为:weixin://,等等。

方法一:

function runApp(rid) {
var state = null;
try {
state = window.open("myapp://jest.app/openwith?id=" + rid, '_self');
} catch (e) {
alert("发生未知错误:" + state + ",请联系运营商.");
}
}

方法一直接利用window.open的方式来打开应用,rid是要告诉移动端的值,这里只写了一个,大家可以根据实际情况来定义自己的参数。打开方式这里定义为_self,是因为如果是_blank的话,会重新打开一个选项卡, 不是很友好。 另外这个方法对于Andriod设备的兼容性不是很好, 不建议在Andriod设备上执行此方法。

方法二:

function runApp2(rid) {
var ifrSrc = "myapp://jest.app/openwith?id=" + rid; var ifr = document.createElement('iframe');
ifr.src = ifrSrc;
ifr.style.display = 'none';
document.body.appendChild(ifr);
// 点击后延时触发清除iframe,并跳转页面
setTimeout(function () {
document.body.removeChild(ifr);
}, 200);
}

方法二是利用iframe的方式来进行打开,同样rid是要传递的参数。这个方法我测试了一些Andriod设备,感觉还是比较好的。 但是iOS体验较差, 建议大家自己根据实际情况,结合使用。

最后说下关于没有安装App时的处理方法。基本上网上大家搜的打开方式都是通过协议的方式, 那么如果用户在触发打开条件后, 一定时间内没有打开应用,我们就可以确定该用户是没有安装对应的App。 那么我们可以通过延时函数来进行后续的引导操作。

在web浏览器中判断app是否安装并直接打开的更多相关文章

  1. 在手机浏览器中判断App是否已安装

    从网上搜到之前手机中判断App是否安装可以通过onblur事件+定时器来实现. 但现在要做这个功能时,按网上的说法已经不能实现了.因为现在浏览器中打开App,window不会触发onblur事件. 在 ...

  2. 第十一章:WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  3. JavaScript权威指南--WEB浏览器中的javascript

    知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...

  4. HTML中判断手机是否安装某APP,跳转或下载该应用

    有些时候在做前端输出的时候,需要和app的做些对接工作.就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用.如果安装了该应用,就直接打开该应用:如果没有安装该应用,就下载该应用.那么下面就 ...

  5. 浏览器网页判断手机是否安装IOS/Android客户端程序

    IOS 原理如下: 为HTML页面中的超链接点击事件增加一个setTimeout方法. 如果在iPhone上面500ms内,本机有应用程序能解析这个协议并打开程序,则这个回调方法失效: 如果本机没有应 ...

  6. websocketj--随时随地在Web浏览器中操作你的服务端程序

    0 - 有没有觉得Linux标准终端界面输入输出枯燥无味? 1 - 什么?vmstat命令的输出数据不直观?有没有想过能够可视化该命令的输出? 2 - 尝试过用浏览器操作Windows中的cmd吗? ...

  7. web浏览器中javascript

    1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; ...

  8. web浏览器中的javascript -- 2

    在html里嵌入javascript: 在html文档里嵌入客户端javascript代码有4种方式: 1.内联,放置在<script>和</script>标签对之间; 2.放 ...

  9. IE浏览器中判断IE版本

    <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> 所有的IE可识别 <![e ...

随机推荐

  1. 终于懂了:WM_PAINT 与 WM_ERASEBKGND(三种情况:用户操作,UpdateWindow,InvalidateRect产生的效果并不相同),并且用Delphi代码验证 good

    一直对这两个消息的关系不是太了解,借重新深刻学习windows编程的机会研究一番. 1)当窗口从无效变为有效时,比方将部分覆盖的窗口恢复时会重绘窗口时:程序首先会通过发送其他消息调用DefWindow ...

  2. 14.9.2 Specifying the Row Format for a Table 指定 表的行格式

    14.9.2 Specifying the Row Format for a Table 指定 表的行格式 mysql> SHOW TABLE STATUS\G; *************** ...

  3. Boost Thread学习笔记

    thread自然是boost::thread库的主 角,但thread类的实现总体上是比较简单的,前面已经说过,thread只是一个跨平台的线程封装库,其中按照所使用的编译选项的不同,分别决定使用 W ...

  4. UML基本架构建模--类概述

     Classes 类 Classes are the most important building block of any object-oriented system. A class is ...

  5. JSP中两种include的区别

    首先说明这两种都是什么: <%@ include file=”relativeURI”%> 可以叫作静态include(静态包含),是jsp指令中的一种,(JSP指令控制JSP编译器如何去 ...

  6. C 文件直接包含

    C 文件直接包含 有一部分代码很大,在很多函数中重复,可以直接写在另外的一个文件中,引用时直接包含.co.cpp两个函数都 包含c1.cxx. 点击(此处)折叠或打开 ////// co.cpp #i ...

  7. DirectX SDK版本与Visual Studio版本

    对于刚刚接触 DirectShow 的人来说,安装配置是一个令人头疼的问题,经常出现的情况是最基本的 baseclass 就无法编译.一开始我也为此费了很大的功夫,比如说修改代码.修改编译选项使其编译 ...

  8. Java Web Services (0) - Overview

    前言第1章 Web服务快速入门 1.1 Web服务杂项 1.2 Web服务有什么好处 1.3 Web服务和面向服务的架构 1.4 Web服务简史 1.4.1 从DCE/RPC到XML-RPC 1.4. ...

  9. 模仿《百度音乐HD》添加到下载框动画

    上次听有人说喜欢<百度音乐HD>添加到下载动画 ,我就尝试模仿了下,没想到,今天code4app(地址)也有了这个,但是 这个动画基本相同,我们的思路还是部一样的. 都可以参考 .主要关键 ...

  10. 解决xShell4某些情况下按删除键会输出^H的问题

    当我们用Xshell登录进入linux后,在普通模式下,对输入进行删除等操作没有问题. 而在执行中,按delete,backspace键时会产生^H等乱码问题. 这是由于编码不匹配的问题. 解决方法: ...