JsBridge & Android WebView

  1. webview

  2. loadUrl

  3. addJavascriptInterface

  4. .setJavaScriptEnabled(true);

  5. findViewById

  6. 注解 @JavascriptInterface

https://developer.android.com/reference/android/webkit/WebView.html

getSettings

https://developer.android.com/reference/android/webkit/WebView.html#getSettings

https://developer.android.com/reference/android/webkit/WebSettings

new

 class JsObject {
@JavascriptInterface
public String toString() { return "injectedObject"; }
}
webview.getSettings().setJavaScriptEnabled(true);
webView.addJavascriptInterface(new JsObject(), "injectedObject");
webView.loadData("", "text/html", null);
webView.loadUrl("javascript:alert(injectedObject.toString())");

https://developer.chrome.com/multidevice/webview/overview

https://developer.chrome.com/multidevice/webview/gettingstarted

old

webSettings.setJavaScriptEnabled(true);

https://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object, java.lang.String)

demos

https://www.journaldev.com/9333/android-webview-example-tutorial

Android WebView 与 js 交互 JsBridge

Android

http://www.imooc.com/learn/983


public class MainActivity extends AppCompatActivity{
private WebView webView;
private TextView textView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initWidgets(savedInstanceState);
}
private void initWidgets(Bundle savedInstanceState) {
webView = findViewById(R.id.webview);
textView = findViewById(R.id.textview); // WebView 开启对 js 加载的支持
webView.getSettings().setJavaScriptEnabled(true);
}
}
  1. webview

public class MainActivity extends AppCompatActivity{
private WebView webView;
private TextView textView; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initWidgets(savedInstanceState);
}
private void initWidgets(Bundle savedInstanceState) {
webView = findViewById(R.id.webview);
textView = findViewById(R.id.textview); // WebView 开启对 js 加载的支持
webView.getSettings().setJavaScriptEnabled(true); // WebView 上添加 js 方法的接口实现类
webView.addJavascriptInterface(new jsMethodsObjectInterface(), "jsMethodsObjectName"n)
}
}
  1. js interface

public class JsMethodsObjectInterface{
private static final String TAG = "JsMethodsObjectInterface"; @JavascriptInterface
public void setInputValue(String value){
Log.d(TAG, msg: "input value =" + value);
}
}

JSbridge 通信原理

jsbridge android

https://github.com/lzyzsd/JsBridge

https://juejin.im/entry/5c5c40cb518825790c5aecd8

http://wacao.cn/jsbridge.html

https://www.codeproject.com/Tips/1063403/WebView-JS-Bridge-Android

https://www.jianshu.com/p/2ec3f06d6087

https://juejin.im/post/5ac044a8518825557459d603

https://zhuanlan.zhihu.com/p/38046261

refs

JsBridge

原生开发可以访问平台所有功能,而混合开发中,H5 代码是运行在 WebView 中,

而 WebView 实质上就是一个浏览器内核,其 JavaScript 依然运行在一个权限受限的沙箱中,

所以对于大多数系统能力都没有访问权限,如无法访问文件系统、不能使用蓝牙等。

所以,对于 H5 不能实现的功能,都需要原生去做。

而混合框架一般都会在原生代码中预先实现一些访问系统能力的 API, 然后暴露给 WebView 以供 JavaScript调用;

这样一来,WebView 就成为了 JavaScript与原生 API之间通信的桥梁,主要负责 JavaScript与原生之间传递调用消息;

而消息的传递必须遵守一个标准的协议,它规定了消息的格式与含义,我们把依赖于 WebView 的用于在 JavaScript与原生之间通信并实现了某种消息传输协议的工具称之为 WebView JavaScript Bridge, 简称 JsBridge,它也是混合开发框架的核心。

WebView Scheme / URL Scheme

https://book.flutterchina.club/chapter1/mobile_development_intro.html

refs



xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


