一篇文章理解什么是JS Bridge

最新推荐文章于 2023-05-31 22:44:55 发布
最新推荐文章于 2023-05-31 22:44:55 发布
阅读量253 收藏
点赞数
文章标签： javascript html dreamweaver Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/superherooooss/article/details/129731142
版权

JS Bridge解释

  • JS无法直接调用native API

  • 需要通过一些特定的 “格式” 来调用

  • 这些 “格式” 就统称为 JS Bridge，例如微信JS-SDK

如图所示

javascript 网页开发中进行一些api调用

JSBridge 进行一些封装

Native 提供一些执行能力

常见实现方式

  • 注册全局API (不适用于异步的情况)

  • URL Scheme (适用于所有情况)

<!DOCTYPE html>
<htmllang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"content="IE=edge">
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>JS Bridge</p>
​
    <script>
        // 封装JS-Bridge
        const sdk= { 
            invaoke(url,data={},onSuccess,onError){
                const iframe=document.createElement('iframe')
                iframe.style.visibility='hidden';
                document.body.appendChild(iframe);
                iframe.onload= ()=>{
                    const content = iframe.contentWindow.document.body.innerHTML
                    onSuccess(JSON.parse(content))
                    iframe.remove()
                }
                iframe.onError=()=>{
                    onError()
                    iframe.remove()
                }
                iframe.src=`my-app-name://${url}?data=${JSON.stringify(data)}`
            },
            fn1(data,onSuccess,onError){
                this.invaoke('api/fn1',data,onSuccess,onError)
            }
        }
    </script>
