Android开发之WebView与js的数据传递

最新推荐文章于 2021-10-12 10:05:50 发布
最新推荐文章于 2021-10-12 10:05:50 发布
阅读量429 收藏
点赞数
文章标签： 移动开发 javascript java ViewUI
原文链接：https://yq.aliyun.com/articles/512938
版权

    在Android开发中不可避免的会出现，使用一个WebView来显示一个h5页面。如果仅仅只是显示h5页面,这不需要特殊的处理，但是很多情况下会出现，js和WebView的交互。比如：将html表单中的数据，传递到Activity中，在Activity中对数据校验，再上传到服务器。

    那么js和WebView如何进行的交互的呢？

    创建AndroidHtml项目。主要代码如下：

MainActivity.java:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
     private  WebView mWebView;
     public  static  final  String URL_TEST= "file:///android_asset/index.html" ;
 
     @SuppressLint ( "JavascriptInterface" )
     @Override
     protected  void  onCreate(Bundle savedInstanceState) {
         super .onCreate(savedInstanceState);
         setContentView(R.layout.activity_main);
         mWebView = (WebView) findViewById(R.id.webView);
         WebSettings settings = mWebView.getSettings();
         settings.setJavaScriptEnabled( true );
 
         mWebView.loadUrl(URL_TEST);
         //addJavascriptInterface这个方法中有两个参数，第一个参数是添加一个对象，这个对象中封装了在js中要调用的native方法，第二个参数是告诉js对象的名称以便于调用native方法
         mWebView.addJavascriptInterface( this , "zzh" ); //
     }
 
     @JavascriptInterface //android 4.2之上的版本需要加上这个注解，表示将这个方法暴露给js调用
     public  void  callAndroidNativeMethod(String str){
         Log.d( "MainActivity" , "---方法被执行了！！！-" );
         Toast.makeText( this ,  "---" +str, Toast.LENGTH_LONG).show();
     }

注解@JavascriptInterface注解在Android版本4.2之上必须要加上。Google官方的解释是

Caution: If you've set your targetSdkVersion to 17 or higher, you must add the @JavascriptInterface annotation to any method that you want available to your JavaScript (the method must also be public). If you do not provide the annotation, the method is not accessible by your web page when running on Android 4.2 or higher.

index.html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
< HTML  lang = "zh-CN" >
     < head >
         < meta  charset = "utf-8" >
         < script  type = "text/javascript"  language = "javascript" >
             function callAndroidNativeMethod(){
                 window.zzh.callAndroidNativeMethod("js中的数据传递到了Android中了");
             }
         </ script >
     </ head >
     < body >
         < button  onclick = "callAndroidNativeMethod()" >点击调用Java代码</ button >
     </ body >
</ HTML >

activity_main.xml中的布局是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<? xml  version = "1.0"  encoding = "utf-8" ?>
< RelativeLayout
     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"
     tools:context = "com.zzh.androidhtml.MainActivity" >
     < Button
         android:id = "@+id/button"
         android:text = "Java调用js方法"
         android:layout_width = "match_parent"
         android:layout_height = "wrap_content" />
     < WebView
         android:id = "@+id/webView"
         android:layout_below = "@+id/button"
         android:layout_width = "match_parent"
         android:layout_height = "match_parent" ></ WebView >
</ RelativeLayout >

好了，上面就是js中如何调用Android Native方法。下面来说说Android Native中怎么调用js方法（要注意Native中调用js方法来处理Android中的业务逻辑的效率差，不建议使用此方式处理Android业务逻辑，但是也要知道如何使用）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
private  WebView mWebView;
public  static  final  String URL_TEST= "file:///android_asset/index.html" ;
 
@SuppressLint ( "JavascriptInterface" )
@Override
protected  void  onCreate(Bundle savedInstanceState) {
     super .onCreate(savedInstanceState);
     setContentView(R.layout.activity_main);
     mWebView = (WebView) findViewById(R.id.webView);
     WebSettings settings = mWebView.getSettings();
     settings.setJavaScriptEnabled( true );
 
     mWebView.loadUrl(URL_TEST);
     mWebView.addJavascriptInterface( this , "zzh" );
 
     findViewById(R.id.button).setOnClickListener( new  View.OnClickListener() {
         @Override
         public  void  onClick(View view) {
             mWebView.loadUrl( "javascript:callJavaScriptMethod()" );
         }
     });
}
 
