简单理一理 Android 与 html 的之间的交互样式
一、基本准备
1、本 Demo 直接加载 assets 文件夹下面的 html 文件,来进行交互开发
2、Android 与 html 的之间的交互需要通过 JS,所以要 setJavaScriptEnabled(true),不然调用不了 JS
二、html 调用 Android 中的 Java 方法
1、直接在 Android 指定类中创建待调用方法
mWebView.addJavascriptInterface(this, "test002");
... ...
@JavascriptInterface
public void showToast(String msg) {
Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
}
<input type="button" value="调用Android-A-直接" onClick="android:test002.showToast('A-直接-我是大帅哥')"/>
这里要注意的地方:
① html 如果要调用 Android 中的方法,就得把该方法所在类及类标识传入 html,供 html 调用:
// 在 Android 把类及类标识传入 html
mWebView.addJavascriptInterface(this, "test002");
// 这里的类标识是 test002
// 在 html 中通过类标识调用指定方法
<!--方式一-->
javascript:test002.showToast("Js-我是大帅哥");
<!--方式二-->
android:test002.showToast("A-我是大帅哥");
② Android 中待调用方法要加上 @JavascriptInterface 注解
③ 调用时,html 及 Android 所对应的类标识、方法名要一样
2、在 Android 特定类中创建待调用方法
专门写一个类来维护和管理 Android 中供 html 调用的方法
// 这里的类标识是 JsInterface
mWebView.addJavascriptInterface(new JsInterface(), "JsInterface");
... ...
private class JsInterface {
@JavascriptInterface
public void showToast(String msg) {
Toast.makeText(Test002Activity.this, "JsInterface:" + msg, Toast.LENGTH_SHORT).show();
}
}
// 这里的类标识是 JsInterface
function showToastTwo(){
javascript:JsInterface.showToast("我是大帅哥");
}
三、Android 调用 html 中的 JS 方法
1、调用无参 JS 方法
调用 innerHTML,插入修改 html 中的文字:
// 按钮的 onClick 方法
public void inner(View view) {
mWebView.loadUrl("javascript:showInner()");
}
<p id="content">混合开发</p>
... ...
function showInner(){
document.getElementById("content").innerHTML="Hello World!";
}
调用 alert,弹出一个 alert 提示弹窗:
// 按钮的 onClick 方法
public void alert(View view) {
mWebView.loadUrl("javascript:showAlert()");
}
function showAlert(){
alert("Hello World!");
}
这里要注意的是,要加上下面的监听,不然不能弹出 alert 提示弹窗:
mWebView.setWebChromeClient(new WebChromeClient()); // 调用 alert 必须设置
WebViewClient 主要帮助 WebView 处理各种通知、请求事件
WebChromeClient 主要辅助 WebView 处理 Javascript 的对话框、网站图标、网站 title、加载进度等
2、调用有参 JS 方法
// 按钮的 onClick 方法
public void count(View view) {
int a = 1;
mWebView.loadUrl("javascript:count(" + a + ")");
}
... ...
@JavascriptInterface
public void onSum(int sum) {
Toast.makeText(this, "onSum-返回结果:" + sum, Toast.LENGTH_SHORT).show();
}
function count(a){
javascript:test002.onSum(a*10+3);
}
3、调用带返回值的 JS 方法
上面的 function count(a) 中的 javascript:test002.onSum(a*10+3) 其实可以算是一种返回值方式,一种间接的返回值方式,在 Android 4.4 后,就有了一种直接的返回值方式
// 按钮的 onClick 方法
public void sum(View view) {
// 【4.4及以上返回方式】
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
mWebView.evaluateJavascript("sum(5,1)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(Test002Activity.this, "4.4返回结果:" + value, Toast.LENGTH_SHORT).show();
}
});
}
}
function sum(a,b){
javascript:test002.onSum(a*10+b);
return a*10+b;
}
四、代码
1、html
<html>
<head>
<meta charset="UTF-8"/>
</head>
<body>
<p id="content">混合开发</p>
<input type="button" value="调用Android" onClick="showToast()"/>
<input type="button" value="调用Android-JsInterface" onClick="showToastTwo()"/>
<input type="button" value="调用Android-A-直接" onClick="android:test002.showToast('A-直接-我是大帅哥')"/>
<input type="button" value="调用Android-Js-直接" onClick="javascript:test002.showToast('Js-直接-我是大帅哥')"/>
</body>
<script type="text/javascript">
function showInner(){
document.getElementById("content").innerHTML="Hello World!";
}
function showAlert(){
alert("Hello World!");
}
function count(a){
javascript:test002.onSum(a*10+3);
}
function sum(a,b){
javascript:test002.onSum(a*10+b);
return a*10+b;
}
function showToast(){
<!--javascript:test002.showToast("Js-我是大帅哥");-->
android:test002.showToast("A-我是大帅哥");
}
function showToastTwo(){
javascript:JsInterface.showToast("我是大帅哥");
}
</script>
</html>
2、Android
public class Test002Activity extends AppCompatActivity {
private WebView mWebView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_FULLSCREEN);
setContentView(R.layout.activity_test002);
initWebView();
}
@SuppressLint("SetJavaScriptEnabled")
private void initWebView() {
mWebView = (WebView) findViewById(R.id.wv_test);
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.loadUrl("file:///android_asset/test002.html");
mWebView.setWebChromeClient(new WebChromeClient()); // 调用 alert 必须设置
mWebView.addJavascriptInterface(this, "test002"); // 用于 html 返回值给 Android【4.4以下】
mWebView.addJavascriptInterface(new JsInterface(), "JsInterface");
}
public void inner(View view) {
mWebView.loadUrl("javascript:showInner()");
}
public void alert(View view) {
mWebView.loadUrl("javascript:showAlert()");
}
public void count(View view) {
int a = 1;
mWebView.loadUrl("javascript:count(" + a + ")");
}
public void sum(View view) {
// 【4.4及以上返回方式】
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
mWebView.evaluateJavascript("sum(5,1)", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Toast.makeText(Test002Activity.this, "4.4返回结果:" + value, Toast.LENGTH_SHORT).show();
}
});
}
}
@JavascriptInterface
public void onSum(int sum) {
Toast.makeText(this, "onSum-返回结果:" + sum, Toast.LENGTH_SHORT).show();
}
@JavascriptInterface
public void showToast(String msg) {
Toast.makeText(this, msg, Toast.LENGTH_SHORT).show();
}
private class JsInterface {
@JavascriptInterface
public void showToast(String msg) {
Toast.makeText(Test002Activity.this, "JsInterface:" + msg, Toast.LENGTH_SHORT).show();
}
}
}
参考文章:
1、https://www.cnblogs.com/zhangqie/p/6387433.html
2、https://blog.csdn.net/leejizhou/article/details/50894531/
3、https://blog.csdn.net/linghu_java/article/details/6927439