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

Java与js的交互

2014-06-07 1507
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： <span style="font-family:Tahoma; font-size:14px; orphans:2; widows:2"> 在android的开发过程中，有很多时候需要用到本地java代码和javascript进行交互。android对交互进行了很好的封装，</span><span style="font-family:Tahoma; font-size:14px; or
 在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
前端开发
ctrip_xzh
目录
相关文章
vohelon
|
7月前
|
JavaScript 前端开发 Java
java和js
【4月更文挑战第8天】java和js
vohelon
48 1
怒放de生命
|
7月前
|
JavaScript 前端开发 Java
java调用js实现富文本过滤
java调用js实现富文本过滤
怒放de生命
76 0
a15034260562-24955
|
7月前
|
JavaScript Java
什么？java中居然可以执行js代码了？真是不知者不怪
什么？java中居然可以执行js代码了？真是不知者不怪
a15034260562-24955
54 1
零零年夏
|
JavaScript 前端开发 Java
【JCEF】JS与JAVA进行交互
【JCEF】JS与JAVA进行交互
零零年夏
125 0
阿甘兄
|
前端开发 JavaScript
38dwr - util.js 功能（onReturn）
38dwr - util.js 功能（onReturn）
阿甘兄
43 0
瑶大头*^_^*
|
JavaScript 前端开发 Java
Java与Javascript比较（js入门）
Java与Javascript比较（js入门）
瑶大头*^_^*
81 0
爱吃土豆丝的打工人
|
开发框架 JavaScript 前端开发
HarmonyOS学习路之开发篇—Java UI框架(JS FA调用Java PA)
使用兼容JS的类Web开发范式的方舟开发框架提供了JS FA（Feature Ability）调用Java PA（Particle Ability）的机制，该机制提供了一种通道来传递方法调用、处理数据返回以及订阅事件上。
爱吃土豆丝的打工人
268 0
爱吃芋圆的兔子
|
JavaScript 前端开发 Java
【Java】JS简介
【Java】JS简介
爱吃芋圆的兔子
74 0
_江南一点雨
|
XML 存储 缓存
在 Java 代码中来一段 JavaScript？聊聊 Flowable 中的脚本任务
在 Java 代码中来一段 JavaScript？聊聊 Flowable 中的脚本任务
_江南一点雨
370 0
小牛呼噜噜
|
Web App开发 数据采集 JavaScript
Java如何优雅地执行js
Java如何优雅地执行js
小牛呼噜噜
497 0

热门文章

最新文章

  • 1
    面试必问的4种单点登录的实现方式，你知道几个？
  • 2
    测试开启MySQL performance_schema后对性能的影响
  • 3
    Java发送Http请求（HttpClient）
  • 4
    Github Pages+Hexo+阿里云域名绑定
  • 5
    在PyTorch中使用DistributedDataParallel进行多GPU分布式模型训练
  • 6
    分析: GetBuffer, ReleaseBuffer, GetBufferSetLength(转载)
  • 7
    IBatis.Net学习笔记七--日志处理
  • 8
    写给人类的机器学习 翻译完成
  • 9
    面试准备技巧
  • 10
    OpenJudge就算概论-过滤多余的空格
  • 1
    发送UDP数据免费API接口教程
    25
  • 2
    发送TCP数据免费API接口教程
    22
  • 3
    《C++助力无监督学习：挖掘数据潜在结构的高效之道》
    25
  • 4
    《C++ 中 RNN 及其变体梯度问题的深度剖析与解决之道》
    22
  • 5
    Flask 框架防止 SQL 注入攻击的方法
    29
  • 6
    Flask框架的安全机制与其他框架相比有哪些优势和劣势？
    22
  • 7
    正确配置Flask以提高应用的安全性
    19
  • 8
    用 Python 实现快速排序算法。
    18
  • 9
    利用Python内置函数实现的冒泡排序算法
    22
  • 10
    AutoGLM的一小步，人机交互进化的一大步
    18

    • 相关课程

    更多
  • Java高级开发
  • Java面试疑难点解析 - Java Web开发
  • Java高级编程
  • Java零基础入门
  • Java Web开发系列课程 - Spring框架入门
  • Java 虚拟机原理

    • 相关电子书

    更多
  • 编程语言如何演化—— 以 JS 的 private 为例
  • 编程语言如何演化-以JS的private为例
  • Java 8 简明教程

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 阿里云平台上进行Java程序的编译与运行
  • 使用Java面向对象编写网络通信程序应用
  • 手动部署Java Web环境（Alibaba Cloud Linux 2）
  • 搭建Java Web开发环境（Anolis OS）
    • 下一篇
    无影云桌面