目录：

一、整体思路

二、简单例子实现过程

       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. char，vchar，nchar，nvchar的区别

    char和varchar的长度都在1到8000之间,它们的区别在于char是定长字符数据,而varchar是变长字符数据.所谓定长就是长度固定的,当输入的数据长度没有达到指定的长度时将自动以英文空格在 ...

  2. redis 非集群的主从配置及切换

    单纯的master-slave不能称之为集群,只能叫做读写分离.此案例只针对master为单点服务,且程序端写死master为可写,slave为只读.若master宕机则不可用,若主从未开启持久化,不 ...

  3. kafka basic commands

    kafka-server-start.sh config/server.properties & kafka-server-stop.sh kafka-topics.sh    --creat ...

  4. zookeeper适用场景：如何竞选Master及代码实现

    问题导读:1.如何利用zookeeper保证集群Master可用性和唯一性?2.zookeeper竞选Master包含哪些过程?3.zookeeper竞选Master机制利用了zk哪些特性? 在zoo ...

  5. hdu-1789-Doing Homework again

    /* Doing Homework again Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...

  6. 手把手教你如何用ZBrush刻画脸部

    今天的ZBrush教程我们将参照一张效果图对模型进行脸部刻画.在进入课堂之前我们有必要对Layers层概念和操作有所了解,然后结合之前学习的雕刻笔刷对模型的特征表情给予重点刻画. 详细的视频教程地址请 ...

  7. 如何解决inline-block元素的空白间距

    早上在博客中有人提了这样一个问题:“li元素inline-block横向排列,出现了未知间隙”,我相信大家在写页面的时候都遇到过这样的情况吧. 我一般遇到这情况都会把li浮动起来,这样就没有间隙.但是 ...

  8. UESTC 912 树上的距离 --LCA+RMQ+树状数组

    1.易知,树上两点的距离dis[u][v] = D[u]+D[v]-2*D[lca(u,v)] (D为节点到根节点的距离) 2.某条边<u,v>权值一旦改变,将会影响所有以v为根的子树上的 ...

  9. 关于comparable与comparator的用法（即自定义集合框架用法 ）

    package javastudy; import java.util.Comparator; import java.util.Iterator; import java.util.TreeSet; ...

  10. android strings.xml 报 is not translated in af,

    57 down vote In your ADT go to window->Preferences->Android->Lint Error Checking Find there ...