android webview js互调,android WebView与js互相调用

我们先看一张gif图

untitled.gif

这里通过加载一个html来展示它们的互相调用

布局文件很简单就一个WebView控件

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

android:id="@+id/web_view"

android:layout_width="match_parent"

android:layout_height="match_parent" />

assets新建一个html文件，我这里叫home.html，内容非常简单，两个按钮，两个div

js和webview互调

function getRes() {

document.getElementById("div2").innerHTML = android.getString()

}

function setDiv(content) {

document.getElementById("div1").innerHTML = content

}

function sum(a, b) {

return a+b

}

显示toast

从android获取带返回值的方法

接着我们新建一个Test类，让这个类暴露方法给js去调用，需要注意的是在方法上要添加这样一个注解@JavascriptInterface

public class Test {

private Context context;

public Test(Context context) {

this.context = context;

}

@JavascriptInterface

public void showToast(String message) {

Toast.makeText(context, message, Toast.LENGTH_SHORT).show();

}

@JavascriptInterface

public String getString() {

return "hello android";

}

}

最后是我们的MainActivity，记住一定要将setJavaScriptEnabled设置为true,我们调用js方法时要等界面加载完成时调用，webview的loadUrl()方法和evaluateJavascript()都可以调用js中的代码，evaluateJavascript()方法有个回调，通过这个回调能取得js方法的返回值， js则通过webview的addJavascriptInterface方法调用java代码的，这里要传入两个参数，一个是Object，所以直接传入Test类实例，一个是String，就是调用的接口名字，可以任意字符串，比如我传入android，则我在html中使用android.showToast('hello')就调用了Test类中的showToast(String message)方法了

public class MainActivity extends AppCompatActivity {

private WebView webView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

webView = findViewById(R.id.web_view);

webView.loadUrl("file:///android_asset/home.html");

//设置js

webView.getSettings().setJavaScriptEnabled(true);

webView.addJavascriptInterface(new Test(this), "android");

webView.setWebViewClient(new WebViewClient() {

/**

* 当页面加载完毕的时候会回调此方法

* @param view

* @param url

*/

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

view.loadUrl("javascript:setDiv('hello')");

view.evaluateJavascript("sum(1,2)", new ValueCallback() {

@Override

public void onReceiveValue(String value) {

System.out.println(value);

}

});

}

});

}

}

最后直接运行即可