https://stackoverflow.com/questions/10237031/how-to-open-a-native-ios-app-from-a-web-app
var frame = document.createElement('iframe');
frame.src = 'myapp://?params=...';
frame.style.display = 'none';
document.body.appendChild(frame); setTimeout(function() { document.body.removeChild(frame); }, 4); 以上这个方案在唤起app时,当唤起不成功的时候不会有浏览器的默认行为,如果用href跳转的化就会有浏览器的弹窗提示的行为了

var  preventDefault  = function(e) {
e = e || window.event;
if(e.preventDefault) {
e.preventDefault();
}else{
e.returnValue = false;
}
}
preventDefault(); 以上的方法试过了,可以禁止手机上浏览器的弹窗的行为

https://segmentfault.com/a/1190000011231042

下面的方法没试过

Ios/Android h5 唤起本地APP

兰茗翔 2017年09月19日发布
  • 赞  |   4收藏  |  26
  • 2.3k 次浏览

纠结两天(浏览器中唤起本地APP),一直找不到解决方案,今天总算基本搞定。

ps:吐槽一下 魔窗那篇文章,为什么就不直接把js代码开源开源,混淆后的代码看得我好恼火

参考文章:魔窗解决方案京东解决方案

首先是判断浏览器

// 判断浏览器
var Navigator = navigator.userAgent;
var ifChrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false;
var ifAndroid = (Navigator.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false;
var ifiPad = (Navigator.match(/(iPad).*OS\s([\d_]+)/)) ? true : false;
var ifiPhone = (!ifiPad && Navigator.match(/(iPhone\sOS)\s([\d_]+)/)) ? true : false;
var ifIos = Navigator.match(/iPhone|iPad|iPd/i) ? true : false;
var ifSafari = ifIos && Navigator.match(/Safari/);
// ios 设备的版本号
var iosVersion = Navigator.match(/OS\s*(\d+)/)
iosVersion = iosVersion ? (iosVersion[1] || 0) : 0;
// 安卓版本号
var androidVersion = Navigator.match(/Android\s*(\d+)/)
androidVersion = androidVersion ? (androidVersion[1] || 0) : 0;

android5 及以上的高版本

// 延后50毫秒
setTimeout(function() {
location.href = ‘自定义 URL’
}, 50)

ios9 及以上的版本

setTimeout(function() {  // 必须要使用settimeout
var a = document.createElement("a"); //创建a元素
a.setAttribute("href", ‘自定义 URL’), a.style.display = "none", document.body.appendChild(a);
var t = document.createEvent("HTMLEvents"); // 返回新创建的 Event 对象,具有指定的类型。
t.initEvent("click", !1, !1) // 初始化新事件对象的属性
a.dispatchEvent(t) // 绑定事件
}, 0)

所有情况都用 iframe

document.querySelector("#" + iframe).src = ‘自定义 URL’ // 将iframe增加src

计算时差的方案打开APP

var checkOpen = function (cb){
var _clickTime = +(new Date());
function check(elsTime) {
if ( elsTime > 3000 || document.hidden || document.webkitHidden) {
cb(1);
} else {
cb(0);
}
}
//启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束
var _count = 0, intHandle;
intHandle = setInterval(function(){
_count++;
var elsTime = +(new Date()) - _clickTime;
if (_count>=100 || elsTime > 3000 ) {
clearInterval(intHandle);
check(elsTime);
}
}, 20);
}
checkOpen(function(opened){
// APP没有打开成功 并且开启自动跳转到下载页
if(opened === 0 && option.autoRedirectToDownloadUrl){
location.href = downloadUrl;
}
});

app唤起的完美解决方案,及阻止浏览器的默认弹窗行为的更多相关文章

  1. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  2. js 停止事件冒泡 阻止浏览器的默认行为(阻止a标签跳转 )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...

  3. js 停止事件冒泡 阻止浏览器的默认行为(比如阻止超连接 # )

      在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...

  4. js阻止浏览器的默认行为以及停止事件冒泡(用JQuery实现回车提交,兼容IE、FF浏览器) 转

    1.阻止浏览器的默认行为 function stopDefault(e) { //如果提供了事件对象,则这是一个非IE浏览器 if(e && e.preventDefault) { / ...

  5. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  6. js 停止事件冒泡 阻止浏览器的默认行为

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...

  7. 如何阻止浏览器的默认事件,你是否也遇到过无法阻止Google默认事件的情况( 原生JS )

    如题,话不多话,我们先看怎么解决 根据不同的绑定事件的方法,我们有不同的阻止默认事件的方法 如果你不知到如何绑定事件,请查看我的上一篇文章 关于浏览器滚动的兼容性问题以及事件绑定 1.句柄绑定 只需要 ...

  8. javascript小实例,阻止浏览器默认行为,真的能阻止吗?支持IE和标准浏览器的阻止默认行为的方法

    看到这标题,是不是有点逆天的感觉,总感觉好狂拽炫酷,耳边隐隐约约传来一个声音:你这么叼,你咋不上天呢! ~~ 额,好吧! 话入正题,我为什么会提出这么一个问题呢? 阻止浏览器默认行为,真的能阻止吗?那 ...

  9. WebBrowser脚本错误的完美解决方案

    原文:WebBrowser脚本错误的完美解决方案   当IE浏览器遇到脚本错误时浏览器,左下角会出现一个黄色图标,点击可以查看脚本错误的详细信息,并不会有弹出的错误信息框.当我们使用WebBrowse ...

随机推荐

  1. javascript 如何创建只能执行一次的事件。

    document.getElementById("myelement").addEventListener("click", handler);   // ha ...

  2. ubuntun16.0 登陆密码忘记

    1. 开机,如下图所示(没有装虚拟机,手机拍的图片凑合这看把): 2. 此时会有一个选项:Advanced Options for Ubuntu, 选中直接回车 ,如下图: 3. 看到里面有很多选项, ...

  3. docker-compose 命令

    docker-compose初试及命令基础 以一个简单的lnmp.yaml的配置文件进行讲解docker-compose命令的基础讲解,熟练掌握命令 [root@docker lnmp]# cat l ...

  4. java简答题

    1.什么是java的平台无关性? Java源文件被编译成字节码的形式,无论在什么系统环境下,只要有java虚拟机就能运行这个字节码文件.也就是一处编写,处处运行.这就是java的跨平台性. 2.在一台 ...

  5. struts2把表单数据封装到实体类里

    <form method="post" action=""> <input type="text" name=" ...

  6. UWP平台Taglib编译(1)

    此文已由作者郑博授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验 最近开始开发UWP平台的App,项目需要用到Taglib进行音视频文件的标签信息读写,Google并没有现成的B ...

  7. kali linux之应用层Dos

    应用层服务漏洞: 服务代码存在漏洞,遇异常提交数据时程序崩溃 应用处理大量并发请求能力有限,被拒绝的是应用或OS 缓冲区溢出漏洞: 向目标函数随机提交数据,特定情况下数据覆盖临近寄存器或内存 影响:远 ...

  8. Ajax请求的一个重要属性contentType

    比如 contentType : 'application/json;charset=UTF-8', 或者 contentType : 'text/html;charset=UTF-8', 如果不加此 ...

  9. [ActionScript 3.0] 如何获得实例对象的类名及类

    package { import flash.display.DisplayObject; import flash.display.MovieClip; import flash.display.S ...

  10. NVIDIA | 一种重建照片的 AI 图像技术

    简评:或许可以称之为「擦擦乐」~ 建议大家看看视频示例 ~ 前几天,NVIDIA 的研究人员介绍了一种新的 深度学习 方法,使用该方法可以重建缺失像素的图像内容. 这种方法被称为「image inpa ...