注：在做例子之前要先做好准备工作，在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. 排序算法-插入排序（Java）

    package com.rao.linkList; import java.util.Arrays; /** * @author Srao * @className InsertSort * @dat ...

  2. CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]);

    CanvasRenderingContext2D.fillText(text, x, y [, maxWidth]); [, maxWidth]的意思是,方括号代表可有可无,有fillText(tex ...

  3. Q1094

    一,看题 1,字符串确实是我的弱项. 2, 二,看题解 #include<iostream> #include<string> using namespace std; int ...

  4. Pandas | 11 字符串函数

    在本章中,我们将使用基本系列/索引来讨论字符串操作.在随后的章节中,将学习如何将这些字符串函数应用于数据帧(DataFrame). Pandas提供了一组字符串函数,可以方便地对字符串数据进行操作. ...

  5. cf1179D

    cf1179D 链接 cf 思路 csdn 很玄学,正解是斜率优化dp,但被一个奇妙的贪心过了. 代码 #include <bits/stdc++.h> #define ll long l ...

  6. Cannot read lifecycle mapping metadata for artifact org.apache.maven.plugins:mav问题

    1.导致问题原因:从装系统,从win7改到win10 由于重装了系统,打开eclipse时,maven验证会出错,点击pom文件,会发现有红色的Cannot read lifecycle mappin ...

  7. python: 添加自定义模块路径 —— 可以使用相对路径

    自定义模块时,添加模块路径: sys.path.append('..')

  8. js设置元素指定时间隐藏

    $().fadeOut(); js指定时间隐藏

  9. Makefile文件基本格式

    以下是Makefile的基本模板 #指定编译器CC = g++#指定编译参数CFLAGS = -std=c++11 #指定头文件路径,此处用于指定非标准库的头文件路径INC = -I./ -I /us ...

  10. Spring AOP 代理类，BeanNameAutoProxyCreator cglib

    BeanNameAutoProxyCreator支持拦截接口和类,但不支持已经被jdk代理过的类$Proxy8.使用cglib才能代理,如下 <!-- 通过bean的名字来匹配选择要代理的bea ...