Java与Js互调

来源：互联网发布：mysql 字符串分割函数编辑：程序博客网时间：2024/06/14 05:16

现在越来越多的应用涉及到java与H5的混合开发，所以java与js的互调会经常使用，下面简单介绍下基本使用方式

一、java调用js

java调用js主要通过WebView中loadUrl()方法进行调用

1、通过如下设置启用javaScript

// 启用javascript        mWebView.getSettings().setJavaScriptEnabled(true);

2、加载js网址

简单写了个js静态网页放到assets中提供了两个方法javaCallJs()和javaCallJsWithArgs(arg)供java代码调用

<html>  <head>  <meta http-equiv="Content-Type"  content="text/html;charset=gb2312">  <script type="text/javascript">  function javaCallJs(){     document.getElementById("content").innerHTML +=              "<br\>java调用了js函数";  }  function javaCallJsWithArgs(arg){     document.getElementById("content").innerHTML +=              ("<br\>"+arg);  }  </script>  </head>  <body>  this is my html <br/><br><button onClick="window.callJava.Function4Js()">调用java代码</button><br/><br><button onClick="window.callJava.Function4Js('call java')" >含参调用java代码</button></body></br><br><div id="content">content:</div></body>  </html>

assets中添加html文件
这里写图片描述

// 从assets目录下面的加载html文件 mWebView.loadUrl("file:///android_asset/js_test.html");

 加载js中方法

// 无参调用 mWebView.loadUrl("javascript:javaCallJs()"); // 传参调用 mWebView.loadUrl("javascript:javaCallJsWithArgs(" + "'transfer parameter '" + ")");

二、js调用java代码

1、java中提供供js调用的接口，并指定接口名

mWebView.addJavascriptInterface(this, "callJava");

2、提供方法用于js调用

   /**     * @JavascriptInterface 添加js调用注解     */    @JavascriptInterface    public void Function4Js() {        runOnUiThread(new Runnable() {            @Override            public void run() {                msgView.setText(msgView.getText() + "\njs调用了java函数");            }        });    }    @JavascriptInterface    public void Function4Js(final String str) {        runOnUiThread(new Runnable() {            @Override            public void run() {                msgView.setText(msgView.getText() + "\njs调用了java函数传递参数：" + str);            }        });    }

3、js中点击事件设置调用java指定方法

<button onClick="window.callJava.Function4Js()">调用java代码</button><br/><br><button onClick="window.callJava.Function4Js('call java')" >含参调用java代码</button></body></br><br>

ok看下总体效果吧
这里写图片描述

全部代码

package net.edaibu.testapplication;import android.annotation.SuppressLint;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.webkit.JavascriptInterface;import android.webkit.WebView;import android.widget.Button;import android.widget.TextView;/** * @author geqipeng * @date 2017/11/14 */public class JsCallJavaActivity extends Activity {    private WebView mWebView = null;    private TextView msgView = null;    @SuppressLint({"SetJavaScriptEnabled", "JavascriptInterface"})    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_js_call_java);        initView();    }    private void initView() {        mWebView = findViewById(R.id.webview);        msgView = findViewById(R.id.msg);        Button button = findViewById(R.id.button);        button.setOnClickListener(btnClickListener);        initWebViewSetting();    }    /**     * webView设置     */    private void initWebViewSetting() {        // 启用javascript        mWebView.getSettings().setJavaScriptEnabled(true);        // 从assets目录下面的加载html        mWebView.loadUrl("file:///android_asset/js_test.html");        mWebView.addJavascriptInterface(this, "callJava");    }    /**     * @JavascriptInterface 添加js调用注解     */    @JavascriptInterface    public void Function4Js() {        runOnUiThread(new Runnable() {            @Override            public void run() {                msgView.setText(msgView.getText() + "\njs调用了java函数");            }        });    }    @JavascriptInterface    public void Function4Js(final String str) {        runOnUiThread(new Runnable() {            @Override            public void run() {                msgView.setText(msgView.getText() + "\njs调用了java函数传递参数：" + str);            }        });    }    private View.OnClickListener btnClickListener = new Button.OnClickListener() {        public void onClick(View v) {            // 无参调用            mWebView.loadUrl("javascript:javaCallJs()");            // 传参调用            mWebView.loadUrl("javascript:javaCallJsWithArgs(" + "'transfer parameter '" + ")");        }    };}

布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical">    <WebView        android:id="@+id/webview"        android:layout_width="match_parent"        android:layout_height="200dp" />    <TextView        android:id="@+id/msg"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_margin="5dp"        android:textColor="#ff0000"        android:textSize="14sp" />    <Button        android:id="@+id/button"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="点击调用js方法" /></LinearLayout>

js代码前面给了，就不贴了

阅读全文

0 0