H5跳转app代码
不罗嗦直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<title>Document</title>
<script src="./jquery-3.2.1/jquery-3.2.1.min.js"></script>
</head>
<body>
<div class="box">
<img id="btn" src="./images/750-1280.jpg"></img>
</div>
<style>
html,body,.box{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
img{
width: 100%;
height: 100%;
}
</style>
<script>
function detectVersion() {
let isAndroid,isIOS,isIOS9,version,
u = navigator.userAgent,
ua = u.toLowerCase();
if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) { //android终端或者uc浏览器
//Android系统
isAndroid = true
}
if(ua.indexOf("like mac os x") > 0){
//ios
var regStr_saf = /os [\d._]*/gi ;
var verinfo = ua.match(regStr_saf) ;
version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
}
var version_str = version+"";
if(version_str != "undefined" && version_str.length >0){
version = parseInt(version)
if(version>=8){
// ios9以上
isIOS9 = true
}else{
isIOS = true
}
}
return {isAndroid,isIOS,isIOS9}
} // 判断手机上是否安装了app，如果安装直接打开url，如果没安装，执行callback
function openApp(url,callback) {
stopDefault()
let {isAndroid,isIOS,isIOS9} = detectVersion()
if(isAndroid || isIOS){
var timeout, t = 4000, hasApp = true;
var openScript = setTimeout(function () {
if (!hasApp) {
callback && callback()
}
document.body.removeChild(ifr);
}, 5000) 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 (t2 - t1 < t + 100) {
hasApp = false;
}
}, t);
}
if(isIOS9){
// window.location.href = url;
setTimeout(function() {
callback && callback()
}, 1000);
setTimeout(function() {
location.reload();
}, 2000);
}
} //跳转h5网站
function goConfirmAddr(){
window.location.href = 'https://m.tb.cn/h.3Fe5mRA?sm=6f43f6'
stopDefault()
}
function stopDefault(e) {
if (e && e.preventDefault) {
e.preventDefault();//防止浏览器默认行为(W3C)
} else {
window.event.returnValue = false;//IE中阻止浏览器行为
}
return false;
}
//配置对应图片大小
function getWidthAndHeight(){
console.log(window.innerHeight + "，" +window.innerWidth+','+window.screen.height);
var num = window.innerWidth/window.innerHeight;
let {isAndroid,isIOS,isIOS9} = detectVersion()
if(isAndroid) {
$('#btn').attr("src","./images/1080-1601.jpg");
}else{
switch(window.screen.height){
case 736:
$('#btn').attr("src","./images/720-1062.jpg");
break;
case 667:
$('#btn').attr("src","./images/1080-1844.jpg");
break;
case 568:
$('#btn').attr("src","./images/750-1280.jpg");
break;
case 812:
$('#btn').attr("src","./images/1080-1844.jpg");
break;
default:
$('#btn').attr("src","./images/1242-1786.jpg");
}
}
}
window.onload = function(){
getWidthAndHeight()
//3秒内点击多次只执行一次
var checkClick = false;
$('#btn').click(function() {
if(checkClick === true) {
return false
}
openApp("taobao://m.tb.cn/h.3Fe5mRA?sm=6f43f6",goConfirmAddr)
checkClick = true;
setTimeout(function(){
checkClick = false
},3000)
});
}
</script>
</body>
</html>
H5跳转app代码的更多相关文章
- iOS H5页面打开APP技术总结
iOS端H5页面打开APP的方式目前主要有两种:URL Scheme和Universal Links.其中Universal Links是iOS9.0以后推出的一种新的方案,由于它需要在iOS9.0以 ...
- 基于mui的H5套壳APP开发web框架分享
前言 创建一个main主页面,只有主页面有头部.尾部,中间内容嵌入iframe内容子页面,如果在当前页面进行跳转操作,也是在iframe中进行跳转,而如果点击尾部按钮切换模块.页面,那就切换ifram ...
- APP跳转小程序，小程序跳转APP
关注公共号,搜索 "APP跳转小程序,小程序跳转APP",查看原文 前置条件: 开发环境:windows 开发框架:uni-app , H5+,nativeJS,mpvue 编辑器 ...
- iOS 7 新版微信 URL 不支持跳转 App Store 的解决方案
今天早上刚到公司,就收到反馈说公司前端页面的下载按钮在 iOS 7 的微信内置浏览器里面点击无效,经过确认之后,前端代码是正常的,问题出在了微信上,然后谷歌之,原来腾讯在***. 是 BUG 还是刻意 ...
- H5+混合移动app应用开发——开篇
前言 经过2个多月的艰苦奋斗,app的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程.不要问我有多坑,我会告诉你很多,很多..... 过去一直从事.ne ...
- vue打包app嵌入h5，区分app进入和android，ios显示不同的下载链接
vue打包app嵌入h5,区分app进入和android,ios显示不同的下载链接 需求:自己app打开的登录页面不显示app下载链接.其他地方打开判断android手机的跳转到android下载页链 ...
- 简话h5唤起本地app
在没接触这个功能之前,查询各种文档后也只是似懂非懂,做过之后,发现其实很简单,简言之就是通过一个iframe或者a标签来跳转app端提供的URL schema(至于这个URL schema的组成格式, ...
- 手机浏览器跳转APP
背景 对于APP来说,回流分享页是最好的最便宜的也是最病毒式的拉新方式.让新用户去下载APP是重要的.对老用户来说,可以直接调起APP也是提升用户体验和让用户有侵入式体验的重要手段.所以我们一起来看看 ...
- 前端判断是否APP客户端打开触屏，实现跳转APP原生组件交互之遐想
今天做了一个html的活动页面,本来马上就要完工,准备开开心心收尾,结果~... 产品突然提出需要说,要讲html中的某些交互和APP原生组件挂钩,心里一万头xxx奔过~ 静下心来思考 以往我们是判断 ...
随机推荐
- 通过f5的默认路由使服务器上网
1.通过f5的默认路由使服务器上网 1)将服务器的默认网关指到f5的floating ip 2)f5上配置
- dedecms不能保存jpeg格式图片的解决方法
方法如下: 进入织梦的后台管理目录,默认是dede文件夹,找到/inc/inc_archives_functions.php文件. 在文件里查找gif|jpg|,我找到了4个, 在它们后面加jpeg的 ...
- [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(2)
[源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(2) 目录 [源码分析] Dynomite 分布式存储引擎 之 DynoJedisClient(2) 0x00 摘要 ...
- The 2019 ICPC Asia Shanghai Regional Contest H Tree Partition k、Color Graph
H题意: 给你一个n个节点n-1条无向边构成的树,每一个节点有一个权值wi,你需要把这棵树划分成k个子树,每一个子树的权值是这棵子树上所有节点权值之和. 你要输出这k棵子树的权值中那个最大的.你需要让 ...
- 【uva 1515】Pool construction（图论--网络流最小割 模型题）
题意:有一个水塘,要求把它用围栏围起来,每个费用为b.其中,(#)代表草,(.)代表洞,把一个草变成洞需要费用d, 把一个洞变成草需要费用f.请输出合法方案中的最小费用. 解法:(不好理解...... ...
- 【noi 2.6_9277】Logs Stacking堆木头（DP）
题意:给出在最底层的木头的个数,问有多少种堆放木头的方式.要求木头必须互相挨着在一起. 解法:f[i]表示最底层i个木头的堆放木头的方式.注意递推的思想!只需知道上一层堆放0~i-1个(即最底层堆放i ...
- hdu 6814 Tetrahedron 规律+排列组合逆元
题意: 给你一个n,你需要从1到n(闭区间)中选出来三个数a,b,c(可以a=b=c),用它们构成一个直角四面体的三条棱(可看图),问你从D点到下面的三角形做一条垂线h,问你1/h2的期望 题解: 那 ...
- 洛谷 P2895 [USACO08FEB]Meteor Shower S (BFS)
题意:你刚开始位于坐标轴的\((0,0)\)点,一共有\(m\)颗流星砸向地面,每颗流星在\(t\)时砸到\((x,y)\)点,其四周上下左右也均有波及,你每秒可以向上下左右移动一个单位,问你是否可以 ...
- C# TCP应用编程三 异步TCP应用编程
利用TcpListener和TcpClient类在同步方式下接收.发送数据以及监听客户端连接时,在操作没有完成之前一直处于阻塞状态,这对于接受.发送数据量不大的情况或者操作勇士较短的情况下是比较方便的 ...
- Win10 Nodejs搭建http-server注意点
下载安装,并用命令行查看版本:如果提示输入命令找不到等,可能是没有安装成功,或者是环境变量引起的: 如果在提示安装不成功可能是win10权限问题,最好使用管理员模式运行cmd,再用cmd命令打开安装文 ...