Android编程
搜索
分类

Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

作者：books1958 时间：2023-12-04 01:39:07　

本文实例讲述了Android编程使用WebView实现与Javascript交互的方法。分享给大家供大家参考，具体如下：

Android中可以使用WebView加载网页，同时Android端的Java代码可以与网页上的JavaScript代码之间相互调用。

效果图：

Android编程使用WebView实现与Javascript交互的方法【相互调用参数、传值】

（一）Android部分：

布局代码：


<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:focusable="true"
 android:focusableInTouchMode="true"
 android:orientation="vertical"
 android:padding="8dp"
 tools:context=".MainActivity">
 <LinearLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content">
   <EditText
     android:id="@+id/input_et"
     android:layout_width="0dp"
     android:layout_height="wrap_content"
     android:singleLine="true"
     android:layout_weight="1"
     android:hint="请输入信息" />
   <Button
     android:text="Java调用JS"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:onClick="sendInfoToJs" />
 </LinearLayout>
 <WebView
   android:id="@+id/webView"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />
</LinearLayout>

Activity代码：


/**
* Android WebView 与 Javascript 交互。
*/
public class MainActivity extends ActionBarActivity {
 private WebView webView;
 @SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
 @Override
 protected void onCreate(Bundle savedInstanceState) {
   super.onCreate(savedInstanceState);
   setContentView(R.layout.activity_main);
   webView = (WebView) findViewById(R.id.webView);
   webView.setVerticalScrollbarOverlay(true);
   //设置WebView支持JavaScript
   webView.getSettings().setJavaScriptEnabled(true);
   String url = "http://192.168.1.27/js_17_android_webview.html";
   webView.loadUrl(url);
   //在js中调用本地java方法
   webView.addJavascriptInterface(new JsInterface(this), "AndroidWebView");
   //添加客户端支持
   webView.setWebChromeClient(new WebChromeClient());
 }
 private class JsInterface {
   private Context mContext;
   public JsInterface(Context context) {
     this.mContext = context;
   }
   //在js中调用window.AndroidWebView.showInfoFromJs(name)，便会触发此方法。
   @JavascriptInterface
   public void showInfoFromJs(String name) {
     Toast.makeText(mContext, name, Toast.LENGTH_SHORT).show();
   }
 }
 //在java中调用js代码
 public void sendInfoToJs(View view) {
   String msg = ((EditText) findViewById(R.id.input_et)).getText().toString();
   //调用js中的函数：showInfoFromJava(msg)
   webView.loadUrl("javascript:showInfoFromJava('" + msg + "')");
 }
}

（二）网页代码：


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-cn" />
<title>Android WebView 与 Javascript 交互</title>
<head>
<style>
body {background-color:#e6e6e6}
.rect
{
 color:white;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:16px;
 width:100px;
 padding:6px;
 background-color:#98bf21;
 text-decoration:none;
 text-align:center;
 border:none;
 cursor:pointer;
}
.inputStyle {font-size:16px;padding:6px}
</style>
</head>
<body>
<p>测试Android WebView 与 Javascript 交互</p>
<input id = "name_input" class = "inputStyle" type="text"/>
<a class = "rect" onclick="sendInfoToJava()">JS调用Java</a>
<script>
function sendInfoToJava(){
 //调用android程序中的方法，并传递参数
 var name = document.getElementById("name_input").value;
 window.AndroidWebView.showInfoFromJs(name);
}
//在android代码中调用此方法
function showInfoFromJava(msg){
 alert("来自客户端的信息："+msg);
}
</script>
</body>
</html>

希望本文所述对大家Android程序设计有所帮助。

标签：Android,WebView,Javascript
0
投稿

猜你喜欢

  • 解析mybatis-plus中的resultMap简单使用

    2021-09-03 03:53:06

  • Android自定义View实现绘制虚线的方法详解

    2022-06-24 01:18:10

  • java注解的全面分析

    2023-11-25 11:28:50

  • 解决RestTemplate反序列化嵌套对象的问题

    2022-06-26 20:41:24

  • C#多线程之Thread中Thread.Join()函数用法分析

    2022-01-20 14:47:58

  • Android 6.0 蓝牙搜索不到设备原因,MIUI权限申请机制方法

    2021-07-31 01:20:06

  • 如何利用反射生成 MyBatisPlus中QueryWrapper动态条件

    2021-10-20 14:59:40

  • Java中Jackson快速入门

    2023-01-18 10:24:44

  • JAVA中的final关键字用法实例详解

    2021-06-25 12:10:08

  • Android开发实现的IntentUtil跳转多功能工具类【包含视频、音频、图片、摄像头等操作功能】

    2023-05-27 23:58:01

  • java.util.ArrayDeque类使用方法详解

    2022-12-13 11:19:02

  • Java8中Optional类的使用说明

    2023-07-25 13:31:32

  • Android7.0开发实现Launcher3去掉应用抽屉的方法详解

    2021-07-24 12:31:38

  • SpringBoot整合OpenCV的实现示例

    2022-09-07 03:53:19

  • C#中重载与重写区别分析

    2023-11-01 17:43:05

  • java内存溢出示例(堆溢出、栈溢出)

    2021-08-12 19:11:57

  • C#判断多个文本框是否为空的方法

    2022-05-12 23:05:32

  • C#创建WebService接口并连接的全过程

    2023-04-07 07:47:21

  • 使用springCloud+nacos集成seata1.3.0搭建过程

    2022-06-19 02:48:47

  • IDEA高效使用设置指南

    2023-10-30 01:39:37
    • asp之家 软件编程 m.aspxhome.com