目录：

一、整体思路

二、简单例子实现过程

       1、打开项目的asset目录，创建新的文件test.html

       2、补充html代码：添加供本地调用的js方法、调用本地方法的js代码

       3、补充java代码：本地加载js代码、提供给js调用的方法

       4、效果图

一、整体思路

       首先在项目assets目录底下创建一个html文件或者直接自己写好了然后复制到这个目录底下，然后本地通过WebView将html加载到页面进来，接着可以通过在html文件中增加js方法，然后本地java文件去调用js方法；也可以先在本地Java文件写好提供给js调用的方法代码，然后在html文件中调用java方法，从而实现WebView与JavaScript的相互调用。

毕竟我只是初学者，js只懂皮毛，因此下面做了一个很简单的例子供大家参考。

二、简单例子实现过程

1、打开项目的asset目录，创建新的文件test.html

       （1）在项目文件处右键new->folder->Assets folder->Ok：

 

       （2）接着在assets目录处右键new->new File，文件名可以为test.html：

2、补充html代码：添加供本地调用的js方法、调用本地方法的js代码

<html>

    <body>

    <br><br>

    <a><h1>js中调用本地方法</h1></a>

    <script>

        function sayHello()

        {

             alert("Hello")

         }

         var aTag = document.getElementsByTagName('a')[0];

         aTag.addEventListener('click', function(){

        //调用android本地方法

            control.toastMessage("js中调用本地方法");

             return false;

          }, false);

    </script>

    </body>

</html>

3、补充java代码：本地加载js代码、提供给js调用的方法

       （1）布局简单如下：

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

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#bbe4fb"

    android:orientation="vertical"

    android:paddingBottom="15dp"

    android:paddingLeft="15dp"

    android:paddingRight="15dp"

    android:paddingTop="15dp"

    tools:context="com.example.suqh.webviewjs1.MainActivity">

    <Button

        android:id="@+id/btn_show"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="本地调用js方法" />

    <WebView

        android:id="@+id/webView"

        android:layout_width="match_parent"

        android:layout_height="match_parent"></WebView>

</LinearLayout>

 

       （2）MainActivity.java代码如下：

import android.annotation.SuppressLint;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.webkit.JavascriptInterface;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.widget.Button;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private Button btnShow;

    private WebView webView;

    @SuppressLint("JavascriptInterface")

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        initView();

        initData();

        initEvent();

    }

    private void initView() {

        btnShow = (Button) findViewById(R.id.btn_show);

        webView = (WebView) findViewById(R.id.webView);

    }

    private void initData() {

        webView.setWebChromeClient(new WebChromeClient());

        WebSettings set = webView.getSettings();

        //设置webview支持js

        set.setJavaScriptEnabled(true);

        //设置本地调用对象及其接口

        webView.addJavascriptInterface(new JsInteraction(), "control");

        webView.loadUrl("file:///android_asset/test.html");

    }

    private void initEvent() {

        btnShow.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View view) {

                //本地调用js方法

                webView.loadUrl("javascript:sayHello()");

            }

        });

    }

    public class JsInteraction {

        @JavascriptInterface

        public void toastMessage(String message) {   //提供给js调用的方法

            Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();

        }

    }

}

4、效果图

       点击“本地调用js方法”按钮（左下图），点击页面上的文字“js调用本地方法”（右下图）：

       

