app内嵌vue h5,安卓和ios拦截H5点击事件

时间:2023-01-11 09:15:46

安卓和ios拦截h5点击事件,这个函数事件必须是暴漏在window下的

安卓和ios拦截普通h5函数:

 <div onclick = "show(),window.android.show()"></div>
<script>
function show(){
      //如果需要传值,可以在show里添加参数,在上面的点击事件中直接进行传值就好
alert(1)
}
</script>

vue函数并没有直接暴漏在window下,vue的点击事件为@click,所以上面写法App方是拦截不到的

安卓和ios拦截vue点击事件:

<div id="box" @click="show('aaaa'),window.android.show('aaaa')"></div>  //括号内为传参内容,第一个show是为ios传值,点击的时候触发了在window里定义的函数,ios直接拦截到zhi这个函数,安卓可以直接拦截到vue里定义的函数
<script src="vue.js"></script>
<script>
function zhi(a){ //定义一个暴漏给window的函数,放在点击事件中,ios拦截函数是拦截的这个暴漏给window的函数
console.log(a)
}
new Vue({
el:"#box",
data:{ },
methods:{
show:function(a){
zhi(a); //a为一个参数,可以进行给ios和安卓进行传值
alert(1);
}
}
})
</script>
//和Android、ios交互的时候,给安卓的拦截字段为show,给ios拦截的字段为zhi

app内嵌vue h5,安卓和ios拦截H5点击事件的更多相关文章

  1. 用vue做app内嵌页遇到的坑

    公司要求用vue做一个微信端的网站,其中还包含一些app的内嵌页.开始的时候没想那么多,就直接用vue-cli搭了一个单页的vue项目,可随着项目越做越大,页面越来越多,问题就开始暴露出来了. 众所周 ...

  2. 使用Chrome开发者工具调试Android端内网页&lpar;微信,QQ,UC,App内嵌页等&rpar;

    使用Chrome开发者工具调试Android端内网页(微信,QQ,UC,App内嵌页等) 前言 移动端页面调试一直是好多朋友头疼的问题,iOS 由于其封闭的特性和整体较高的性能,整体适配相对好做,调试 ...

  3. 移动端开发利器vConsole&period;js&comma;app内嵌H5开发时调试用

    vConsole:一个轻量.可拓展.针对手机网页的前端开发者调试面板,主要还是用于内嵌app页面时在手机上进行调试,打印完全和在PC端一样,方便大家找出问题所在. 不说废话直接进入主题,vConsol ...

  4. app内嵌web的一些问题记录

    问题(1)webview里面出现大图预览,点击手机上的返回,应该是图片预览消失 问题(2)键盘输入的时候,键盘会把输入框遮挡 ------------------------------------- ...

  5. 客户端内嵌Vue页面

    目前很多应用都存在网页端和客户端形式,例如常用的:钉钉.微信等.按传统的开发形式,需要为客户端开发一套界面.基于当前Web应用可以利用三大前端框架和UI框架快速开发出各种酷炫的界面,于是出现了客户端嵌 ...

  6. 记录Vue和Jquery混合开发中关于点击事件的一个bug

    最近比较急的接手了公司的微信服务号项目,采用的技术栈主要是jq和vue.在项目中之前碰见过jq写的$().on('click',function(){})点击事件不起作用,只能写在vue实例中的met ...

  7. IOS微信浏览器点击事件不起作用问题

    问题: $(document).on("click",".btn",function(){alert("1")}); 在微信浏览器上点击不起 ...

  8. ios下app内嵌h5页面是video适配问题

    ios下做新闻详情用h5页面实现然后打包到app中,其中新闻详情页会有视频,安卓下video的poster可以做到适应video大小,但是ios下会按照poster图片大小将video等比撑大,但是视 ...

  9. app内嵌h5页面在ios手机端滑动卡顿的解决方法

    1.带滚动条的dom需加样式 -webkit-overflow-scrolling: touch;2.去掉 width:100%; height:100%

随机推荐

  1. Filter Conditions 过滤条件

    <pre name="code" class="html">Filter Conditions 过滤条件: Rsyslog 提供4种不同类型的&qu ...

  2. HTML5 Canvas图像放大、移动实例1

    1.前台代码 <canvas id="canvasOne" class="myCanvas" width="500" height=& ...

  3. gcc&sol;g&plus;&plus;&sol;make 编译信息带颜色输出

    假设编译一个项目错误警告太多.很不好找,所以很希望输出信息能够带有颜色. 但是 gcc 4.9.0 之前的版本号并不支持,非常多情况下是不能替换编译器的,比方使用交叉编译器, 也能够使用 colorg ...

  4. 解决Hibernate中不同包内有形同实体导致映射失败的问题

    报错代码如下: Caused by: org.hibernate.DuplicateMappingException: duplicate import: Engin refers to both t ...

  5. hdu 1026 Ignatius and the Princess I【优先队列&plus;BFS】

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1026 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  6. mysql的 charset、collation、prefix了解

    charset,即字符集. collation,用于指定数据集如何排序,以及字符串的比对规则,即排序规则. prefix,即数据库里表使用的前缀. /************************* ...

  7. &lbrack;HNOI2008&rsqb;越狱

    题目描述 *有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多少种状态可能发生越狱 输入输出格式 输入 ...

  8. redis初始化服务器

    从启动 Redis 服务器, 到服务器可以接受外来客户端的网络连接这段时间, Redis 需要执行一系列初始化操作. 整个初始化过程可以分为以下六个步骤: 初始化服务器全局状态. 载入配置文件. 创建 ...

  9. python day02作业

  10. 项目从&period;NET 4&period;5迁移到&period;NET 4&period;0遇到的问题

    当把项目从.NET 4.5迁移到.NET 4.0时,遇到的问题和解决如下: 在"属性--应用程序--目标框架"设置成.NET 4.0版本. 重新生成项目,报有关EF的错: 卸载掉项 ...