Android中webView与JS的交互

深入探讨Android Webview与JavaScript交互优化

最新推荐文章于 2024-04-17 09:58:46 发布

原创最新推荐文章于 2024-04-17 09:58:46 发布 · 615 阅读

0 ·

CC 4.0 BY-SA版权

Android-笔记专栏收录该内容

12 篇文章

订阅专栏

本文详细解析了Android Webview加载资源的过程及优化方法，包括图片、css、js、html等资源的加载效率，重点介绍了如何通过webview加载页面的顺序，以及在Android与JavaScript交互中实现高效数据交换的策略。通过实例展示了如何在Java与js间建立接口，实现Java调用HTML中js代码和js调用Java代码的功能，特别强调了交互过程中速度差异、返回值类型以及安全问题。文章旨在提升开发者对Webview加载速度和交互性能的理解，提供实用的优化建议。

其实webview加载资源的速度并不慢，但是如果资源多了，当然就很慢。图片、 css 、 js 、 html 这些资源每个大概需要 10-200ms ，一般都是 30ms 就 ok 了。不过webview是必须等到全部资源都完成加载，才会进行渲染的，所以加载的速度很重要！从Google上我们了解到，webview 加载页面的顺序是：先加载 html ，然后从里面解析出 css 、 js 文件和页面上的图片资源进行加载。如果 webkit 的缓存里面有，就不加载。加载完这些资源之后，就进行 css 的渲染和 js 的执行。 Css 的渲染一般不需要很长时间，几十毫秒就 ok 。关键是 js 的执行，如果用了 jQuery ，则执行起来需要 5-6 秒。而在这段时间，如果不在 webview 里设置背景，网页部分是白色的，很难看。这是一个很糟糕的用户体验。所以如果用网页布局程序，最好别用那些庞大的 js 框架。最好使用原生的js写业务脚本，以提升加载速度，改善用户体验。
Android 的 webview 是基于 webkit 内核的，webview 中集成了js与java互调的接口函数，通过addJavascriptInterface方法，可以将Java的类注册进webkit，给网页上的js进行调用，而且还可以通过loadUrl方法是给webkit传递一个uri，供浏览器来进行解析，实现Java和js交互。
Android（Java）与JavaScript（HTML）交互有四种情况：

1） Android（Java）调用HTML中js代码

2） Android（Java）调用HTML中js代码（带参数）

3） HTML中js调用Android（Java）代码

4） HTML中js调用Android（Java）代码（带参数）

下面根据实例来说一下java与js间的交互：
第一步：
mainfest.xml中加入网络权限

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

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;

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()");

交互流程如下：

①点击图片，则在js端直接调用android上的方法clickOnAndroid()；
②clickOnAndroid()方法（利用线程）调用js的方法。
③被②调用的js直接控制html。

另外，Java和js交互有以下一些特点：

1．Java 调用 js 里面的函数，速度并不令人满意，大概一次一两百毫秒吧，如果要做交互性很强的事情，这种速度会让人疯掉的。而反过来就不一样了， js 去调 java 的方法，速度很快，基本上 40-50 毫秒一次。所以尽量用 js 调用 java 方法，而不是 java 去调用 js 函数。

2．Java 调用 js 的函数，没有返回值，而 Js 调用 java 方法，可以有返回值。返回值可以是基本类型、字符串，也可以是对象。如果是字符串，有个很讨厌的问题，第 3 点我会讲的。如果是对象，这个对象会被转换为 js 的对象，直接可以访问里面的方法。但是我不推荐 java 返回给 js 的是对象，除非是必须。因为 js 收到 java 返回的对象，会产生一些交换对象，而如果这些对象的数量增加到了 500 或 600 以上，程序就会出问题。所以尽量返回基本数据类型或者字符串。

3．Js 调用 Java 的方法，返回值如果是字符串，你会发现这个字符串是 native 的，不能对它进行一些修改操作，比如想对它 substr ，取不到。怎么解决呢？转成 locale 的。使用 toLocaleString() 函数就可以了。不过这个函数的速度并不快，转化的字符串如果很多，将会很耗费时间。

参考自：1.http://my.oschina.net/zhiweiofli/blog/139040
2.http://www.jb51.net/article/52031.htm
3.http://www.jb51.net/article/59951.htm
4.http://blog.youkuaiyun.com/it1039871366/article/details/46372207