备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

移动端H5中JS调用原生接口的原理总结（JSBridge）

2019-02-19 4601
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： JS调用android接口的原理:1. H5中的JS发起请求，在android的WebViewClient.shouldOverrideUrlLoading方法中拦截URL请求，判断是否为接口调用2.

JS调用android接口的原理:

1. H5中的JS发起请求，在android的WebViewClient.shouldOverrideUrlLoading方法中拦截URL请求，判断是否为接口调用

2. android通过webView.addJavascriptInterface方法向windows对象中注入原生代码,然后H5在JS中调用相应的方法

3. 选择prompt,console.log,alert等方法作为通信的接口


JS调用IOS接口的原理

UIWebView的delegate函数拦截jsbridge://开头的请求

文章标签：
Android开发
Windows
JavaScript
移动开发
iOS开发
关键词：
JavaScript原生
JavaScript原理
JavaScript接口
h5 JavaScript
JavaScript h5
1331032185973201
目录
相关文章
你挚爱的强哥
|
11天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
你挚爱的强哥
11 0
尘尘尘尘
|
1月前
|
自然语言处理 JavaScript 前端开发
探索JavaScript中的闭包：理解其原理与实际应用
探索JavaScript中的闭包：理解其原理与实际应用
尘尘尘尘
19 0
m0_黎明
|
2月前
|
JavaScript
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
原生js实现复选框（全选/全不选/反选）效果【含完整代码】
m0_黎明
44 1
你挚爱的强哥
|
11天前
|
JavaScript 算法
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
原生JS完成“一对一、一对多”矩形DIV碰撞检测、碰撞检查，通过计算接触面积(重叠覆盖面积)大小来判断接触对象DOM
你挚爱的强哥
25 1
远近高低各不同
|
1月前
|
JavaScript
JS数组增删方法的原理，使用原型定义
JS数组增删方法的原理，使用原型定义
远近高低各不同
21 1
你挚爱的强哥
|
11天前
|
JavaScript
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
【归总】原生js操作浏览器hash、url参数参数获取/修改方法合集
你挚爱的强哥
13 0
远近高低各不同
|
1月前
|
JavaScript
JS中call()、apply()、bind()改变this指向的原理
JS中call()、apply()、bind()改变this指向的原理
远近高低各不同
14 0
阿珊和她的猫
|
1月前
|
JavaScript 前端开发 API
Vue.js 深度解析：nextTick 原理与应用
Vue.js 深度解析：nextTick 原理与应用
阿珊和她的猫
30 0
C哩C哩li
|
2月前
|
缓存 JavaScript 前端开发
深入理解Vue.js 3中的响应式原理与使用技巧
【2月更文挑战第1天】Vue.js 3作为一款流行的前端框架，其核心特性之一是响应式数据绑定。本文将深入探讨Vue.js 3中的响应式原理，包括Reactivity API的设计思路和实现原理，并结合实际案例介绍在项目中如何有效地利用Vue.js 3的响应式特性。通过本文的学习，读者将更加全面地理解Vue.js 3的内部工作原理，提升在前端开发中的实践能力。
C哩C哩li
74 2
技术混子
|
2月前
|
JavaScript 前端开发 开发者
深入探讨前端框架Vue.js的数据绑定原理
在前端开发中，数据绑定是Vue.js框架的核心特性之一，它实现了视图与数据的双向绑定，极大地提高了开发效率和用户体验。本文将深入探讨Vue.js数据绑定的原理，从响应式数据、依赖追踪到虚拟DOM等方面进行详细分析，帮助读者更好地理解Vue.js框架的工作机制。
技术混子
23 0

热门文章

最新文章

  • 1
    JavaScript基础语法（codewhy版本）（一）
  • 2
    JavaScript的正则表达式实现邮箱校验
  • 3
    生成X-Bogus的js代码，通过python调用生成
  • 4
    使用Selenium执行JavaScript脚本：探索Web自动化的新领域
  • 5
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
  • 6
    纯前端JS实现人脸识别眨眨眼张张嘴案例
  • 7
    详解《基于 javascript 的流程图编辑框架LogicFlow
  • 8
    在Blazor中使用Chart.js快速创建图表
  • 9
    js数组常用的方法汇总
  • 10
    设置WebStorm像VSCode一样每行代码结尾自动格式化加入“；”分号（JavaScript、TypeScript格式化）
  • 1
    监控内网电脑软件设计与实现：基于Node.js的服务器端架构分析
    90
  • 2
    Java Script 中的垃圾回收机制有哪些缺点
    13
  • 3
    描述 JavaScript 中的垃圾回收机制。
    17
  • 4
    如何使用 JavaScript 操作 DOM？
    13
  • 5
    解释 JavaScript 中的`map()`、`filter()`和`reduce()`方法的用途。
    19
  • 6
    JavaScript 中的数组方法有哪些？
    10
  • 7
    JS设置日期为0时0分0秒
    26
  • 8
    JavaScript随手笔记 --- 对数据进行判断最大位数是否超过八位
    24
  • 9
    JavaScript随手笔记 --- 用正则表达式匹配字符串是否为运算公式
    19
  • 10
    深入理解JavaScript中的闭包与作用域链
    8

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程
  • Vue.js 入门与实战
  • jQuery开发教程

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 搭建Node.js编程环境
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云oss简介和使用流程