目录：

一、整体思路

二、简单例子实现过程

       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. C语言变参问题

    C++中有函数重载这种方法,以供我们调用时要可以不确定实参的个数,其实 C 语言也可以,而且更高明! 我们在stdio.h 中可以看到 printf() 函数的原型: int printf(char ...

  2. Oracle Jdbc demo

    两种方式: thin是一种瘦客户端的连接方式,即采用这种连接方式不需要安装oracle客户端,只要求classpath中包含jdbc驱动的jar包就行.thin就是纯粹用Java写的ORACLE数据库 ...

  3. 读高性能JavaScript编程学英语 第一章第三页第一段话

    When the browser encounters a <script> tag, as in this HTML page, there is no way of knowing w ...

  4. SDRAM总结

    使用的流程 W9825G6JH winbond sdram 4M words X 4banks X 16bits=. Accesses to the SDRAM are burst oriented. ...

  5. hyperstart 容器创建流程分析

    hyperstart中运行的pod的核心数据结构如下所示: struct hyper_pod { struct hyper_interface *iface; struct hyper_route * ...

  6. poj-3739. Special Squares(二维前缀和)

    题目链接: I. Special Squares There are some points and lines parellel to x-axis or y-axis on the plane. ...

  7. bzoj-3444 3444: 最后的晚餐(组合数学)

    题目链接: 3444: 最后的晚餐 Time Limit: 5 Sec  Memory Limit: 128 MB Description [问题背景] 高三的学长们就要离开学校,各奔东西了.某班n人 ...

  8. Java学习----Java概述

    一.常用DOS命令 d:      盘符切换 dir(directory)  列出当前目录下的文件以及文件夹 md (make directory)  创建目录 rd (remove director ...

  9. C++容器的复制

    C++容器的复制不同于Java Java是引用复制,复制的仅仅是对象的引用, 在需要复制容器内对象的副本集合的情况,需要使用Clone方法,而且要注意clone方法的浅拷贝 深拷贝 C++的容器复制 ...

  10. Xcode视图调试

    视图调试 使用视图调试器检查您的视图层次结构,可以轻松地判断视图位置.大小以及实现问题. 在XCode中运行你的应用程序,在调试栏上点击“调试视图层次”按钮,进入视图调试器. XCode停止你的应用程 ...