android 的webView加载h5,和h5的交互(java和JavaScript的交互)

2024-09-07 08:48

本文主要是介绍android 的webView加载h5,和h5的交互(java和JavaScript的交互),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

Android提供了一个很强大的WebView控件用来处理Web网页,而在网页中,JavaScript又是一个很举足轻重的脚本。本文将介绍如何实现Java代码和Javascript代码的相互调用。(通俗点说就是,点击那个Web页面的按钮啥的,可以传到原生app;或者原生app调用Web页面的js方法)

如何实现

实现Java和js交互十分便捷。通常只需要以下几步。

  • WebView开启JavaScript脚本执行
  • WebView设置供JavaScript调用的交互接口。
  • 客户端和网页端编写调用对方的代码。

本例代码

为了便于讲解,先贴出全部代码

Java代码

package com.example.testjs;import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.webkit.JavascriptInterface;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Toast;
//参考文档http://www.igooda.cn/jzjl/20141212737.html
public class MainActivity extends Activity {private static final String LOGTAG = "MainActivity";@SuppressLint("JavascriptInterface")@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);final WebView myWebView = (WebView) findViewById(R.id.myWebView);WebSettings settings = myWebView.getSettings();settings.setJavaScriptEnabled(true);//注入接口//js_java_interaction.html文件中的toastMessage(),sumToJava()方法中的window后面的字段myWebView.addJavascriptInterface(new JsInteration(), "control");myWebView.setWebChromeClient(new WebChromeClient() {});myWebView.setWebViewClient(new WebViewClient() {@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);testMethod(myWebView);}});myWebView.loadUrl("file:///android_asset/js_java_interaction.html");}private void testMethod(WebView webView) {
//		只能一次
//		String call = "javascript:sayHello()";
//
//		String call = "javascript:alertMessage(\"" + "content" + "\")";
//
//		String call = "javascript:toastMessage(\"" + "content" + "\")";String call = "javascript:sumToJava(1,2)";webView.loadUrl(call);}//返回结果的处理public class JsInteration {@JavascriptInterfacepublic void toastMessage(String message) {Toast.makeText(MainActivity.this, message, Toast.LENGTH_LONG).show();}
//		onSumResult字段和 window.control.onSumResult(number1 + number2)中的onSumResult一样@JavascriptInterfacepublic void onSumResult(int result) {Log.i(LOGTAG, "onSumResult result=" + result);}}}

前端网页代码

<html>
<script type="text/javascript">function sayHello() {alert("Hello")}function alertMessage(message) {alert(message)}function toastMessage(message) {window.control.toastMessage(message)}function sumToJava(number1, number2){window.control.onSumResult(number1 + number2)}
</script>
Java-Javascript Interaction In Android
</html>

下面介绍下

如何调用  

(1)addJavascriptInterface方法

此方法有两个参数,第一个参数就是我们一般会实现一个自己的类,类里面提供我们要提供给javascript访问的方法;第二个参数是访问我们在obj中声明的方法时候所用到的js对象,调用模式为window.interfaceName.方法名()或者是javascript: interfaceName.方法名() ;,如myWebView.addJavascriptInterface(new JsInteration(), "control");
(2)js调用Java

调用格式为window.jsInterfaceName.methodName(parameterValues) 此例中我们使用的是control作为注入接口名称。

function toastMessage(message) {window.control.toastMessage(message)
}function sumToJava(number1, number2){window.control.onSumResult(number1 + number2)
}

(3)Java调用JS

webView调用js的基本格式为webView.loadUrl(“javascript:methodName(parameterValues)”)

       调用js无参无返回值函数

String call = "javascript:sayHello()";
webView.loadUrl(call);

    调用js有参无返回值函数

注意对于字符串作为参数值需要进行转义双引号。

String call = "javascript:alertMessage(\"" + "content" + "\")";
webView.loadUrl(call);

      调用js有参数有返回值的函数

Android在4.4之前并没有提供直接调用js函数并获取值的方法,所以在此之前,常用的思路是 java调用js方法,js方法执行完毕,再次调用java代码将值返回。

1.Java调用js代码

String call = "javascript:sumToJava(1,2)";
webView.loadUrl(call);

2.js函数处理,并将结果通过调用java方法返回

function sumToJava(number1, number2){window.control.onSumResult(number1 + number2)
}

3.Java在回调方法中获取js函数返回值

@JavascriptInterface
public void onSumResult(int result) {Log.i(LOGTAG, "onSumResult result=" + result);
}

4.4处理

Android 4.4之后使用evaluateJavascript即可。这里展示一个简单的交互示例 具有返回值的js方法

function getGreetings() {return 1;
}

java代码时用evaluateJavascript方法调用

private void testEvaluateJavascript(WebView webView) {webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {Log.i(LOGTAG, "onReceiveValue value=" + value);}});
}

输出结果

I/MainActivity( 1432): onReceiveValue value=1

注意

  • 上面限定了结果返回结果为String,对于简单的类型会尝试转换成字符串返回,对于复杂的数据类型,建议以字符串形式的json返回。
  • evaluateJavascript方法必须在UI线程(主线程)调用,因此onReceiveValue也执行在主线程。
好了总体的就这么多了

还有一些错误的话可以参考,代码混淆的话参考原文: http://www.igooda.cn/jzjl/20141212737.html
最后贴下文中使用的demo吧:http://www.oschina.net/code/snippet_2702417_58168

当然如果觉得这边不太好的话还可以看看:http://www.cnblogs.com/lee0oo0/archive/2012/08/01/2617953.html
android 和h5交互基础篇 http://www.jianshu.com/p/a25907862523?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io  http://www.jianshu.com/p/a25907862523?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

这篇关于android 的webView加载h5,和h5的交互(java和JavaScript的交互)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1144615

相关文章

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时,有没有考虑过 JVM 是如何把静态的字节码(byte code)转化为运行时对象的呢,这个问题看似简单,但清楚的同学相信也不会太多,这篇文章首先介绍 JVM 类初始化的机制,然后给出几个易出错的实例来分析,帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段,分别是:loading 、Linking、initialization

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权,允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true (Spring security默认会带有ROLE_前缀),去

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程,特意画了如下的类图,包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口,接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类,它们之间的依赖,构建起了整个框架。想要理解整个架构,最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文(security context)的信息。当前操作的用户是谁,该用户是否已经被认证,他拥有哪些角色权限…这些都被保

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门(一):登录与退出》 《Spring-Security-入门(二):基于数据库验证》 《Spring-Security-入门(三):密码加密》 《Spring-Security-入门(四):自定义-Filter》 《Spring-Security-入门(五):在 Sprin

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸(两张壁纸可不一致)

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸: 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  (注意不能是bmp格式) 替换默认锁屏壁纸: 将图片资源放入vendo