Android中WebView与JS交互

来源：互联网发布：网络直播平台论文编辑：程序博客网时间：2024/05/17 04:44

WebView和js的交互包含两方面，一是在html中通过js调用安卓的java代码；二是在安卓java代码中调用js。

html中通过js调用java代码

js中调用java代码其实就记住一点，webview设置一个和js交互的接口（注意这里只是一般的意思，并不是java中接口的含义），这个接口其实是一个一般的类，同时为这个接口取一个别名。这个过程如下：

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

new DemoJavaScriptInterface就是这个接口，demo就是这个接口的别名。
上面的代码执行之后在html的js中就能通过别名（这里是“demo”）来调用newDemoJavaScriptInterface类中的任何方法。

如我们想让html中的一个button点击之后调用java中的函数可以这样：

<input type="button"  value="click me"  onclick="window.demo.clickOnAndroid()"/>

但是因为安全问题，在Android4.2中(如果应用的android:targetSdkVersion数值为17+)JS只能访问带有 @JavascriptInterface注解的Java函数。因此如果你的开发版本比较高，需要在被调用的函数前加上@JavascriptInterface注解。

下面是谷歌给出的代码示例：
WebViewDemo.java

package com.google.android.webviewdemo;import android.app.Activity;import android.os.Bundle;import android.os.Handler;import android.util.Log;import android.webkit.JsResult;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;/** * Demonstrates how to embed a WebView in your activity. Also demonstrates how * to have javascript in the WebView call into the activity, and how the activity * can invoke javascript. * <p> * In this example, clicking on the android in the WebView will result in a call into * the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code * will turn around and invoke javascript using the {@link WebView#loadUrl(String)} * method. * <p> * Obviously all of this could have been accomplished without calling into the activity * and then back into javascript, but this code is intended to show how to set up the * code paths for this sort of communication. * */public class WebViewDemo extends Activity {    private static final String LOG_TAG = "WebViewDemo";    private WebView mWebView;    private Handler mHandler = new Handler();    @Override    public void onCreate(Bundle icicle) {        super.onCreate(icicle);        setContentView(R.layout.main);        mWebView = (WebView) findViewById(R.id.webview);        WebSettings webSettings = mWebView.getSettings();        webSettings.setSavePassword(false);        webSettings.setSaveFormData(false);        webSettings.setJavaScriptEnabled(true);        webSettings.setSupportZoom(false);        mWebView.setWebChromeClient(new MyWebChromeClient());        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");        mWebView.loadUrl("file:///android_asset/demo.html");    }    final class DemoJavaScriptInterface {        DemoJavaScriptInterface() {        }        /**         * This is not called on the UI thread. Post a runnable to invoke         * loadUrl on the UI thread.         */        public void clickOnAndroid() {            mHandler.post(new Runnable() {                public void run() {                    mWebView.loadUrl("javascript:wave()");                }            });        }    }    /**     * Provides a hook for calling "alert" from javascript. Useful for     * debugging your javascript.     */    final class MyWebChromeClient extends WebChromeClient {        @Override        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {            Log.d(LOG_TAG, message);            result.confirm();            return true;        }    }}

demo.html

<html>    <script language="javascript">        /* This function is invoked by the activity */        function wave() {            alert("1");            document.getElementById("droid").src="android_waving.png";            alert("2");        }    </script>    <body>        <!-- Calls into the javascript interface for the activity -->        <a onClick="window.demo.clickOnAndroid()"><div style="width:80px;            margin:0px auto;            padding:10px;            text-align:center;            border:2px solid #202020;" >                <img id="droid" src="android_normal.png"/><br>                Click me!        </div></a>    </body></html>

android调用js

上面的代码在演示如何在js中调用java代码的同时也演示了如何在java中调用js

调用形式：

mWebView.loadUrl("javascript:wave()");

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

他人总结：利用webView的这种方式在有些时候UI布局就可以转成相应的html代码编写了，而且网上很多源码，很多代码片。在UI和视觉效果上就会节省很多时间，重复发明轮子没有任何意义。

0 0