AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Java与js的交互

2014-06-07 1256
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：  在android的开发过程中，有很多时候需要用到本地java代码和javascript进行交互。android对交互进行了很好的封装，在开发中我们可以很简单的用java代码调用webview中的js，也可以用webview中的js来调用本地的java代码，这样我们可以实现很多原来做不了的功能，比如点击网页上的电话号码后，手机自动拨打电话，点击网页中的笑话，自动发送短信等. 废话不多
 在android的开发过程中，有很多时候需要用到本地java代码和javascript进行交互。android对交互进行了很好的封装， 在开发中我们可以很简单的用java代码调用webview中的js，也可以用webview中的js来调用本地的java代码， 这样我们可以实现很多原来做不了的功能，比如点击网页上的电话号码后，手机自动拨打电话，点击网页中的笑话，自动发送短信等.

废话不多说，这次教程的目标如下
  1. android 中的java代码调用webview里面的js脚本
  2. webview中的js脚本调用本地的java代码
  3. java调用js并传递参数
  4. js调用java并传递参数
功能一

android中调用webview中的js脚本非常方便，只需要调用webview的loadUrl方法即可（ 注意开启js支持）

[html] view plain copy
  1. // 启用javascript  
  2. contentWebView.getSettings().setJavaScriptEnabled(true);  
  3. // 从assets目录下面的加载html  
  4. contentWebView.loadUrl("file:///android_asset/wst.html");  
  5.   
  6.               // 无参数调用  
  7.        contentWebView.loadUrl("javascript:javacalljs()");  

功能二
webview中js调用本地java方法，这个功能实现起来稍微有点麻烦，不过也不怎么复杂， 首先要对webview绑定javascriptInterface，js脚本通过这个接口来调用java代码。
[java] view plain copy
  1. contentWebView.addJavascriptInterface(this, "wst");  
javainterface实际就是一个普通的java类，里面是我们本地实现的java代码， 将object 传递给webview，并指定别名，这样js脚本就可以通过我们给的这个别名来调用我们的方法,在上面的代码中， this是实例化的对象，wst是这个对象在js中的别名

功能三
java代码调用js并传递参数
只需要在待用js函数的时候加入参数即可，下面是传递一个参数的情况，需要多个参数的时候自己拼接及行了，注意str类型在传递的时候参数要用单引号括起来
[java] view plain copy
  1. mWebView.loadUrl("javascript:test('" + aa+ "')"); //aa是js的函数test()的参数  
功能四
js调用java函数并传参，java函数正常书写，在js脚本中调用的时候稍加注意
然后在html页面中，利用如下代码，即可实现调用
[html] view plain copy
  1. <div id='b'><a onclick="window.wst.clickOnAndroid(2)">b.c</a></div>  

这里准备了一个实例，实现上面的功能

这里是实例的html代码，从assert中加载，原来做项目的时候，从assert中加载的中文网页会出现乱码，解决办法就是给html指定编码。如下


[html] view plain copy
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type"  content="text/html;charset=gb2312">  
  4. <script type="text/javascript">  
  5. function javacalljs(){  
  6.      document.getElementById("content").innerHTML +=     
  7.          "<br\>java调用了js函数";  
  8. }  
  9.   
  10. function javacalljswithargs(arg){  
  11.      document.getElementById("content").innerHTML +=     
  12.          ("<br\>"+arg);  
  13. }  
  14.   
  15. </script>  
  16. </head>  
  17. <body>  
  18. this is my html <br/>  
  19. <a onClick="window.wst.startFunction()">点击调用java代码</a><br/>  
  20. <a onClick="window.wst.startFunction('hello world')" >点击调用java代码并传递参数</a>  
  21. <br/>  
  22. <div id="content">内容显示</div>  
  23. </body>  
  24. </html>  

java代码 如下

