目录：

一、整体思路

二、简单例子实现过程

       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. 深入理解UIApplication和ios程序启动过程

    在深入理解UIApplication前我们先了解ios程序的启动过程: UIApplication类在ios里面为app的管理和协调提供一个集中的点,每一个app有一个UIApplication的实例 ...

  2. CBT 简介

    http://kb.vmware.com/selfservice/microsites/search.do?language=en_US&cmd=displayKC&externalI ...

  3. A*寻路初探 GameDev.net

    A*寻路初探 GameDev.net MulinB按:经典的智能寻路算法,一个老外写的很透彻很清晰,很容易让人理解神秘的A*算法.以下是一个中文翻译版. A*寻路初探 GameDev.net 作者: ...

  4. IL查看override

    查看override的IL Override示例 下面我们看一个Override的Example namespace MyCollection { public class MyBase { publ ...

  5. Linux压力测试工具Tsung安装、使用和图形报表生成

    简介 Tsung 是一个压力测试工具,可以测试包括HTTP, WebDAV, PostgreSQL, MySQL, LDAP, and XMPP/Jabber等服务器.针对 HTTP 测试,Tsung ...

  6. HTML5 - 使用JavaScript控制<audio>音频的播放

    有时我们需要使用js来控制播放器实现音乐的播放,暂停.或者使用js播放一些音效.   1,通过JavaScript控制页面上的播放器 比如把页面上添加一个<audio>用来播放背景音乐(由 ...

  7. [tools]神器notepad++

    1,现象 notepad++编辑sh文件,放入linux后执行会有问题 2,解决: 2.1dos2unix转换文件 2,2 修改notepad++默认字符集 2,快捷键: ctrl+k 单行.多行注释 ...

  8. 变态跳台阶-一只青蛙一次可以跳上1级台阶，也可以跳上2级……它也可以跳上n级。求该青蛙跳上一个n级的台阶总共有多少种跳法。

    class Solution { public: int jumpFloorII(int number) { ) ; ) ; *jumpFloorII(number-); } };

  9. C#关于MSMQ通过HTTP远程发送专有队列消息的问题

    两台计算机的操作系统都是Windows Server 2008两台计算机都安装了MSMQ+Http支持两台计算机的防火墙全部关闭本地Ip:192.168.1.104远程Ip:192.168.1.142 ...

  10. 免费Flash图表工具FusionChart

    图表显示是很多开发工作所必不可少的一项功能,今天我介绍一个前段时间发现的免费的Flash图表开发工具,可以通过Adobe Flash实现数据的图表化,动态化以及相互交互. FusionChart是一个 ...