JsBridge & Android WebView的更多相关文章

  1. webview之如何设计一个优雅健壮的Android WebView?(下)(转)

    转载:https://iluhcm.com/2018/02/27/design-an-elegant-and-powerful-android-webview-part-two/ (这篇文章写得有点晚 ...

  2. 如何设计一个优雅健壮的Android WebView?(下)

    转:如何设计一个优雅健壮的Android WebView?(下) 前言 在上文<如何设计一个优雅健壮的Android WebView?(上)>中,笔者分析了国内WebView的现状,以及在 ...

  3. Android WebView 302斗争之旅

    一.背景 越来越多的业务接入,项目内多多少少会出现几个H5页面,只是单纯的提供WebView容器接入H5页面根本满足不了需求,他们需要登录态,需要制定协议控制Native的导航栏,或者需要JsBrid ...

  4. webview之如何设计一个优雅健壮的Android WebView?(上)(转)

    转接:https://iluhcm.com/2017/12/10/design-an-elegant-and-powerful-android-webview-part-one/ 前言 Android ...

  5. android WebView详解,常见漏洞详解和安全源码

    这篇博客主要来介绍 WebView 的相关使用方法,常见的几个漏洞,开发中可能遇到的坑和最后解决相应漏洞的源码,以及针对该源码的解析.  转载请注明出处:http://blog.csdn.net/se ...

  6. 如何设计一个优雅健壮的Android WebView?(上)

    转:如何设计一个优雅健壮的Android WebView?(上) 前言 Android应用层的开发有几大模块,其中WebView是最重要的模块之一.网上能够搜索到的WebView资料可谓寥寥,Gith ...

  7. Android WebView与H5联调技巧

    版权声明:本文为xing_star原创文章,转载请注明出处! 本文同步自http://javaexception.com/archives/78 背景: 突然想写一篇关于Android WebView ...

  8. Android WebView useragent

    今天介绍一下Android WebView UserAgent, User-Agent(简称UA)是HTTP请求头部用来标识客户端信息的字符串, 包括操作系统, 浏览器等信息.为了建立手机客户端的信息 ...

  9. android webview开发问题及优化汇总

    我们在native与网页相结合开发的过程中,难免会遇到关于WebView一些共通的问题.就我目前开发过程中遇到的问题以及最后得到的优化方案都将在这里列举出来.有些是老生常谈,有些则是个人摸索得出解决方 ...

随机推荐

  1. 9.5 自定义包和可见性 go mod

    the-way-to-go_ZH_CN/09.5.md at master · Unknwon/the-way-to-go_ZH_CN https://github.com/Unknwon/the-w ...

  2. WPF显示命名空间不存在对应名称

    3个办法 1 切换到Release模式,再生成.生成成功后切换回Debug模式就不报错了.这是Release模式下找不到我们自定义的控件导致的报错.所以切换为Release后生成则可以解决此问题. 2 ...

  3. IntelliJ IDEA 20 岁了!20 年前的第 1 版曝光…

    IntelliJ IDEA 最近发布了 20 周年庆典: https://www.jetbrains.com/lp/intellijidea-20-anniversary/ IntelliJ IDEA ...

  4. 第八届“图灵杯”NEUQ-ACM程序设计竞赛个人赛(同步赛)

    传送门 B-小宝的幸运数组 题目描述 对于小宝来说,如果一个数组的总和能够整除他的幸运数字k,就是他的幸运数组,而其他数组小宝都很讨厌.现在有一个长度为n的数组,小宝想知道这个数组的子数组中,最长的幸 ...

  5. 如何手动封装Promise函数

    第一步:Promise构造函数接受一个函数作为参数,该函数的两个参数分别是:resolve和reject; function Promise(task) { // 缓存this let that = ...

  6. Spark 应用监控告警-Graphite_exporter

    Spark 应用监控告警-Graphite_exporter Spark监控和工具 Web界面 事后查看 REST API 度量 高级工具 一.下载graphite_exporter 1.1 修改gr ...

  7. linux日志中查找关键字、前几行、结尾几行,Linux的find用法示例

    linux在日志中查找关键字.前几行.结尾几行,Linux的find用法示例 1.linux在日志中查找关键字.前几行.结尾几行 1.1查看日志 前 n行: 1.2查看日志 尾 n行: 1.3根据 关 ...

  8. Kafka踩坑填坑记录

    Kafka踩坑填坑记录 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 二. 一.kafka通过Java客户端,消费者无法接收消息,生产者发送失败消息 在虚拟机上,搭建了3台 ...

  9. K8s client 使用

    使用的k8s client包: <dependency> <groupId>io.fabric8</groupId> <artifactId>kuber ...

  10. (3)UNIX/Linux系统结构

    UNIX/Linux 系统可以粗糙地抽象为 3 个层次,如图所示.底层是 UNIX/Linux 操作系统,即系统内核(Kernel):中间层是Shell层,即命令解释层:高层则是应用层. 1) 内核层 ...