[java] view plain copy
  1. package wst.webview;  
  2.   
  3. import android.annotation.SuppressLint;  
  4. import android.app.Activity;  
  5. import android.os.Bundle;  
  6. import android.view.View;  
  7. import android.view.View.OnClickListener;  
  8. import android.webkit.WebView;  
  9. import android.widget.Button;  
  10. import android.widget.TextView;  
  11. import android.widget.Toast;  
  12.   
  13. public class MainActivity extends Activity {  
  14.   
  15.     private WebView contentWebView = null;  
  16.     private TextView msgView = null;  
  17.   
  18.     @SuppressLint("SetJavaScriptEnabled")  
  19.     @Override  
  20.     public void onCreate(Bundle savedInstanceState) {  
  21.         super.onCreate(savedInstanceState);  
  22.         setContentView(R.layout.main);  
  23.         contentWebView = (WebView) findViewById(R.id.webview);  
  24.         msgView = (TextView) findViewById(R.id.msg);  
  25.         // 启用javascript  
  26.         contentWebView.getSettings().setJavaScriptEnabled(true);  
  27.         // 从assets目录下面的加载html  
  28.         contentWebView.loadUrl("file:///android_asset/wst.html");  
  29.   
  30.         Button button = (Button) findViewById(R.id.button);  
  31.         button.setOnClickListener(btnClickListener);  
  32.         contentWebView.addJavascriptInterface(this, "wst");  
  33.     }  
  34.   
  35.     OnClickListener btnClickListener = new Button.OnClickListener() {  
  36.         public void onClick(View v) {  
  37.             // 无参数调用  
  38.             contentWebView.loadUrl("javascript:javacalljs()");  
  39.             // 传递参数调用  
  40.             contentWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")");  
  41.         }  
  42.     };  
  43.   
  44.     public void startFunction() {  
  45.         Toast.makeText(this, "js调用了java函数", Toast.LENGTH_SHORT).show();  
  46.         runOnUiThread(new Runnable() {  
  47.   
  48.             @Override  
  49.             public void run() {  
  50.                 msgView.setText(msgView.getText() + "\njs调用了java函数");  
  51.   
  52.             }  
  53.         });  
  54.     }  
  55.   
  56.     public void startFunction(final String str) {  
  57.         Toast.makeText(this, str, Toast.LENGTH_SHORT).show();  
  58.         runOnUiThread(new Runnable() {  
  59.   
  60.             @Override  
  61.             public void run() {  
  62.                 msgView.setText(msgView.getText() + "\njs调用了java函数传递参数：" + str);  
  63.   
  64.             }  
  65.         });  
  66.     }  
  67. }  

布局文件

[html] view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <WebView  
  8.         android:id="@+id/webview"  
  9.         android:layout_width="fill_parent"  
  10.         android:layout_height="fill_parent"  
  11.         android:layout_weight="9" />  
  12.   
  13.     <ScrollView  
  14.         android:id="@+id/scrollView1"  
  15.         android:layout_width="fill_parent"  
  16.         android:layout_height="wrap_content" >  
  17.   
  18.         <TextView  
  19.             android:id="@+id/msg"  
  20.             android:layout_width="fill_parent"  
  21.             android:layout_height="fill_parent"  
  22.             android:text="text" />  
  23.     </ScrollView>  
  24.   
  25.     <Button  
  26.         android:id="@+id/button"  
  27.         android:layout_width="fill_parent"  
  28.         android:layout_height="wrap_content"  
  29.         android:layout_weight="1"  
  30.         android:text="java调用js函数" />  
  31.   
  32. </LinearLayout>  

