Android WebView加载本地html并实现Java与JS交互

最近作的一个项目中，用到自定义地图，将自定义地图转换成html页面，如今须要作的是如何将本地的html加载到android中，并能够实现交互。

相关讲解：

其实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上怎样实现JAVA和JS交互呢？

Android的webview是基于webkit内核的,webview中集成了js与java互调的接口函数,经过addJavas criptInterface方法,能够将Java的类注册进webkit,给网页上的js进行调用,并且还能够经过loadUrl方法给webkit传递一个URL,供浏览器来进行解析,实现Java和js交互。

要想运行网页上的js脚本,webview必须设置支持Javas cript。

Java代码：1mWebview.getSettings().setJavascriptEnabled(true);

而后是设置webView要加载的网页：

　　web的网页：webView.loadUrl("http://www.google.com");

　　本地的网页:webView.loadUrl("file:///android_asset/XX.html"); //本地的存放在:assets文件夹中

webview作完基本的初始化后咱们还要要给它,加进一个回调的代理类JavascriptInterface,并给它一个调用的名称:ncp

Java代码：1mWebView.addJavas criptInterface(new Javas criptInterface(),"ncp");

Javas criptInterface能够是一个普通的Java类,类实现的方法,都可被js回调:

Java代码：

final class Javas criptInterface {

　　public int callOnJs() {

　　　　return 1000;

　　}

　　public void callOnJs2(String mode) {

　　　　//TODO

　　}

}

Java要调用js的方法,只需知道js的方法名称便可:

　　Java代码：1mWebView.loadUrl("javas cript:onSaveCallback()");

js 这边就更简单(存在的版本兼容问题，参考使用WebView过程当中的问题总结):

　　JS代码：　　

window.onload = function(){

　　document.getElementById('btn_1').addEventListener('click', onBtnClick, false);

　　var _int_value = window.ncp.callOnJs();

　　alert("get int from java:" + _int_value );

}

function onBtnClick() {

　　window.ncp.callOnJs2("click");

}

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.新建assets文件夹，将本地html页面拷贝到该文件夹下。

2.xml文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:tools="http://schemas.android.com/tools"  
    android:layout_width="fill_parent"  
    android:layout_height="fill_parent"  
    tools:context=".MainActivity" >  
  
    <TextView  
        android:id="@+id/tv"  
        android:layout_width="fill_parent"  
        android:layout_height="wrap_content"  
        android:text="@string/hello_world" />  
    <WebView  
        android:layout_below="@+id/tv"  
        android:id="@+id/webview"  
        android:layout_width="fill_parent"  
        android:layout_height="fill_parent"  
    />  
  
</RelativeLayout> 

3.java文件

package com.example.webview_workflowy;  
  
import android.app.Activity;  
import android.content.Intent;  
import android.net.Uri;  
import android.os.Bundle;  
import android.webkit.WebView;  
import android.widget.Toast;  
  
public class MainActivity extends Activity {  
  
    private WebView webView;  
  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        setContentView(R.layout.activity_main);  
        //加载页面  
        webView = (WebView) findViewById(R.id.webview);  
        //容许JavaScript执行  
        webView.getSettings().setJavaScriptEnabled(true);  
        //找到Html文件，也能够用网络上的文件  
        webView.loadUrl("file:///android_asset/index.html");  
        // 添加一个对象, 让JS能够访问该对象的方法, 该对象中能够调用JS中的方法  
        webView.addJavascriptInterface(new Contact(), "contact");  
    }  
  
    private final class Contact {  
        //JavaScript调用此方法拨打电话  
        public void call(String phone) {  
//            startActivity(new Intent(Intent.ACTION_CALL, Uri.parse("tel:" + phone)));  
            Toast.makeText(MainActivity.this, phone, Toast.LENGTH_LONG).show();  
        }  
  
        //Html调用此方法传递数据  
        public void showcontacts() {  
            String json = "[{\"name\":\"zxx\", \"amount\":\"9999999\", \"phone\":\"18600012345\"}]";   
            // 调用JS中的方法  
            webView.loadUrl("javascript:show('" + json + "')");  
        }  
          
        public void toast(String str){  
            Toast.makeText(MainActivity.this, "aaaaaaaaaaaa  --- " + str, Toast.LENGTH_LONG).show();  
        }  
    }  
  
}  

4.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
        <title>Insert title here</title>  
        <script type="text/javascript">  
            function show(jsondata){              
                    var jsonobjs = eval(jsondata);  
                    var table = document.getElementById("personTable");  
                    for(var y=0; y<jsonobjs.length; y++){  
                        var tr = table.insertRow(table.rows.length);   
                        var td1 = tr.insertCell(0);  
                        var td2 = tr.insertCell(1);  
                        td2.align = "center";  
                        var td3 = tr.insertCell(2);  
                        td3.align = "center";  
                        td1.innerHTML = jsonobjs[y].name;   
                        td2.innerHTML = jsonobjs[y].amount;   
                        td3.innerHTML = "<a href='javascript:contact.call(\""+ jsonobjs[y].phone+ "\")'>"+ jsonobjs[y].phone+ "</a>";   
                    }  
            }  
        </script>  
    </head>  
    <body onload="javascript:contact.showcontacts()">  
       <button id="button" onclick = "javascript:contact.toast('123')">haha</button>  
       <table border="0" width="100%" id="personTable" cellspacing="0">  
            <tr>  
                <td width="30%">姓名</td>  
                <td width="30%" align="center">存款</td>  
                <td align="center">电话</td>  
            </tr>  
        </table>  
    </body>  
</html>  

 

若是此文对您有帮助，微信打赏我一下吧~