Java和Javascript互调的例子 ---------（Android WebView 中）

深入解析WebViewDemo的JavaScript接口绑定原理

最新推荐文章于 2021-05-25 15:33:59 发布

最新推荐文章于 2021-05-25 15:33:59 发布 · 167 阅读

文章标签：

#javascript #java #移动开发 #ViewUI

本文详细分析了Android应用中WebViewDemo利用addJavascriptInterface方法将Java对象与JavaScript对象进行绑定的过程，并展示了如何在HTML中调用绑定的Java方法，同时介绍了Android中加载assets资源的方式以及使用Handler确保异步操作的重要性。

下文转自：

http://www.javaeye.com/topic/376674

源代码来自：

http://code.google.com/p/apps-for-android/source/browse/#svn/trunk/Samples/WebViewDemo%3Fstate%3Dclosed

-----------------------------------------------------------------------------------------

分析一下代码：

Java代码

public class WebViewDemo extends Activity{
private WebViewmWebView;
private HandlermHandler= new Handler();
public void onCreate(Bundleicicle){
super .onCreate(icicle);
setContentView(R.layout.webviewdemo);
mWebView=(WebView)findViewById(R.id.webview);
WebSettingswebSettings=mWebView.getSettings();
webSettings.setJavaScriptEnabled(true );
mWebView.addJavascriptInterface(new Object(){
public void clickOnAndroid(){
mHandler.post(new Runnable(){
public void run(){
mWebView.loadUrl("javascript:wave()" );
}
});
}
},"demo" );
mWebView.loadUrl("file:///android_asset/demo.html" );
}
}

public class WebViewDemo extends Activity {
	private WebView mWebView;
	private Handler mHandler = new Handler();

	public void onCreate(Bundle icicle) {
		super.onCreate(icicle);
		setContentView(R.layout.webviewdemo);
		mWebView = (WebView) findViewById(R.id.webview);
		WebSettings webSettings = mWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);
		mWebView.addJavascriptInterface(new Object() {
			public void clickOnAndroid() {
				mHandler.post(new Runnable() {
					public void run() {
						mWebView.loadUrl("javascript:wave()");
					}
				});
			}
		}, "demo");
		mWebView.loadUrl("file:///android_asset/demo.html");
	}
}

这里的重点是addJavascriptInterface(Object obj,String interfaceName)方法，该方法将一个java对象绑定到一个javascript对象中，javascript对象名就是 interfaceName，作用域是Global。这样初始化webview后，在webview加载的页面中就可以直接通过 javascript:window.demo访问到绑定的java对象了。来看看在html中是怎样调用的：

Html代码

< html >
< script language = "javascript" >
functionwave(){
document.getElementById("droid").src = "android_waving.png" ;
}
</ script >
< body >
< a onClick = "window.demo.clickOnAndroid()" >
< img id = "droid" src = "android_normal.png" /> < br >
Clickme!
</ a >
</ body >
</ html >

<html>
        <script language="javascript">
                function wave() {
                    document.getElementById("droid").src="android_waving.png";
                }
        </script>
        <body>
            <a onClick="window.demo.clickOnAndroid()">
                                <img id="droid" src="android_normal.png"/><br>
                                Click me!
            </a>
        </body>
</html>

这样在javascript中就可以调用java对象的clickOnAndroid()方法了，wave()方法是java中调用javascript的例子。

这里还有几个知识点：

1)为了让WebView从apk文件中加载assets，Android SDK提供了一个schema，前缀为"file:///android_asset/"。WebView遇到这样的schema，就去当前包中的 assets目录中找内容。如上面的"file:///android_asset/demo.html"

2)addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中，不能运行在构造他的线程中，这也是使用Handler的目的。