希望对大家有所帮助
资源下载地址
文章标签：
Android开发
JavaScript
Java
前端开发
关键词：
JavaScript交互
Java js
Java交互
JavaScript Java
code_xzh
目录
相关文章
小王老师呀
|
2月前
|
缓存 JavaScript 前端开发
Java 如何确保 JS 不被缓存
【10月更文挑战第19天】在 Java 中，可以通过设置 HTTP 响应头来确保 JavaScript 文件不被浏览器缓存。方法包括：1. 使用 Servlet 设置响应头，通过 `doGet` 方法设置 `Expires`、`Cache-Control` 和 `Pragma` 头；2. 在 Spring Boot 中配置拦截器，通过 `NoCacheInterceptor` 类和 `WebConfig` 配置类实现相同功能。这两种方法都能确保每次请求都能获取到最新的 JavaScript 内容。
小王老师呀
44 1
土木林森
|
4月前
|
开发框架 JavaScript 前端开发
揭秘：如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语，再引发服务器端魔法！
【8月更文挑战第16天】在ASP.NET开发中，处理客户端与服务器交互时，常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件，但难以插入客户端逻辑。本文对比此法与改进方案：利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交，增强了灵活性和用户体验，同时确保了服务器端逻辑的执行。
土木林森
51 5
龙大吉
|
20天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧，涵盖 DOM 获取、修改、创建、删除元素的方法，事件处理，性能优化及与其他前端技术的结合，助你构建动态交互的网页应用。
龙大吉
29 5
左诗右码
|
23天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中，后端与前端的数据交换常使用JSON格式，但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数，超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包，介绍如何通过将大整数以字符串形式序列化和反序列化，有效解决这一问题，确保前后端数据交换的准确性。
左诗右码
31 4
土木林森
|
1月前
|
设计模式 前端开发 JavaScript
揭秘！前端大牛们如何巧妙利用JavaScript，打造智能交互体验！
【10月更文挑战第30天】前端开发领域充满了无限可能与创意，JavaScript作为核心语言，凭借强大的功能和灵活性，成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果，展示了JavaScript的多样性和强大能力。
土木林森
46 4
2的n次方_
|
2月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式（行内、内部、外部）和基础语法，包括变量、数据类型、运算符、数组、函数和对象等内容。同时，文章还详细讲解了 jQuery 的基本语法和常用方法，如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等，以及如何插入和删除元素。通过示例代码和图解，帮助读者更好地理解和应用这些知识。
2的n次方_
28 1
【JavaScript】网页交互的灵魂舞者
土木林森
|
1月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发：掌握ArkUI（包括Java UI和JS UI）进行界面开发
【10月更文挑战第22天】随着科技发展，操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI，探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发，性能较高；JS UI适合快速开发简单界面，跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
土木林森
99 8
小王老师呀
|
2月前
|
人工智能 缓存 Java
深入解析Spring AI框架：在Java应用中实现智能化交互的关键
【10月更文挑战第12天】Spring AI 是 Spring 框架家族的新成员，旨在满足 Java 应用程序对人工智能集成的需求。它支持自然语言处理、图像识别等多种 AI 技术，并提供与云服务（如 OpenAI、Azure Cognitive Services）及本地模型的无缝集成。通过简单的配置和编码，开发者可轻松实现 AI 功能，同时应对模型切换、数据安全及性能优化等挑战。
小王老师呀
167 3
威哥爱编程
|
2月前
|
缓存 JavaScript 前端开发
Java 如何确保 JS 不被缓存
大家好，我是 V 哥。本文探讨了 Java 后端确保 JavaScript 不被缓存的问题，分析了文件更新后无法生效、前后端不一致、影响调试与开发及安全问题等场景，并提供了使用版本号、设置 HTTP 响应头、配置静态资源缓存策略和使用 ETag 等解决方案。最后讨论了缓存的合理使用及其平衡方法。
威哥爱编程
100 0
木子0204
|
2月前
|
JavaScript Java
Java 控制台VUE.JS的使用
Java 控制台VUE.JS的使用
木子0204
20 0

热门文章

最新文章

  • 1
    【Java】留下没有基础眼泪的面试题
  • 2
    阿里巴巴Java开发规约-插件使用[Idea和Eclipse]
  • 3
    关于Java面向对象的分析题
  • 4
    漫谈 Java 实例化类
  • 5
    代码行数减少 30-90%！多邻国从Java迁移到Kotlin的奇妙体验
  • 6
    10 招让你成为杰出的 Java 程序员
  • 7
    《连载 | 物联网框架ServerSuperIO教程》1.4种通讯模式机制。附小文：招.NET开发，结果他转JAVA了，一切都是为了生活
  • 8
    超简单的java爬虫
  • 9
    Java-学习笔记-8-接口
  • 10
    Java Poi 创建与读取Excel
  • 1
    JavaScript闭包允许内部函数访问并保留外部函数的变量，即使外部函数执行结束
    53
  • 2
    js设计模式-观察者模式与发布/订阅模式
    68
  • 3
    js设计模式-策略模式与代理模式的应用
    71
  • 4
    深入理解JavaScript中的闭包机制
    59
  • 5
    使用Vue.js构建交互式前端的技术探索
    87
  • 6
    使用Node.js构建实时聊天应用的技术指南
    122
  • 7
    深入理解JavaScript中的事件循环机制
    85
  • 8
    【MongoDB 专栏】MongoDB 的 JavaScript 引擎与脚本执行
    115
  • 9
    JavaScript 数组方法概览
    37
  • 10
    在JavaScript中，函数原型（Function Prototype）是一个特殊的对象
    65

    • 相关课程

    更多
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计
  • Java编程入门
  • Java面向对象编程
  • Java高级编程

    • 相关电子书

    更多
  • Spring Cloud Alibaba - 重新定义 Java Cloud-Native
  • The Reactive Cloud Native Arch
  • JAVA开发手册1.5.0

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 阿里云平台上进行Java程序的编译与运行
  • 使用Java面向对象编写网络通信程序应用
  • 手动部署Java Web环境（Alibaba Cloud Linux 2）
  • 搭建Java Web开发环境（Anolis OS）
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解