WebView与JavaScript的交互的更多相关文章

  1. android webview和 javascript 进行交互

    HTML5进行app开发具有开发快,跨平台等优点,但是当客户需要访问照相机或者调用摄像头等硬件的时候,H5就会有限制,必须要调用原生方法进行设备访问.下面简要介绍JS和原生方法互相调用的方法: 1 在 ...

  2. Android WebView与JavaScript交互实现Web App

    当我们去开发一个基于web的android app时,我们第一须要处理的就是与JavaScript的交互问题.Android须要做的事情就是开放某些特定的接口供web里的JavaScript调用,能够 ...

  3. WebView与JavaScript交互--Android

    转载请注明出处:  http://blog.csdn.net/forwardyzk/article/details/46819925 在工作中,有一个这种需求,须要用到WebView与javascri ...

  4. Android混合开发之WebView与Javascript交互

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...

  5. Android WebView与JavaScript交互操作（Demo）

    应用场景: 为了使Android移动项目能够在较短的时间内完成开发,同时降低技术人员开发的成本投入,往往会采用Hybrid APP的开发模式.相关Hybrid APP(混合型应用)参看:http:// ...

  6. Android WebView和JavaScript交互

    JavaScript在现在的网页设计中用得很多,Android 的WebView可以载入网页,WebView也设计了与JavaScript通信的桥梁.这篇主要介绍一下WebViewk控件如何和Java ...

  7. webview与JavaScript之间的交互

    据说WebView的强大之处就是能和JavaScript进行交互调用. 参考博客:http://droidyue.com/blog/2014/09/20/interaction-between-jav ...

  8. webview的javascript与Native code交互

    http://my.oschina.net/u/1376187/blog/172296 项目中使用了webview显示网页,其中需要网页和native方法有交互,搜索到一篇文章,转发分享一下: === ...

  9. WebView之javascript与android交互基础加强

    一.什么是js与android交互? 通俗一点就是使用js代码调用java代码,或者使用java代码调用js代码. 二.为什么要使用js与java代码交互? 1.可以做一些js网页做本身处理不了的事情 ...

随机推荐

  1. Sample: Write And Read data from HDFS with java API

    HDFS: hadoop distributed file system 它抽象了整个集群的存储资源,可以存放大文件. 文件采用分块存储复制的设计.块的默认大小是64M. 流式数据访问,一次写入(现支 ...

  2. selenium更改readonly属性

    1.用js实现 JavascriptExecutor removeAttribute = (JavascriptExecutor)dr;        //remove readonly attrib ...

  3. 有限状态机HDL模板

    逻辑设计, 顾名思义, 只要理清了逻辑和时序, 剩下的设计只是做填空题而已. 下面给出了有限状态机的标准设计,分别为 VHDL 和 Verilog 代码 1  有限状态机 2  VHDL模板之一 li ...

  4. codeforces 101C C. Vectors(数学)

    题目链接: C. Vectors time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  5. bzoj-3170 3170: [Tjoi 2013]松鼠聚会(计算几何)

    题目链接: 3170: [Tjoi 2013]松鼠聚会 Time Limit: 10 Sec  Memory Limit: 128 MB Description 有N个小松鼠,它们的家用一个点x,y表 ...

  6. PHP基本知识

    PHP是以一种嵌入在HTML代码中的脚本语言,它由服务器负责解释,可以用于管理动态内容.支持数据库.处理会话跟踪.甚至构建整个电子商务站点. PHP支持许多流行.非流行的数据库,包括MySQL.Pos ...

  7. 利用WinPcap模拟网络包伪造飞秋闪屏报文

    起因 不知道从什么时候开始,同事开始在飞秋上发闪屏振动了,后来变本加厉,成了每日一闪.老闪回去也比较麻烦,作为程序猿呢,有没有什么偷懒的办法呢?(同事负责用户体验,不大懂编程).然后尝试了以下思路: ...

  8. mysql查询语句包含有关键字

    查询mysql的时候,有时候mysql表名或者列名会有关键字.这时候查询会有错误.例如表名是order,查询时候会出错. 简单的办法是sql语句里表名或者列名加上`[tab键上面]来加以区别,例如se ...

  9. pycharm简单使用

    http://blog.csdn.net/chenggong2dm/article/details/9365437

  10. KindEditor

    1.官网 www.kindsoft.net 2.MVC下空置处理 例: 页面使用 @model XXModel....@Html.EditorFor(model => model.Content ...