JsBridge & Android WebView
JsBridge & Android WebView
-
webview
-
loadUrl
-
addJavascriptInterface
-
.setJavaScriptEnabled(true);
-
findViewById
-
注解
@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);
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);
}
}
- 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)
}
}
- 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
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 发布文章使用:只允许注册用户才可以访问!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/11996714.html
未经授权禁止转载,违者必究!