</body>
</html>
Mr.怪兽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
移动混合开发中的 JSBridge
lovenjoe的专栏
11-02 2万+
来源：https://mp.weixin.qq.com/s/I812Cr1_tLGrvIRb9jsg-A 【导读】关于 JSBridge，绝大多数同学最早遇到的是微信的 WeiXinJSBridge（现在被封装成 JSSDK），各种 Web 页面可以通过 Bridge 调用微信提供的一些原生功能，为用户提供相关的功能。其实，JSBridge 很早就出现在软件开发中，在一些桌面软件中很早就
2024年JSBridge原理解析——以WebviewJavascriptBridge实现方式为例，kotlin面试题
最新发布
2401_84446963的博客
05-10 670
根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】html5 / css3 学习笔记JavaScript 学习笔记Vue 学习笔记（4）继续判断，如果是 isQueueMessageURL，那么这就是个处理消息的回调，需要执行一些消息处理的方法（第四步会详细讲）推荐一些系统学习的途径和方法。每个Web开发人员必备，很权威很齐全的Web开发文档。
JsBridge基本用法
u012902406的博客
07-26 5382
前言 现在流行Hybrid App，即混合开发,也就是半原生半Web的开发模式,有跨平台运行效果,当然了,实质最终发布的仍然是独立的原生APP(各种的平台有各种的SDK),但是相比原生APP，性能仍然有较大的损耗，不适合交互性强或者性能要求较高的APP（比如动画较多的），JSBridge是H5与Native通信的桥梁 现有的库：https://github.com/marcuswestin/W...
JsBridge学习笔记
Dengzm94
09-16 503
Hybrid App背景 App开发工程师实在Google推出了Android、Apple推出iOS后出现的职位。当H5广泛流行之后（16年后Android 4.0以上的市场占有率已经超过70%，对H5的支持已经普及），针对App开发更加有效率的Hybrid方式开始流行。Android中有使用Chrome内核的Webview控件，可以使用H5来编写页面的主要逻辑，原生Webview用于加载显示，...
js bridge 实现原理
_
01-31 2789
原文链接 https://www.cnblogs.com/dailc/p/5931324.html#hybrid_2_2 说明 JSBridge实现原理 目录 前言 参考来源 前置技术要求 楔子 原理概述 简介 url scheme介绍 实现流程 实现思路 第一步:设计出一个Native与JS交互的全局桥对象 第二步:JS如何调用Native 第三步:Native如何得知api被调用 第四步:分析url-参数和回调的格式 第五步:Native如何调
JSBridge 原理
2301_78145658的博客
05-31 682
某一链接填写的是 H5 链接，在对应的 Native 页面开发完成前先跳转至 H5 页面，待 Native 页面开发完后再进行拦截，跳转至 Native 页面，此时 H5 的链接无需进行修改。剩下的交给客户端自己去拦截相同的方法，识别相同的参数，进行自己的处理逻辑即可实现多端表现一致。使用该方式时，JS 需要等到 Native 执行完对应的逻辑后才能进行回调里面的操作。另外，如果能与 Native 确定好方法名、传参等调用的协议规范，这样其它格式的 prompt 等方法是不会被识别的，能起到隔离的作用。
js调用android本地方法的实现
12-28
本篇文章将详细介绍如何在JS通过WebView调用Android的本地方法，同时规避`addJavascriptInterface`的安全问题。 首先，我们要理解`WebView`在Android中的作用。`WebView`是一个可以加载和显示网页内容的视图，它...
Android中 webView调用JS出错的解决办法
09-03
本篇文章将详细介绍如何解决Android中WebView调用JS出错的问题。 首先，让我们分析一下错误日志。错误信息指出“一个WebView方法在非主线程'JavaBridge'上被调用，所有WebView的方法必须在同一线程上调用”。这意味...
iOS diaoyong js
03-23
本篇文章将详细探讨如何在iOS中实现JavaScript的调用以及相关知识点。 **一、UIWebView** UIWebView是iOS早期版本中的一个视图组件，用于展示网页内容。它提供了`stringByEvaluatingJavaScriptFromString:`方法，...
Js与Android原生交互
02-27
本篇文章将深入探讨如何实现Js与Android原生交互，以及在实际开发中的应用。 首先，我们要理解WebView的基本用法。在Android应用中，我们可以创建一个WebView实例，并通过调用`loadUrl()`方法加载网页内容。例如： ...
ios javascript core
03-23
本篇文章将深入探讨如何在iOS中使用JavaScript Core，特别是如何解决JavaScript与Objective-C之间的通信问题。 首先，让我们了解JavaScript Core的基本使用。要使用JavaScript Core，你需要在项目中导入`...
JSbridge原理与实现简析
落枫秋歌
08-26 6432
JSBridge定义 定义：正如其命名一样，JSBridge就相当于js与native之间进行全双工通信的一座桥梁，其内部定义了一套用于js与native进行通信的规范（包括协议、方法、传参及回调等）； 用途：JSBridge可以桥连js与native的通信，从而使基于容器的web开发和优化成为可能，如比较火的hybrid app技术；能够提升页面性能，丰富页面功能等； JSBridge原理简析 框架简析： JSBridge框架其实主要由两部分组成：第一部分是Native调用js，主要用于消息推送、
JSBridge的原理及使用
热门推荐
Flying
06-24 8万+
一、什么是JSBridge 主要是给 JavaScript 提供调用 Native 功能的接口，让混合开发中的前端部分可以方便地使用 Native 的功能（例如：地址位置、摄像头）。 而且 JSBridge 的功能不止调用 Native 功能这么简单宽泛。实际上，JSBridge 就像其名称中的Bridge的意义一样，是 Native 和非 Native 之间的桥梁，它的核心是构建 Native...
JSBridge
sxm666666的博客
01-26 2732
JavaScript提供调用Native功能的接口。让混合开发中的前端部分可以方便地使用Native的功能（地址位置、打开摄像头，查看本地相册，指纹支付） JSBridge是Native和非Native之间的桥梁，他的核心是构建Native和非Native间消息通信的通道（而且这个通信的通道是双向的）。 双向通信的通道： JS向Native发送消息：调用相关的功能、通知Native当前js的相关状态等 Native向JS发送消息。回溯调用结果，消息推送。通知js当前Native的状态等 H5与Nati
前端也要懂系列之 JSBridge 原理解析
薛定谔的猫-前端领域
05-07 3071
移动端盛行时代势必使得混合开发（Hybrid）成为热点。 混合开发是指使用多种开发模开发App的一种开发模式，涉及到两大类技术：原生Native、Web H5。 原生 Native 主要指 iOS（Objective C）、Android（Java），原生开发效率较低，开发完成需要重新打包整个App，发布依赖用户的更新，性能较高功能覆盖率更高； Web H5主要由HTML、CSS、JavaScript组成，Web可以更好的实现发布更新，跨平台也更加优秀，但性能较低，特性受限。 混合开发按照渲染...
一篇文章了解Js Bridge
weixin_34205826的博客
02-27 470
什么是JS Bridge 在大多数APP开发过程中，都会通过H5来实现部分功能，而Hybird APP基本90%以上都是H5。现在很少有纯原生的APP。但是，由于H5页面是内嵌到原生应用的WebView组件（一个浏览器内核）中，而手机浏览器Javascript引擎是在一个沙箱环境中运行，因此JavaScript的权限受到严格限制，比如没...
JSBridge深度剖析
xiangzhihong8的专栏
03-27 1万+
概述做过混合开发的人都知道Ionic和PhoneGap之类的框架，这些框架在web基础上包装一层Native，然后通过Bridge技术的js调用本地的库。在讲JSBridge技术之前，我们来看一下传统的实现方式。Android端Native调JSnative调用js比较简单，只要遵循：”javascript: 方法名(‘参数,需要转为字符串’)”的规则即可。在4.4之前，调用的方式：// mWebV
什么是bridge pattern
05-13
桥接模式（Bridge Pattern）是一种结构型设计模式，它将一个大类或一系列紧密相关的类拆分成抽象和实现两个独立的层次结构，从而能够更容易地维护和扩展。它的核心思想是将抽象和实现分离，使它们可以独立变化，而不会相互影响。 在桥接模式中，抽象和实现是通过一个桥接接口来连接的。抽象部分包含高层业务逻辑，它依赖于桥接接口，而实现部分包含低层实现细节，它依赖于同样的桥接接口。这种分离使得抽象部分和实现部分可以独立地变化，而不会相互影响。同时，桥接模式也使得系统更加灵活，可以动态地切换实现部分，而不需要修改抽象部分的代码。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Mr.怪兽

希望大家能够多多支持，我会继续

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值