目录：

一、整体思路

二、简单例子实现过程

       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. 使用SSIS包调度开发的包

    在项目中,开发完自己的packages之后,需要使用agentjob之类的服务来调度自己的package,当然我们也可以使用一个package来调度这些,下面就是我的一个简单的尝试. 没有设计得像Ag ...

  2. node.js环境搭建

    (1)Node.js安装 Node.js安装包及源码下载地址为: https://nodejs.org/download/   , 双击下载后的安装包.msi,检查Node.js版本命令:node - ...

  3. 使用selenium实现右键另存为保存文件

    1.需要借住autoit工具和Robot类,下载地址:https://www.autoitscript.com/site/autoit/downloads/ 2.autoit的使用不再详细讲解.如下图 ...

  4. 【温故而知新-Javascript】使用事件

    1. 使用简单事件处理器 可以用几种不同的方式处理事件.最直接的方式是用事件属性创建一个简单事件处理器(simple event handler).元素为它们支持的每一种事件都定义了一个事件属性.举个 ...

  5. UESTC 915 方老师的分身II --最短路变形

    即求从起点到终点至少走K条路的最短路径. 用两个变量来维护一个点的dis,u和e,u为当前点的编号,e为已经走过多少条边,w[u][e]表示到当前点,走过e条边的最短路径长度,因为是至少K条边,所以大 ...

  6. java22 - 1 多线程之 单线程和多线程的图解

  7. 继承进一步使用，以及super关键字

    目标: 1)掌握子类对象实例化过程 2)掌握方法覆盖概念和实现. 3)掌握super关键字的作用. 一,子类对象实例化过程 子类对象在实例化之前,必须先调用父类中的构造方法,再调用子类中的构造方法. ...

  8. Python-执行系统命令

    执行系统命令 os.system os.spawn* os.popen popen2.* commands.* 后面三个已经废弃,以上执行shell命令的相关的模块和函数的功能均在subprocess ...

  9. iOS sha1加密算法

    最近在项目中使用到了网络请求签名认证的方法,于是在网上找关于OC sha1加密的方法,很快找到了一个大众使用的封装好的方法,以下代码便是 首先需要添加头文件 #import<CommonCryp ...

  10. ueditor集成自己的ImageServer时出现错误的原因分析

    1.场景:应用是一个独立的站点,ImageServer是一个独立的站点,因此存在跨域的问题. 2.遇到的详细错误“网络链接错误,请检查配置后重试!” 我使用uploadify测试是没问题的.使用ued ...