Android开发之android与JS互调 | Android与H5互调(附源码)

我们先看下JS代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Js与Android交互</title>
</head>
<body>
<H2>点击获取按钮,弹出输入框内容</H2><div><span>输入数据：</span><input type="text" id="input"/></div>
<div id="btn"><span class="btn">点我获取数据</span></div><script type="text/javascript">var inputData = document.getElementById("input")var btn = document.getElementById("btn")//Js调用Android方法btn.addEventListener("click", function () {var getInputData = inputData.value;//androidJs这个方法必须和Android里面的方法保持一致if (window.androidJs) {//getJsData这个方法必须和Android里面的方法保持一致androidJs.getJsData(getInputData)} else {alert("与android互调方法不存在！")}});//Android调用Js的方法,writeInputText此方法需要跟android里面的方法保持一致var writeInputText = function (str) {inputData.value = str;//带返回值的JS方法return '互调成功!'}</script>
</body>
</html>

再来看下android代码：

package kotlin.yhsh.cn.androidandjs;import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;/*** @author DELL* 2019年7月23日19:34:25*/
public class MainActivity extends Activity {private TextView tvShowData;private WebView wvLoadHtml;private EditText etInputToJs;private Button btClickInputToJs;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);tvShowData = findViewById(R.id.tv_show_data);wvLoadHtml = findViewById(R.id.wv_load_html);etInputToJs = findViewById(R.id.et_input_to_js);btClickInputToJs = findViewById(R.id.bt_click_input_to_js);btClickInputToJs.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {String inputToJs = etInputToJs.getText().toString().trim();//if(window.writeInputText)判断Js里面的writeInputText是否存在，存在就传递inputToJs这个值到Js里面//wvLoadHtml.loadUrl("javascript:if(window.writeInputText){window.writeInputText('" + inputToJs + "')}");//下面方法是Android4.4以后才可以用wvLoadHtml.evaluateJavascript("javascript:if(window.writeInputText){window.writeInputText('" + inputToJs + "')}", new ValueCallback<String>() {@Overridepublic void onReceiveValue(String value) {Log.e("打印互调", value + "=");}});}});WebSettings settings = wvLoadHtml.getSettings();settings.setJavaScriptEnabled(true);//方法一：androidJs这个方法必须和Js里面的方法保持一致wvLoadHtml.addJavascriptInterface(new OpenWebView(), "androidJs");//方法二：
//        wvLoadHtml.addJavascriptInterface(new GetWebViewData() {
//            @Override
//            @JavascriptInterface
//            public void getJsData(String data) {
//                getFinallyData(data);
//            }
//        }, "androidJs");//加载HTMLwvLoadHtml.loadUrl("file:///android_asset/loadAndroid.html");}/*** Js的回调结果方法*/class OpenWebView {/*** getJsData这个方法必须和Js里面的方法保持一致** @param data Js返回的数据*/@JavascriptInterfacepublic void getJsData(final String data) {getFinallyData(data);}}/*** getJsData这个方法必须和Js里面的方法保持一致*/interface GetWebViewData {/*** Js返回的数据** @param data 数据*/void getJsData(String data);}private void getFinallyData(final String data) {Log.e("打印拿到的数据", data);//当前是子线程runOnUiThread(new Runnable() {@Overridepublic void run() {tvShowData.setText(data);}});}
}

再来看下xml布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns: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:orientation="vertical"tools:context=".MainActivity"><WebViewandroid:id="@+id/wv_load_html"android:layout_weight="1"android:layout_width="match_parent"android:layout_height="0dp"/><TextViewandroid:text="Js调用Android后显示的数据"android:gravity="center"android:id="@+id/tv_show_data"android:layout_width="match_parent"android:layout_height="100dp"/><Viewandroid:background="@color/colorPrimary"android:layout_width="match_parent"android:layout_height="1dp"/><EditTextandroid:layout_marginTop="10dp"android:id="@+id/et_input_to_js"android:layout_width="match_parent"android:layout_height="wrap_content"/><Buttonandroid:text="android调用Js代码"android:id="@+id/bt_click_input_to_js"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout>

来看下效果图：

JS调用android：

在HTML页面输入数据，然后在最下面的textView控件显示输入内容

再看下android调用JS：

看不懂的可自行下载源码：源码下载

另外附加GitHub下载地址：Android与JS互调源码下载

总结如下：

Android与 js 是如何交互的

在 Android 中，Android 与js 的交互分为两个方面：Android 调用 js 里的方法、js 调用 Android 中的方法;

Android调js。 Android 调 js 有两种方法：

