注：在做例子之前要先做好准备工作，在app下新建一个名为：assets的目录（不懂怎么创建的可参考：https://blog.csdn.net/Biegral/article/details/47170037）

assets目录下存放要加载的HTML文件等

有关webView的讲解自行百度，这里直接用例子来大概了解一下：

Xml布局文件：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical">

    <WebView

        android:id="@+id/obd_webview"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight=""/>

    <TextView android:id="@+id/obd_text"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text=""/>

</LinearLayout>

HTML内容：

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

        <script type="text/javascript">

            function actionFromNative(){

                 document.getElementById("log_msg").innerHTML +=

                     "<br\>Native调用了js函数";

            }

            function actionFromNativeWithParam(arg){

                 document.getElementById("log_msg").innerHTML +=

                     ("<br\>Native调用了js函数并传递参数："+arg);

            }

        </script>

    </head>

    <body>

        <p>WebView与Javascript交互</p>

        <div>

            <button onClick="window.web.actionFromJs()">点击调用Native代码</button>

        </div>

        <br/>

        <div>

            <button onClick="window.web.actionFromJsWithParam('come from Js')">点击调用Native代码并传递参数</button>

        </div>

        <br/>

        <div id="log_msg">调用打印信息</div>

    </body>

</html>

Android中的逻辑处理：

public class OBDCheckWebView extends AppCompatActivity {

    private WebView OBDmwebView;

    private TextView OBDTextView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_obdcheck_webview);

        OBDmwebView = this.findViewById(R.id.obd_webview);

        OBDmwebView.getSettings().setJavaScriptEnabled(true);   //启用Javascript

        OBDmwebView.loadUrl("file:///android_asset/web.html");  //加载文件的路径以及文件名

        OBDmwebView.addJavascriptInterface(this,"web");

        OBDTextView = this.findViewById(R.id.obd_text);

        String [] data = {"","fs301","","粤-A888","白色","2019-02-02 15:38:28","338km"};

    }

    //此方法没参数

    @android.webkit.JavascriptInterface

    public void actionFromJs() {

        runOnUiThread(new Runnable() {

            @Override

            public void run() {

                Toast.makeText(OBDCheckWebView.this, "js调用了Native函数", Toast.LENGTH_SHORT).show();

                String text = OBDTextView.getText() + "\njs调用了Native函数";

                OBDTextView.setText(text);

            }

        });

    }

    //可传递参数

    @android.webkit.JavascriptInterface

    public void actionFromJsWithParam(final String[] str) {

        runOnUiThread(new Runnable() {

            @Override

            public void run() {

                Toast.makeText(OBDCheckWebView.this, "js调用了Native函数传递参数：" + str, Toast.LENGTH_SHORT).show();

                String text = OBDTextView.getText() +  "\njs调用了Native函数传递参数：" + str;

                OBDTextView.setText(text);

            }

        });

    }

}

运行效果如图：

Android-----WebView加载HTML界面布局并进行数据交互的更多相关文章

  1. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下，android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

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

    最近做的一个项目中,用到自定义地图,将自定义地图转换成html页面,现在需要做的是如何将本地的html加载到android中,并可以实现交互. 相关讲解: 其实webview加载资源的速度并不慢,但是 ...

  3. Andriod中WebView加载登录界面获取Cookie信息并同步保存,使第二次不用登录也可查看个人信息。

    Android使用WebView加载登录的html界面,则通过登录成功获取Cookie并同步,可以是下一次不用登录也可以查看到个人信息,注:如果初始化加载登录,可通过缓存Cookie信息来验证是否要加 ...

  4. 转:Android Webview 加载外部html时选择加载本地的js,css等资源文件

    原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片 ...

  5. Android WebView 加载富文本内容

    WebView加载数据的方式有两种: 1. webView.loadUrl(data);//加载url 2. webView.loadDataWithBaseURL(null,data, " ...

  6. Android WebView 加载超长 JS 数据

    在之前的文章里面,我总结过WebView如何与网页交互,也就是Java如何和JS交互 —— Android WebView 总结 —— Java和JavaScript交互. 基于这篇文章,我们基本上能 ...

  7. android webview 加载本地html 实现 与 java 之间的相互响应

    1.布局 <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:androi ...

  8. Android WebView 加载网页

    通过Android 中 WebView 控件加载HTML5 页面,这是实现Android 混合开发的基础. 选择加载的网页可以是本地,也可用使远程的.需要添加访问互联网的权限:<uses-per ...

  9. android webview加载网络连接

    webview = (WebView) findViewById(R.id.webview); WebSettings webSettings = webview.getSettings(); //设 ...

随机推荐

  1. 移动端事件（touchstart、touchmove、touchend）--移动端开发整理笔记（三）

    移动端事件 三个事件 touchstart 手指触摸 相当于PC端 mousedown touchend 手指抬起 相当于PC端 mouseup touchmove 手指滑动 相当于PC端 mousm ...

  2. Json、Pickle

    目录 Json pickle Json JSON是一个序列化模块,一种用于存储和交换数据的语法. JSON是用JavaScript对象表示法(JavaScript object notation)格式 ...

  3. 安装sentry的几个命令

    docker run -d --name sentry-redis redis docker run -d --name sentry-postgres -e POSTGRES_PASSWORD=se ...

  4. 洛谷 P3374 【模板】树状数组 1 题解

    P3374 [模板]树状数组 1 题目描述 如题,已知一个数列,你需要进行下面两种操作: 1.将某一个数加上x 2.求出某区间每一个数的和 输入格式 第一行包含两个整数N.M,分别表示该数列数字的个数 ...

  5. ORA-01950：对表空间“”XXXX”无权限，解决办法

    上图报错 解决方案比如你要在用户(或SCHEMA)usera中建表,那么你用SYSTEM登录ORACLE后,执行如下SQL : ALTER USER 用户名 QUOTA UNLIMITED ON 表空 ...

  6. Linux中fork()函数详解（转载）

    linux中fork()函数详解 一.fork入门知识 一个进程,包括代码.数据和分配给进程的资源.fork()函数通过系统调用创建一个与原来进程几乎完全相同的进程,也就是两个进程可以做完全相同的事, ...

  7. rpm安装和卸载

    以jdk的卸载和安装为例. 1. 查找已安装的包名 $ rpm -q jdk jdk-1.7.0_79-fcs.x86_64 如果系统中有已经安装的jdk包,则会输出包名. 2. 卸载已安装的包 $ ...

  8. Oracle_其他人连接不上自己电脑

    1. 修改文件G:\app\eric\product\11.2.0\dbhome_1\NETWORK\ADMIN\listener.ora文件,listener中的address中加一个你的ip开头的 ...

  9. 2018-2019-2 网络对抗技术 20165318 Exp7 网络欺诈防范

    2018-2019-2 网络对抗技术 20165318 Exp7 网络欺诈防范 原理与实践说明 实践目标 实践内容概述 基础问题回答 实践过程记录 简单应用SET工具建立冒名网站 ettercap D ...

  10. IScroll中div点击事件触发两次解决办法

    1.网上的同学说的,直接修改源代码,但是这种方法可能会影响到现有的程序. 搜索onBeforeScrollStart方法,将其中的preventDefault禁止掉搜索_end方法,将其中模拟clic ...