package com.loaderman.webviewdemo;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.view.View;

import android.webkit.JavascriptInterface;

import android.webkit.WebChromeClient;

import android.webkit.WebSettings;

import android.webkit.WebView;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private WebView mWebView;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        mWebView = (WebView) findViewById(R.id.wv_test);

        WebSettings settings = mWebView.getSettings();

        settings.setJavaScriptEnabled(true);//开启js

        mWebView.loadUrl("file:///android_asset/demo.html");//加载本地网页

        mWebView.setWebChromeClient(new WebChromeClient());//此行代码可以保证js的alert弹窗正常弹出

        //核心方法, 用于处理js被执行后的回调

        mWebView.addJavascriptInterface(new JsCallback() {

            @JavascriptInterface//注意:此处一定要加该注解,否则在4.1+系统上运行失败

            @Override

            public void onJsCallback() {

                Toast.makeText(MainActivity.this, "js调用Android啦", Toast.LENGTH_SHORT).show();

            }

        }, "demo");//参1是回调接口的实现;参2是js回调对象的名称

    }

    //定义回调接口

    public interface JsCallback {

         void onJsCallback();

    }

    // android调用js

    public void androidCallJs(View view) {

        mWebView.loadUrl("javascript:wave()");

    }

}

在main/assets下新建demo.html

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

</head>

<script language="javascript">

    /* This function is invoked by the activity */

    function wave() {

        alert("Android调用Js啦");

    }

</script>

<body>a

<!-- Js调用Android代码 -->

<a onClick="window.demo.onJsCallback()">

    <div style="width:80px;

        margin:0px auto;

        padding:10px;

        text-align:center;

        border:2px solid #202020;">

        <img id="droid" src="android_normal.png"/><br>

        Click me!

    </div>

</a>

</body>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

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

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

    android:id="@+id/activity_main"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="vertical"

    tools:context="com.loaderman.webviewdemo.MainActivity">

    <Button

        android:text="android调用js"

        android:layout_width="match_parent"

        android:onClick="androidCallJs"

        android:layout_height="wrap_content"/>

    <WebView

        android:id="@+id/wv_test"

        android:layout_width="match_parent"

        android:layout_height="match_parent" />

</LinearLayout>

添加网络权限:

    <uses-permission android:name="android.permission.INTERNET"/>

效果实现:

注意: js回调的方法的书写格式: onClick="window.demo.onJsCallback() 格式是: window.js回调对象的名称(要和java代码中设置的一致).回调方法名称(要和java代码中设置的一致)

Js调用Android的方式具有版本兼容问题. 经测试, 在2.2, 4.0+ 系统上运行稳定, 可以正常调用, 但是在2.3系统上运行时出现崩溃.原因是底层进行JNI调用时，把一个Java中的String对象当数组来访问了，最终导致虚拟机崩溃. 基本算是一个比较严重的BUG，没办法解决，所以如果说用WebView组件想在js和java之间相互调用的话就没办法适应所有机型.

Android和jS互调技术Demo实现的更多相关文章

  1. Android 平台JS调试技术

    1.  测试技术简介 Android平台微信公众号一般以H5的形式开发,测试发现流量一般都通过js进行加密传输,导致无法对越权.SQL注入等风险点进行测试.针对此难点,本手册会介绍包括Android环 ...

  2. Android 与 js 简单互调

    总结: Android 调用  js: 在 Android 中创建通往 javascript 的接口; 在 html  中定义要执行的方法; 在  Android  中的具体事件中进行调用. cont ...

  3. ActionScript 3.0入门：Hello World、文件读写、数据存储(SharedObject)、与JS互调

    近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0,现把学习结果分享一下,希望对新手有帮助. 目录 ActionScript 3.0简介 Hello ...

  4. Android与JS之间跨平台异步调用

     为什么突然要搞这个问题呢?  在开发浏览器的时候遇到这个狗血的问题,花了将近1天的时间才想到这个解决方案,Android与JavaScirpt互调. 因为接口是抓取的别人的,所以出现了JS跨域问题, ...

  5. [转]JS调用Android里面的方法，Android调用JS里面的方法

    FROM : http://blog.csdn.net/hj563308597/article/details/45197709 Android WebView 在公司Android的开发过程中遇到一 ...

  6. [转]ActionScript 3.0入门：Hello World、文件读写、数据存储(SharedObject)、与JS互调

    本文转自:http://www.cnblogs.com/artwl/p/3396330.html 近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0, ...

  7. Android中Java反射技术的使用示例

    import java.lang.reflect.Constructor; import java.lang.reflect.Field; import java.lang.reflect.Metho ...

  8. Android与js互相调用

    有话要说: 本篇主要总结了简单的Android与js互相调用的方法. 在开发过程中遇到了需要在安卓中调用js方法的需求,于是将具体的实现过程总结成这篇博客. 效果: 其中“调用安卓方法”按钮是html ...

  9. Android －BLE蓝牙小DEMO

    代码地址如下:http://www.demodashi.com/demo/13890.html 原文地址: https://blog.csdn.net/vnanyesheshou/article/de ...

随机推荐

  1. 第六章·Logstash深入-收集java日志

    1.通过Logstash收集java日志并输出到ES中 因为我们现在需要用Logstash收集tomcat日志,所以我们暂时将tomcat安装到Logstash所在机器,也就是db03:10.0.0. ...

  2. C++第三次作业：作用域

    作用域的定义 作用域是一个标识符在程序正文中有效的区域. 1.函数原型作用域 在函数原型声明时形式参数的作用范围就是函数原型作用域. 它是C++程序中最小的作用域. 例: double area(do ...

  3. java线程基础巩固---线程ID，优先级

    这里学习Thread的两个比较简单的API,直接上代码: 线程ID: 那它的生成规则是?直接看源码: 那为什么目前打印是9呢?然后在jvm启动的时候就已经创建了8个线程?继续用jconsole来验证一 ...

  4. C++——子类调用父类方法

    原创声明:本文系博主原创文章,转载或引用请注明出处. 1. 如果类B是类A的子类,则在类B的成员方法中调用类A的方法时,可以直接以 A::method(paramlist); 来调用. 2. 若子类B ...

  5. win10日历交互效果

    win10日历 早就想试着实现以下win10日历的动态css效果,现在终于有时间试试啦.本篇文章只是实现简单的效果,进阶篇后续会放上来 目标效果 鼠标移入目标元素,周围相关八块元素点亮,点亮高光范围呈 ...

  6. spark写数据入kafka示范代码

    一.pom文件 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="htt ...

  7. 将页面内搜索结果高亮显示（使用mark.js），且页面顶部定位到第一个搜索结果

    <!DOCTYPE> <html> <head> <title> new document </title> <meta name=& ...

  8. 利用msyqlfont + plsql 客户端 完成msyql数据向oracle的转移

    方法一: 1.这是mysqlfont 连接工具 ,选中表右键点击 输出->csv文件 2.选择导出的文件为ANSI型,因为csv文件excel打开的默认编码方式为ANSI这样可以防止中文在exc ...

  9. MessagePack Java Jackson 在不关闭输出流（output stream）的情况下序列化多变量

    com.fasterxml.jackson.databind.ObjectMapper 在默认的情况下在写出输入后将会关闭输出流(output stream). 如果你希望序列化多值变量在同一个输出流 ...

  10. 一、基本的bash shell命令（基于Ubuntu实现）

    一.基本的bash shell命令(基于Ubuntu实现) /etc/passwd文件包含了所有系统用户账户列表以及每个用户的基本配置信息. man命令 在想要查找的工具的名称前输入man命令,就可以 ...