WebView.loadUrl("javascript:js代码")。这种方法的优点是很简洁，缺点是没有返回值，如果需要拿到js方法的返回值则需要js调用Android中的方法来拿到这个返回值；
WebView.evaluateJavaScript("javascript:js中的方法名",ValueCallback)。这种方法比 loadUrl 好的是可以通过 ValueCallback 这个回调拿到 js方法的返回值。缺点是这个方法 Android4.4 才有，兼容性较差。不过放在 2018 年来说，市面上绝大多数 App 都要求最低版本是 4.4 了，所以我认为这个兼容性问题不大；

js 调 Android。 js 调 Android有三种方法：

WebView.addJavascriptInterface()。这是官方解决 js 调用 Android 方法的方案，需要注意的是要在供 js 调用的 Android 方法上加上 @JavascriptInterface 注解，以避免安全漏洞。这种方案的缺点是 Android4.2 以前会有安全漏洞，不过在 4.2 以后已经修复了。同样，在 2018 年来说，兼容性问题不大；
重写 WebViewClient的shouldOverrideUrlLoading()方法来拦截url，拿到 url 后进行解析，如果符合双方的规定，即可调用 Android 方法。优点是避免了 Android4.2 以前的安全漏洞，缺点也很明显，无法直接拿到调用 Android 方法的返回值，只能通过 Android 调用 js 方法来获取返回值；
重写 WebChromClient 的 onJsPrompt() 方法，同前一个方式一样，拿到 url 之后先进行解析，如果符合双方规定，即可调用Android方法。最后如果需要返回值，通过 result.confirm("Android方法返回值") 即可将 Android 的返回值返回给 js。方法的优点是没有漏洞，也没有兼容性限制，同时还可以方便的获取 Android 方法的返回值。其实这里需要注意的是在 WebChromeClient 中除了 onJsPrompt 之外还有 onJsAlert 和 onJsConfirm 方法。那么为什么不选择另两个方法呢？原因在于 onJsAlert 是没有返回值的，而 onJsConfirm 只有 true 和 false 两个返回值，同时在前端开发中 prompt 方法基本不会被调用，所以才会采用onJsPrompt；

Android开发之android与JS互调 | Android与H5互调(附源码)相关推荐

android开发之Intent.setFlags()_让Android点击通知栏信息后返回正在运行的程序
android开发之Intent.setFlags()_让Android点击通知栏信息后返回正在运行的程序在应用里使用了后台服务,并且在通知栏推送了消息,希望点击这个消息回到activity, ...
python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...
JS sojson.vX在线解密工具-附源码
前言此文仅用于技术科普,教育与研究用途,请勿用于商业甚至非法用途,否则一切后果自负.若用户利用此文章而受到惩处,本人及本平台对其行为概不负责,亦不承担任何连带责任. 在线工具 Sojson.v4ht ...
Android一行代码实现网络加载GIF闪图（附源码）
最近项目有个需求是要从网络加载GIF闪图, 但是Android原生的ImageView并不支持Gif... 于是从网上看了些Dome, 发现总是有些这样那样的问题, 譬如: ☹ 没有缓存,还要自己写一 ...
Android开发之2016_最流行的Android组件、工具、框架大全
Android 是目前最流行的移动操作系统之一. 随着新版本的不断发布, Android的功能也日益强大, 涌现了很多流行的应用程序, 也催生了一大批的优秀的组件. 本文试图将目前流行的组件收集起来以 ...
Android应用系列：完美运行GIF格式的ImageView（附源码）
前言我们都知道ImageView是不能完美加载Gif格式的图片,如果我们在ImageView中src指定的资源是gif格式的话,我们将会惊喜的发觉画面永远停留在第一帧,也就是不会有动画效果.当然,经 ...
【Android App】实战项目之仿微信的视频通话（附源码和演示超详细必看）
需要源码请点赞关注收藏后评论区留言私信~~~ 虽然手机出现许多年了,它具备的功能也越来越丰富,但是最基本的通话功能几乎没有变化.从前使用固定电话的时候,通话就是听声音:如今使用最新的智能手机,通话仍旧 ...
Spring Boot + Vue.js 实现前后端分离（附源码）
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章作者: 梁小生0101 链接:juejin.im/post/5c6 ...
Node.js校园志愿者管理系统-计算机毕设附源码78452
Node.js校园志愿者管理系统摘要信息化社会内需要与之针对性的信息获取途径,但是途径的扩展基本上为人们所努力的方向,由于站在的角度存在偏差,人们经常能够获得不同类型信息,这也是技术最为难以攻克 ...
h5 数字变化_基于JS实现数字动态变化显示效果附源码
先给大家展示下效果,感觉不错,可以参考实现代码,文末附有源码哦. 1.目标以液晶电子表样式,动态变化的在指定元素内显示数字. 目标关键词:动态变化(定时器),指定元素(DOM元素ID),数字(num ...

Android开发之android与JS互调 | Android与H5互调(附源码)

Android开发之android与JS互调 | Android与H5互调(附源码)相关推荐

最新文章

热门文章