android webview js 交互案例,Android与WebView的js交互

WebView调用调用Java方法

允许WebView加载js

webView.getSettings().setJavaScriptEnabled(true);

编写js接口类

给webview添加js接口

webView.addJavascriptInterface(obj,interfaceName);

Android 调用js方法

使用loadUrl方法调用javascript

//jsString是要调用的js代码的字符串

webView.loadUrl(javascript:jsString);

实例

新建一个工程WebViewDemo

layout_main.xml代码如下。分为上下两个部分，上部分为WebView，下部分为Native。两部分均有一个输入框和按钮，输入文字点击按钮，就会在对面的输入框显示。

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/webview"

android:layout_width="match_parent"

android:layout_height="0dp"

android:layout_weight="1" />

android:layout_width="match_parent"

android:layout_height="0dp"

android:orientation="vertical"

android:layout_weight="1">

android:textColor="@android:color/black"

android:layout_marginLeft="10dp"

android:layout_marginTop="20dp"

android:textStyle="bold"

android:textSize="30dp"

android:text="Native"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

android:id="@+id/et"

android:layout_marginTop="20dp"

android:hint="请输入内容"

android:layout_width="match_parent"

android:layout_height="100px" />

android:id="@+id/send"

android:text="发送到WebView"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

MainActivity实例化控件，并且允许WebView加载js

编写js接口类LbzJsInterface

public class LbzJsInterface {

public static final String TAG = "LbzJsInterface";

private JSBridge jsBridge;

public LbzJsInterface(JSBridge jsBridge){

this.jsBridge =jsBridge;

}

//这个方法不在主线程中

@JavascriptInterface

public void setValue(String value) {

jsBridge.setTextViewValue(value);

Log.e(TAG, "value=" + value);

}

}

public interface JSBridge {

void setTextViewValue(String value);

}

给webview添加js接口

webView.addJavascriptInterface(new LbzJsInterface(this), "lbzLauncher");

MainActivity实现JSBridge

@Override

public void setTextViewValue(final String value) {

mHandler.post(new Runnable() {

@Override

public void run() {

et.setText(value);

}

});

}

WebView要加载index.html

WebView

body{

background: #7F7F7F;

}

.btn{

line-height: 50px;

margin: 20px;

background: #cccccc;

}

WebView

发送到Native

var btnEle = document.getElementById("btn");

var inputEle = document.getElementById("input");

btnEle.addEventListener("click",function(){

var str = inputEle.value;

if (window.lbzLauncher) {

lbzLauncher.setValue(str);

}else {

alert(str);

}

});

var remote = function(str){

inputEle.value = str

}

加载html

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

添加Native的监听事件，在监听中Android 调用js方法

send.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

String str =et.getText().toString();

String jsCode="if(window.remote){window.remote('"+str+"')}";

webView.loadUrl("javascript:"+jsCode);

}

});

Demo的运行状态

image