@JavascriptInterface //android 4.2之上的版本需要加上这个注解，表示将这个方法暴露给js调用
public  void  callAndroidNativeMethod(String str){
     Log.d( "MainActivity" , "---方法被执行了！！！-" );
     Toast.makeText( this ,  "---" +str, Toast.LENGTH_LONG).show();
}

index.html文件比较简单

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
< HTML  lang = "zh-CN" >
< head >
     < meta  charset = "utf-8" >
     < script  type = "text/javascript"  language = "javascript" >
             function callAndroidNativeMethod(){
                 window.zzh.callAndroidNativeMethod("js中的数据传递到了Android中了");
             }
             function callJavaScriptMethod(){
                 document.getElementById("content").innerHTML += "< br \>java调用了js函数";
             }
     </ script >
</ head >
< body >
< button  onclick = "callAndroidNativeMethod()" >点击调用Java代码</ button >
< div  id = "content" ></ div >
</ body >
</ HTML >

 示例比较简单，注释也写的比较清楚不做过多的讲解，全凭自己领悟。



本文转自 墨宇hz 51CTO博客，原文链接:http://blog.51cto.com/zzhhz/1861256

weixin_34353714
关注
安卓使用webview中与JS相互传递数据
qq_21267961的博客
03-09 7736
安卓在使用webview过程中，常常要与js间进行通信。这次我做了简单的总结，如下。一、js传递数据给安卓端：主activity，public class MainActivity extends AppCompatActivity { private WebView mWebView; private String url = "http://wechat-dev.cb3dp.c...
【Android】Android WebView与网页数据交互
xiaokangss的博客
07-06 1825
JS 调用 Android，用到了JNI，大概含义是将注册监听的方法，通过一些类转成Javascript语句，由WebView加载进来。整体代码比较简单，注意其中的对应关系MainActivity loadUrl 可以是项目中asset文件夹下的文件，也可以是一个http地址。 JSBridge 中的注解必须要加，是靠注解识别本地监听方法。 HTML 其中在原生方法中已经有定义。由于JS很灵活，使用JS动态注入的思想，可以让安卓调用到JS方法。就像在浏览器的控制台，你写好js，它也可以改变或者调用网页上的东
android与js传递数据,Android webview与js的数据交互
weixin_39764494的博客
05-28 449
项目要用到Webview和js交互，查了查以前的项目感觉还是有必要整理下的。简单描述下项目中用到的地方，比如说在web页需要用到登录的地方点击登录跳转到APP原生登录界面去登录，点击web页的拨打电话弹出原生dialog询问是否拨打，点击web页里面的图片进行放大处理。针对于上述的需求我们通用的方式大概有两种，一是监听a标签，在shouldOverrideUrlLoading根据URL进行判断，二...
android js 传对象集合,将Android Activity中的值数组传递给WebView中的JavaScript
weixin_39845306的博客
05-25 339
我使用JS图表库在我的Android应用程序的WebView中绘制图形。我想从SQLite数据库提供数据。在这一刻，我被困在如何将数据从Java数组传递到JavaScript。 JavaScript的部分希望这样的事情：将Android Activity中的值数组传递给WebView中的JavaScriptdata = new Array([10, 10], [20, 10]);我了解addJav...
Android：WebView与Javascript交互（相互调用参数、传值）
guolong1983811的专栏
10-12 940
https://blog.csdn.net/books1958/article/details/44747045 Android中可以使用WebView加载网页，同时Android端的java代码可以与网页上的javascript代码之间相互调用。 效果图： （一）Android部分： 布局代码： &lt;LinearLayout xmlns:android="http://schema...
Android WebView 与JS的数据交互
wusejiege6的博客
10-04 369
1.Android调用JS代码的方法有2种 通过WebView的loadUrl 通过WebView的evaluateJavascript java 公共代码 WebSettings webSettings = mWebView.getSettings(); webSettings.setJavaScriptEnabled(true);// 设置与Js交互的权限 webSettings.setJavaScriptCanOpenWindowsAutomatically(true);// 设置允许JS弹窗
Android总结之WebView与Javascript交互（互相调用）
01-04
前言： 最近公司的App为了加快...本篇主要介绍WebView与Javascript交互数据，关于如何将H5网页呈现在WebView上可以参考这篇博客文章：Android总结之WebView使用总结。 WebView与Javascript交互：  WebView与Javascr
Android webview与js交换JSON对象数据示例
09-05
在Android开发中，Webview是一个非常重要的组件，它允许我们加载和展示网页内容，并且能够与JavaScript进行交互。本文将详细介绍如何在Android的Webview中与JavaScript交换JSON对象数据，特别是当JavaScript需要调用...
Android 和 javascript 交互 Android混合开发之WebView与Javascript交互
03-27
Android和javascript的交互是混合开发的核心，通过WebView和JavaScriptInterface，我们可以轻松地在两者之间传递数据和执行复杂操作。理解并熟练掌握这些技术，能够帮助我们构建更加健壮、功能丰富的Android混合应用...
android中WebView和javascript实现数据交互实例
10-25
通过以上两种方法，可以在Android应用中利用WebView组件实现Android代码与JavaScript代码之间的数据交互。这样的交互对于开发需要展示网页内容并进行一些动态交互的应用非常有用。 ### 注意事项： - 当通过`...
webview给前端页面传递数据_Android中WebView页面交互
weixin_35060251的博客
02-22 1120
代码在android内打开一个网页的时候，有时我们会要求与网页有一些交互。而这些交互是在基于javaScript的基础上。那么我们来学习一下android如何与网页进行JS交互。完整代码如下：import android.annotation.SuppressLint;import android.os.Bundle;import android.os.Handler;import android...
使用webview时，JS与Android互相传值的方法
热门推荐
风行天下
03-01 1万+
在Android项目中，有时候整个页面是个webview，用来加载我们制作好的网页。 那么时常会有网页和app进行交互的需求。 首先，webview需要作如下配置，下面几行都是必要的，还有其他配置未列出，可参考： Android webview里加载显示网页，显示进度，点击网页链接跳转到app页面 //支持JavaScript WebSettings setting = webview...
webview给前端页面传递数据_Android WebView交互传递json字符串并解析
weixin_39719727的博客
01-17 951
{"optioninfo":{"dynamic":"true","static":"true"},"simplifiedDisplay":"newSimpleInfoCard","newCard":[],"card":[],"search":[],"infoCard":[{"bannerTitle":"移动研发平台 EMAS，爆款产品0元试用","bannerContent":"一站式研发平台快速...
webview给前端页面传递数据_Android的WebView与H5前端JS代码交互的那点事
weixin_36469682的博客
01-17 710
demo地址：http://www.jianshu.com/p/c20513cad758前段时间项目有深度和前端对接过，也是碰了一些坑，现在有时间就拿出来分享下JS调用原生不外乎就两种，一种是传假的url，也就是url拦截的方式，类似于下面这种：//js代码functionsendCommand(param){varurl="js-call://"+param;document...
android 向webview传值
weixin_33701564的博客
06-22 384
android中可以使用WebView加载网页，同时Android端的java代码可以与网页上的javascript代码之间相互调用。 效果图： （一）Android部分： 布局代码： <span class="tag" style="box-sizing: border-box; color: rgb(0, 0, 136);"&gt...
android webview传值,Android 显示 WebView ，加载URL 时，向webview的 header 里面传递参数...
weixin_39593354的博客
05-26 690
1.主要布局android:id="@+id/webview"android:layout_width="match_parent"android:layout_height="match_parent">2.WebViewActivity代码package com.webview.demo;import android.os.Bundle;import android.support.v7...
安卓webview原生和JavaScript(js)交互传值的4种方式 java和js交互 安卓JsBridge原理解析...
weixin_33890499的博客
02-28 814
安卓和javascript最流行的交互方式有以下4种可以实现交互传值 1，addJavascriptInterface：针对Android 4.2（API 17）及以上，只有标有@JavascriptInterface注解的public方法才能从js调用。而对targetSdkVersion为API Level 16及以下的app，js可以调用Java所有的public方法。 通过publi...
Android WebView与JS交互：实例传值与方法对接
本文档详细探讨了在Android开发中，如何实现WebView与JavaScript之间的交互传值问题，尤其是在混合应用开发中，当需要在原生Java代码与嵌入的Web页面之间共享数据时。首先，我们理解一下为什么要进行这样的交互：在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值