Android WebView Java与JavaScript的交互

最新推荐文章于 2024-09-21 14:23:15 发布

jingkang0703

最新推荐文章于 2024-09-21 14:23:15 发布

阅读量454

点赞数

分类专栏： WebApp 文章标签： android webview javascript java

本文链接：https://blog.csdn.net/jingkang0703/article/details/45872445

版权

WebApp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近工作中为了赶进度，在项目中使用了WebView组件，用到了html与java的数据交互，也就是javascript与java的数据交互，本文即介绍了在应用中添加WebView，以及js如何与java进行数据的交互。

1、在应用中添加WebView

在layout中引入<WebView>控件

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/button"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="java调用js函数" />

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

</LinearLayout>

载入页面

webView = (WebView) findViewById(R.id.webview);
webView.loadUrl("file:///android_asset/index.html");

在 manifest file中添加权限

<manifest ... >
    <uses-permission android:name="android.permission.INTERNET" />
    ...
</manifest>

2、在WebView中使用JavaScript

如果载入的页面要使用JavaScript，一定要启用JavaScript。一旦JavaScript启用，就能构建处理JavaScript与Java数据的接口。

启用JavaScript

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

将 JavaScript代码与Java代码绑定

JavaScript代码可以调用Java代码中的方法启用Dialog对话框，而不必使用JavaScript的alert()函数。

调用addJavascriptInterface()方法将JavaScript与Java绑定，给这个方法传递两个参数，一个是与JavaScript绑定的实例对象，一个是接口名称,
JavaScript可以用这个名称来访问类。

在程序中加入如下类

public class WebAppInterface {
	Context mContext;

	/** Instantiate the interface and set the context */
	WebAppInterface(Context c) {
		mContext = c;
	}

	/** Show a toast from the web page */
	@JavascriptInterface
	public void showToast(String toast) {
		Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();
	}
		
	@JavascriptInterface
	public void showToast() {
		Toast.makeText(mContext, "js调用java代码", Toast.LENGTH_SHORT).show();
	}
}

注意：如果你设置了 targetSdkVersion为17或者以上，一定要在方法上加 @JavascriptInterface，否则Javascript无法运行

用addJavascriptInterface()将这个类与JavaScript绑定，并给接口起名为Android。

webView.addJavascriptInterface(new WebAppInterface(this), "Android");

这为运行在WebView中的 Javascript构建了一个叫Android的接口，web应用就可以访问WebAppInterface类了。
以下是构建了Toast消息的HTML和 Javascript代码，当点击button时就会调用这个接口。

<script type="text/javascript">
    function showAndroidToastwithargs(toast) {
        Android.showToast(toast);
    }
    function showAndroidToast() {
        Android.showToast();
    }
</script>
</head>
<body>
<input type="button" value="js调用java代码带参数" onClick="showAndroidToastwithargs('Hello Android!')" />
<br/>
<input type="button" value="js调用java代码" onClick="showAndroidToast()" />

不必在 Javascript中初始化这个接口，WebView会自动使其在页面中可用。点击button，showAndroidToast()会访问Android接口调用WebAppInterface.showToast()方法。

3、Java调用Javascript代码

通过loadUrl()方法调用Javascript代码

// without args
webView.loadUrl("javascript:javacalljs()");
// with args
webView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");

HTML和 Javascript代码片段

function javacalljs(){
	document.getElementById("content").innerHTML +=   
         "<br\>java调用了js函数";
}
function javacalljswithargs(arg){
	document.getElementById("content").innerHTML +=   
         ("<br\>"+arg);
}

源码下载地址：点击打开链接