WebView与JavaScript的交互 webview与js交互原理

由于现如今H5的热门，做过不少与H5的交互工作了，现在总结一下。

初始化WebView

/**

* 初始化WebView

*/

private void initWebView() { // 设置setWebChromeClient对象

mWb_main.setWebChromeClient(new WebChromeClient() { @Override

public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); //设置本地的ToolBar标题

mTv_main.setText(title);

}

}); //打开网页时不调用系统浏览器， 而是在本WebView中显示

mWb_main.setWebViewClient(new WebViewClient() { @Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url); return true;

}

});

WebSettings webSettings = mWb_main.getSettings();

webSettings.setJavaScriptEnabled(true);

webSettings.setDefaultTextEncodingName("UTF-8");//设置编码

webSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放

webSettings.setLoadWithOverviewMode(true);

}

Android 调用JS的无参数方法

在HTML5中的header中加入这段代码

<script>

//这是被Android调用的JS方法function noParamFunction() {document.getElementById("noparam_ta").style.fontSize =40+"px";

}</script>

然后在Android里边我们调用

/**

* Android 调用 JS代码

*/

mButton.setOnClickListener(new View.OnClickListener() { @Override

public void onClick(View v) {

mWb_main.loadUrl("javascript:noParamFunction();");

}

});

Android 调用JS的有参数方法

在HTML5中的header中加入这段代码

<script>

//这是被Android调用的JS方法function noParamFunction() {

document.getElementById("noparam_ta").innerHTML=data;

}</script>

然后在Android里边我们调用的时候需要加入‘”+str+”’ 这种形式的，才可以想HTML传递参数

/**

* Android 调用 JS代码

*/

String str = "Hello JS"

mButton.setOnClickListener(new View.OnClickListener() { @Override

public void onClick(View v) {

mWb_main.loadUrl("javascript:noParamFunction('"+str+"');");

}

});

JS调用Android 代码

首先我们要定义一个类供JS调用，这里需要注意在4.2以前，不需要在方法前加上 @JavascriptInterface，4.2以后的系统就需要加上了，代码如下

public class JavaScriptinterface {

private Context mContext; /** Instantiate the interface and set the context */

public JavaScriptinterface(Context c) {

mContext = c;

}/**

* 安卓系统4.2以上的系统需要加上 @JavascriptInterface，才可以让webview读取自己的方法

* @param toast

*/

@JavascriptInterface

public void showToast(String toast) {

Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();

Log.e("----","--------------------------------------------showToast");

}

}

然后在HTML中header里边加入script代码

<script>

//这是js调用Android的方法

function showAndroidToast(str) {

javascript:window.android.showToast(str);

}</script>

在Body标签加入

<input type="button" value="调用安卓的方法" onClick="showAndroidToast('调用成功')" />

然后在我们Android 端写入如下代码就可以调用了

/**

* JS 调用 Android 代码

*/

mWb_main.addJavascriptInterface(new JavaScriptinterface(this), "android");1234512345

Android读取html的标题

// 设置setWebChromeClient对象

mWb_main.setWebChromeClient(new WebChromeClient() { @Override

public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); //设置本地的ToolBar标题

mTv_main.setText(title);

}

});

Android允许Html的Alert（）对话框

// 设置setWebChromeClient对象

mWb_main.setWebChromeClient(new WebChromeClient() { //处理javascript中的alert

public boolean onJsAlert(WebView view, String url, String message, final JsResult result) { //构建一个Builder来显示网页中的对话框

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

builder.setTitle("Alert");

builder.setMessage(message);

builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() { public void onClick(DialogInterface dialog, int which) {

result.confirm();

}

});

builder.setCancelable(false);

builder.create();

builder.show(); return true;

} //处理javascript中的confirm

public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) {

AlertDialog.Builder builder = new AlertDialog.Builder(MainActivity.this);

builder.setTitle("confirm");

builder.setMessage(message);

builder.setPositiveButton(android.R.string.ok, new AlertDialog.OnClickListener() { public void onClick(DialogInterface dialog, int which) {

result.confirm();

}

});

builder.setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() { public void onClick(DialogInterface dialog, int which) {

result.cancel();

}

});

builder.setCancelable(false);

builder.create();

builder.show(); return true;

}

});