您的位置：首页 > 移动开发

WebView 如何和 JS交互

2015-11-09 11:02 483 查看

WebView可以使得网页轻松的内嵌到app里，还可以直接跟js相互调用。

webview有两个方法：setWebChromeClient 和 setWebClient

setWebClient：主要处理解析，渲染网页等浏览器做的事情

setWebChromeClient：辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等

WebViewClient就是帮助WebView处理各种通知、请求事件的。

一、WebView 如何js 交互。 js 如何调Android 方法，Android 如何调js方法。

1.将 demo.html 放在 assets目录下

WebView webview = (WebView) findViewById(R.id.webview);

webview.loadUrl("file:///android_asset/demo.html");

2.如果页面有JavaScript 方法，则webview必须设置支持JavaScript

wst.setJavaScriptEnabled(true);

代码如下：

MainActivity.java

package com.example.webviewdemo;

import android.support.v7.app.ActionBarActivity;
import android.annotation.SuppressLint;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.DialogInterface.OnKeyListener;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.webkit.JavascriptInterface;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

public class MainActivity extends ActionBarActivity {

private WebView webview;

private Handler handler = new Handler();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

webview = (WebView) findViewById(R.id.webview);

WebSettings wst = webview.getSettings();
wst.setSavePassword(false);
wst.setSaveFormData(false);
wst.setJavaScriptEnabled(true);
wst.setSupportZoom(false);

webview.setWebChromeClient(new MyWebChromeClient());

webview.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

webview.loadUrl("file:///android_asset/demo.html");
}
final class DemoJavaScriptInterface{
DemoJavaScriptInterface(){

}
</span><span style="color:#ff0000;">      @JavascriptInterface</span><span style="color:#393939;">
public void clickOnAndroid(){
handler.post(new Runnable() {

@Override
public void run() {
webview.loadUrl("javascript:wave()");
}
});
}
}
final class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

final AlertDialog.Builder builder = new AlertDialog.Builder(view.getContext());

builder.setTitle("")
.setMessage(message)
.setPositiveButton("确定", null);

// 不需要绑定按键事件
// 屏蔽keycode等于84之类的按键
builder.setOnKeyListener(new OnKeyListener() {
public boolean onKey(DialogInterface dialog, int keyCode,KeyEvent event) {
//    Log.v("onJsAlert", "keyCode==" + keyCode + "event="+ event);
return true;
}
});
// 禁止响应按back键的事件
builder.setCancelable(false);
AlertDialog dialog = builder.create();
dialog.show();
result.confirm();
return true;
}
}
}</span>

HTML页面，demo.html

<!doctype html>
<html >
<head>
<script language="javascript">
function wave(){
document.getElementById("droid").src="android_waving.png";
alert("android 调 js");
}
</script>
</head>
<body>

<a onClick="window.demo.clickOnAndroid()">
<div style="width:80px;margin:0px auto;pandding:10px;
text-align:center;border:2px solid #ff0000">
<img id="droid" src="android_normal.png"/></br>
click me!
</div>
</a>
</body>
</html>

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.webviewdemo.MainActivity" >

<WebView
android:id="@+id/webview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
/>

</RelativeLayout>

二、分析一下 Android 和 js 如何交互的呢？

1.Android 调 js 方法

webview.loadUrl("javascript:wave()");</span>

其中wave（）是js中的一个方法，当然你可以把这个方法改成其他的方法，也就是android调用其他的方法。

2.JS 如何调Android的方法

<a
onClick="window.demo.clickOnAndroid()">

代码中的“demo”是在android中指定的调用名称，即

webview.addJavascriptInterface(new
DemoJavaScriptInterface(), "demo");

其中clickOnAndroid() 是对象 DemoJavaScriptInterface 的方法

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航