H5页面跳转链接禁止唤起App

最新推荐文章于 2023-08-16 11:50:57 发布
原创 最新推荐文章于 2023-08-16 11:50:57 发布 · 702 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #vue

文章描述了一种特殊的需求，即阻止H5页面打开时唤起应用程序，而是单纯地进行页面跳转。通过在链接外层嵌套iframe并设置点击事件及路由跳转，成功实现了这一功能。在项目中新增了一个文件夹来处理iframe的跳转，并在路由配置中添加了相应规则。经过测试，这种方法被证明是可行的。

一般需求都是点击H5页面链接跳转之后唤起App,但是这次做的一个功能是禁止唤起App,仅仅实现页面跳转展示H5页面.

具体实现方式如下:  在跳转链接的外层嵌套一个iframe即可实现

代码实现:

1.设置点击事件

 2.路由跳转并传参,path为跳转地址

 3.新增一个文件夹,设置iframe跳转(记得在路由router中添加)

 最后经过测试,完全可行.记此篇文章

uniapp(H5移动端) - 实现h5页面唤起app功能，点击按钮判断本机是否已安装APP，如果安装则跳转打开第三方应用app，反之未安装则跳转下载页面或下载地址，uniApp实现h5页面唤醒app
高级前端工程师
05-07 4701
uniapp，H5如何实现唤起APP，uniApp实现h5页面唤醒app，微信H5唤起App解决方案，H5唤起APP指南，h5唤醒app详细教程，H5唤起地图导航总结，uniapp移动端跳转到APP指定页面的实现，微信通过页面(H5)直接打开本地app，H5页面唤醒App(安卓+ios)h5唤醒APP,如果未下载跳转下载页,如果已下载唤醒APP，微信通过页面(H5)直接打开本地app，uniapp h5页面中打开app和微信环境打开app功能，跳转时一闪而过打开失败，app唤起没反应怎么办，打开第三方app
uniapp - 实现移动端H5网页唤起APP流程及示例代码，uniApp实现h5页面唤醒app功能，如何实现点击按钮跳转打开本机第三方应用和检测打开外部应用（兼容安卓android+苹果ios系统）
🏆 前端领域优质创作者
05-07 1万+
uniapp，手机h5网页平台端，微信公众号h5，H5如何实现唤起APP，h5唤起App方案，微信内H5页面唤醒App，通过h5页面跳转至对应的app页面，h5网页检测手机是否安装了app，uniapp h5页面唤醒app，H5界面打开唤醒移动端APP应用程序，uniapp H5唤起手机App中间下载页，唤起页面没反应，ios无法打开外部应用，解决H5页面无法直接唤起App，跳转没反应也不报错，h5页面唤醒app如果手机没有此app跳转到下载页，H5跳转APP无效没反应，H5跳转APP为什么跳转不了，sch
问题：h5页面唤起App，有则打开，否则跳转下载地址，怎么处理
_淘淘子的博客
06-22 1762
遇到的问题： 公司的App产品，在运营推广上有一个需求。要求可以让用户在访问我们的推广网页时，可以判断出这个用户手机上是否安装了我们的App。如果安装了则可以直接在手机上打开，否则就前往下载。从而形成一个推广上的闭环。 解决思路： 想通过iframe的方式试图打开APP，如若不行则用window.location的方法解决​​​​​​​。 对于点击链接后，能否直接打开，可以通过下面的代码来...
百度浏览器Android6.0,有些安卓机型百度浏览器h5唤起app失效
weixin_29112009的博客
05-30 1045
安卓用的ifarme方法`var ifr = document.createElement("iframe");vart1=newDate().getTime();document.body.appendChild(ifr);ifr.setAttribute('style','display:none');ifr.setAttribute('src...
H5唤起高德、百度、腾讯地图导航（微信浏览器不能用）uniapp,微信小程序请用 wx.openLocation()
weixin_43962877的博客
08-16 2854
【代码】H5唤起高德、百度、腾讯地图导航（微信浏览器不能用）uniapp。
H5页面唤起指定app，有就唤起，没有则跳转下载页
caimingxian401的博客
10-25 9791
点击按钮，当已经安装了app则调起，否则跳转到应用宝或者App store下载页面（普通浏览器兼容，微信有权限限制，只能每次跳转下载页） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=de
h5页面唤起app(iOS和Android),没有安装则跳转下载页面
热门推荐
m0_38073829的博客
06-30 2万+
由于研究了之后，和同事沟通，找到一个地址进入，分别测试不同手机，机型，安卓进入安卓应用商店，ios进入app store ；所以直接贴了一个链接，即可。 下面方法，暂时没用到，分享给需要的盆友。 COPY的方法如下，参考：------------------------------------------------ 浏览器和app没有通信协议，所以h5不知道用户的手
h5页面跳转微信小程序（最简单的方法-URL Scheme）
12-21
H5页面跳转微信小程序的需求是普遍存在的。由于微信小程序是一种只能在微信内部访问的应用程序，而H5页面可以在任何浏览器中访问，因此需要通过跳转来实现两者之间的衔接。 对于用户来说，H5页面跳转微信小程序可以...
微信通过页面(H5)直接打开本地app的解决方法
08-29
微信通过页面(H5)直接打开本地app是指微信用户在微信中点击链接，直接打开已经安装在本地的app，而不是打开微信浏览器中的H5页面。这种方式可以提高用户体验，减少用户的操作步骤。下面将详细介绍微信通过页面(H5)...
在H5页面中跳转到地图App,或者在本地App中加载的H5页面跳转到地图App，唤起App进行导航
最新发布
08-19
在H5页面中实现跳转到地图App或在本地App加载的H5页面中唤起地图App进行导航，可以通过URL Scheme或Universal Links的方式实现。不同地图App（如高德地图、百度地图）提供了相应的协议格式，开发者可以根据需求构造...
详解如何通过H5（浏览器/WebView/其他）唤起本地app
01-19
前两天接到一个无线的需求，我这个小白可是忙活了好几天……在页面上有一个连接， 如果用户安装了APP，则点击打开对应的APP如果用户没有安装，则点击打开对应的设置连接.上网搜索了一下，基本都说可以实现，但是实际情况却不乐观. 当然只是其中的一个需求，还有的是现在各类app，分享出去的H5页面中，一般都会带着一个立即打开的按钮，如果本地安装了app，那么就直接唤起本地的app，如果没有安装，则跳转到下载。这是一个很正常的推广和导流量的策略，最近产品经理就提出了这样的一个需求，做一个像今日头条功能一样的带打开app的下载条等等，其他的就不说了！ 下面进入我们今天的正题，H5如何打开或者说唤起手机本地
app唤起的完美解决方案，及阻止浏览器的默认弹窗行为
weixin_30770783的博客
05-30 2971
https://stackoverflow.com/questions/10237031/how-to-open-a-native-ios-app-from-a-web-appvar frame = document.createElement('iframe'); frame.src = 'myapp://?params=...'; frame.style.displ...
Android WebView加载H5页面，H5页面使用URL Scheme唤起APP失败
Fantasy
12-20 6841
最近遇到了一个问题，H5页面使用URL Scheme唤起第三方APP，在手机浏览器已经测试通过了，但是在APP里面，却失败了。 本篇文章不介绍如何使用URL Scheme唤起APP，如果想知道的朋友，可以查看下列文章： Android URL Scheme Android 利用scheme协议进行跳转 qq. 微信分享出去的页面。如何唤起app，调到指定的页面 回归正题，我们...
H5页面唤起指定app,否则跳转到应用市场
gjjxfhk的博客
10-17 1135
协议（由app端小伙伴提供，关于什么是scheme文末补充），但是在微信浏览器里scheme不起作用，有没有印象有时在微信上打开的一些需要跳转到app的操作时，会提示在浏览器上打开，就是这个原因。在 h5 页面上，用户点击打开app按钮，在用户手机上已经安装了App时，打开app，否则就引导用户前往应用市场。所以需要先判断是否为微信浏览器，是微信浏览器的话，提示到浏览器打开，不是的话，再判断是Android端还是iOS端，然后做相应的处理。*H5页面点击锚点，根据锚点具体跳转路径APP端跳转具体的页面;
H5网页在浏览器中唤起app怎么实现？
weixin_49403297的博客
08-04 2659
借助Deeplink，实现从H5快速跳转到App 在移动端，Deeplink可以实现从H5页面直接跳到App指定页面的功能。比如你可以把一个H5页面在应用程序中分享给微信朋友，好友点击此链接就可以直接打开相应的App详细信息，而非App首页。如果朋友没有下载App，那么将跳转到App下载页面，并且在安装启动之后仍然可以跳转到App指定的页面。这可以极大地缩短用户的使用路径，降低用户的流失率。所以Deeplink的功能被广泛应用于众多的行业应用场景中，所以Deeplink的功能被广泛应用于众多的行业应用场景中
H5 如何实现唤起 APP
时清云的博客
04-06 2529
写过hybrid的同学，想必都会遇到这样的需求，如果用户安装了自己的APP，就打开APP或跳转到APP内某个页面，如果没安装则引导用户到对应页面或应用商店下载。这里就涉及到了H5与Native之间的交互，为什么H5能够唤起APP并且跳转到对应的页面？就算你没写过想必也体验过，最常见的就是一些广告了，如果你点击了广告，他判断你手机装了对应APP，那他就会去打开那个APP，如果没安装，他会帮你跳转到应用商店去下载，这个还算人性化一点的，有些直接后台给你去下载，你完全无感知。
微信H5页面点击直接跳转app-微信开放标签
weixin_43522687的博客
07-28 5764
开发微信H5项目时，需要从h5直接跳转至app，绞尽脑汁调研一番后，发现微信开放标签能实现，but环境配置和测试流程真的很复杂，真的配置四小时，开发仅需30分钟，经过不断踩坑终于上线，踩过的坑都给你们总结出来啦，如果能帮助到你，帮忙点赞收藏关注一下吧。微信开放标签https//developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html。把线上地址代理到测试地址。尽量多输出错误log信息判断是哪里出错。.........
微信环境下h5与小程序跳转app的陷阱
欢迎来到☆槿畔☆的博客
01-19 8572
2022年微信环境下跳转app解决方案，包含小程序和h5两种全套方案集合，目前百度出来的内容比较老套，微信也是更新了很多次文档，看这里。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值