点击手机按钮存在APP则唤醒否则打开应用商店

最新推荐文章于 2024-07-10 15:14:50 发布
最新推荐文章于 2024-07-10 15:14:50 发布
阅读量3k 收藏
点赞数
文章标签： javascript vscode html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62381210/article/details/124376839
版权
这段代码主要用于检查用户在Android或iOS设备上是否已安装特定应用。通过检查UserAgent来识别设备类型，然后利用定时器检测页面是否被隐藏，如果页面未隐藏且达到设定时间，则尝试打开应用。在iOS设备上，会直接跳转，而在Android设备上则在1.5秒后检查页面状态并决定是否跳转。
摘要由CSDN通过智能技术生成

js无法检测到手机上是否有安装有当前软件，延时判断当前页面是否关闭来进行判断

const openApp = () => {

var u = navigator.userAgent;

var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Linux") > -1; //g

var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端

if (isAndroid) {

window.location.href = "";

setTimeout(function () {

let hidden =

window.document.hidden ||

window.document.mozHidden ||

window.document.msHidden ||

window.document.webkitHidden;

if (typeof hidden == "undefined" || hidden == false) {

window.location.href =

"";

}

}, 1500);

}

if (isIOS) {

//iosapp

window.location.href = "";

setTimeout(function () {

let hidden =

window.document.hidden ||

window.document.mozHidden ||

window.document.msHidden ||

window.document.webkitHidden;

if (typeof hidden == "undefined" || hidden == false) {

window.location.href =

"";

}

}, 1500);

return false;

}

};

爱吃东北大酱的剧作家
关注
JS实现点击网页判断是否安装app并打开否则跳转app store
10-21
在开发和推广应用程序时...对于未安装的用户，则通过检测应用的打开协议，并利用iframe尝试打开应用，如若失败，则通过点击链接跳转至App Store下载页面。这样的处理方式不仅提升了用户体验，还优化了应用推广的效果。
在android浏览器中如果安装了app，则打开app，如果没有则跳转到应用市场下载。...
邓胤的家当
06-23 1260
这个方式也兼容ios。 先看html [code="html"] App Redirection var IS_IPAD = navigator.userAgent.match(/iPad/i) != null, IS_IPHONE = !IS_IPAD && ((navigator.userAg...
h5唤醒app
qq_36457584的博客
05-25 397
本地有app就唤醒app,没有就跳转到应用中心 var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 //这个是安卓操作
移动端前端开发问题若干踩坑
csj的前端笔记
08-05 426
1.滚动穿透问题 弹出层内容滚动时，body跟随滚动。 解决方案：https://blog.csdn.net/weixin_43921521/article/details/91434165 2.ios浏览器的input，textarea有内上边框阴影 解决方案：css样式 box-shadow:0px 0px 0px rgba(0,0,0,0); -webkit-appearance:non...
关于H5唤起某APP，未安装调起下载那些事
qq_41293573的博客
04-02 2215
需求背景 在H5页面上进行app引流。点击某个按钮时，判断用户是否已经安装某APP，若已安装，则直接打开APP；若未安装，则开始下载APP; 实际上，JS 是没有判断 APP 是否安装的方法的，那么我们只能想办法来解决这个问题了。 android端处理方案 在android端大多数是通过scheme命令直接打开APP。 首先定义好你的scheme命令已经app下载地址，如下： let schemeUrl = 'com.***.cn://***:8080/loadapp'; let downloadUrl =
DOM nodetype属性
weixin_44638167的博客
09-12 225
返回body元素的节点类型: document.body.nodeType; nodeType 属性返回节点类型。 如果节点是一个元素节点，nodeType 属性返回 1。 如果节点是属性节点, nodeType 属性返回 2。 如果节点是一个文本节点，nodeType 属性返回 3。 如果节点是一个注释节点，nodeType 属性返回 8。 该属性是只读的。 ...
visibilitychange事件在移动端开发的使用
u010007013的博客
05-20 1679
业务想要实现的效果： APP从原生或者RN页面进入h5页面，之后再跳转到其他页面，在其他页面点击返回的时候直接回到原生或RN页面，不要再回到中间过渡的H5页面。 我开始的是h5跳转到其他页面之前关闭当前的webview,但是这样的效果不好。 后来我使用了visibilitychange来触发，当从其他页面返回这个h5页面的时候document.hidden会变成false,这时再关闭webview。 代码如下： mounted() { window.document.addEventListener('
Android如何跳转到应用商店的APP详情页面
01-20
它的目的是根据给定的信息，启动一个能打开特定应用商店中对应APP详情页面的Intent。 1. **构建Intent**： 使用`Uri.parse()`方法创建一个指向应用商店的URI。这里的URI格式是`market://details?id=<包名>`，其中`...
手机app应用商店网站模板
04-02
手机App应用商店网站模板是为在线展示、推广和下载手机应用程序设计的一种网页模板。这种模板通常包含各种元素和功能，旨在提供用户友好的界面，帮助用户轻松浏览、搜索、下载和管理他们感兴趣的应用程序。在设计和...
下载App应通过正规手机应用商店.pdf
08-26
下载App应通过正规手机应用商店.pdf
H5页面唤起指定app，有就唤起，没有则跳转下载页
caimingxian401的博客
10-25 9575
点击按钮，当已经安装了app则调起，否则跳转到应用宝或者App store下载页面（普通浏览器兼容，微信有权限限制，只能每次跳转下载页） &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=de
页面可见性判断：document.hidden与visibilitychange事件
人生不迷茫的博客
07-19 5881
https://www.cnblogs.com/yangshifu/p/9299231.html hidden和visibilieyState属性 hidden与visibilityState均为document的只读属性。 其中document.hidden的值是一个布尔值，表示标签页的显示或隐藏。 而document.visibilityState相对详细一些，目前有四个可能的值： visib...
js 怎样判断用户是否在浏览当前页面
weixin_30526593的博客
01-24 1042
有些时候我们需要在项目中判断用户是否在浏览当前页面，或者当前页面是否处于激活状态。然后再进行相关的操作。浏览器中可通过window对象的onblur、onfocus判断，或者document的hidden属性判断。 1、window.onblur & window.onfocus 关于是否失焦点，浏览器对象有onfocus和onblur事件可以监听。但是触发这两个事件的前...
window对象监听浏览器页签之间的切换状态；前端监听浏览器切换页签的触发时机
最新发布
weixin_43996999的博客
07-10 596
window对象监听浏览器页签之间的切换状态记录两种办法。window对象监听浏览器页签之间的切换状态；前端监听浏览器切换页签的触发时机。
H5知识储备
iBenxiaohai123的博客
12-12 268
1.网络状况API 网络状态 API 可以获取到系统的网络连接信息，比如说连接方式是 WiFi 还是蜂窝。应用程序可以根据此信息为用户展现不同清晰度的内容。该 API 是由 NetworkInformation 接口和 Navigator 接口上新增的一个 connection 属性组成的。 侦测连接状态变化 下面是一个侦测用户设备连接状态变化的例子。 var connection = ...
H5跳转APP
weixin_49261425的博客
01-18 451
// 微信内 if(isWeixin) { alert('请在浏览器上打开') } else { //android端 if (isAndroid) { //安卓app的scheme协议 window.l...
js判断浏览器当前标签页是否激活（document.hidden）
weixin_45759839的博客
03-17 5455
无意间发现爱奇艺广告播放时间居然是在当前标签页激活的时候才会进行倒计时，离开当前标签页的时候，倒计时停止，百度一下发现document.hidden这个东东。 document.hidden是h5新增加api使用的时候有兼容性问题。 var hidden if (typeof document.hidden !== "undefined") { hidden = "hidden"; } e...
H5 判断页面是否处于前台
yichen454的博客
12-27 1913
平时制作H5互动时会有页面切出去需要关闭音乐或者暂停进度的需求，此段代码可用于浏览器页面是否处于前台的判断。此处用了数组承载监听事件是为了多个组件使用的情况，可自行封装成订阅或注册模式。 源码如下： window.pageShowCbList = []; window.pageHideCbList = []; window.onload = () => { pageShowOrHide( () => { for (var i = 0; i &lt
H5唤起 uniapp 版的app 端
艾米的猫儿的博客
08-31 7511
vue H5唤起本地的 app，很好用
let switchCtn = document.querySelector("#switch-cnt"); let switchC1 = document.querySelector("#switch-c1"); let switchC2 = document.querySelector("#switch-c2"); let switchCircle = document.querySelectorAll(".switch_circle"); let switchBtn = document.querySelectorAll(".switch-btn"); let aContainer = document.querySelector("#a-container"); let bContainer = document.querySelector("#b-container"); let allButtons = document.querySelectorAll(".submit"); let forgotPassword = document.querySelectorAll(".Forgot_password"); let getButtons = (e) => e.preventDefault() let changeForm = (e) => { // 修改类名 switchCtn.classList.add("is-gx"); setTimeout(function () { switchCtn.classList.remove("is-gx"); }, 1500) switchCtn.classList.toggle("is-txr"); switchCircle[0].classList.toggle("is-txr"); switchCircle[1].classList.toggle("is-txr"); switchC1.classList.toggle("is-hidden"); switchC2.classList.toggle("is-hidden"); aContainer.classList.toggle("is-txl"); bContainer.classList.toggle("is-txl"); bContainer.classList.toggle("is-z"); } // 点击切换 let shell = (e) => { for (var i = 0; i < allButtons.length; i++) allButtons[i].addEventListener("click", getButtons); for (var i = 0; i < switchBtn.length; i++) switchBtn[i].addEventListener("click", changeForm) for (var i = 0; i < forgotPassword.length; i++) forgotPassword[i].addEventListener("click", changeForm) } window.addEventListener("load", shell);这段代码意思
06-08
这段代码是一个 JavaScript 脚本，用于实现一个登录界面的切换效果。具体来说，它包括以下几个功能： 1. 定义了一些变量，如 switchCtn，switchC1，switchC2 等，用于获取 HTML 页面上的一些元素。 2. 定义了两个函数，getButtons 和 changeForm，分别用于处理点击按钮和切换登录界面的逻辑。 3. 定义了一个 shell 函数，用于在页面加载完成后执行一些初始化操作，如为按钮添加点击事件监听器。 4. 最后，通过添加事件监听器，将 shell 函数绑定到 window 对象的 load 事件上，以在页面加载完成后自动执行。 总体来说，这段代码的作用是实现一个登录界面的切换效果，用户可以通过点击按钮或者忘记密码链接来切换不同的登录界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值