Android WebView 和 javaScript的互相调用(一)
原文出处:http://blog.csdn.net/wangtingshuai/article/details/8631835
WebView相关阅读
- Android WebView 和 javaScript的互相调用(一)
- Android WebView 和 javaScript的互相调用(二)
- Android WebView 和 javaScript的互相调用(三)
- Android WebView与js交互通信
- Android 4.4 中 WebView 使用注意事项
- Android WebView开发问题汇总
- Android WebView 性能优化
目前越来越多的Android App 都采用了混合编程的架构,也就是Android 原生控件+html5,当然html 页面也必须运行在webview 控件中,我们可以简单吧webview 看成内置到app 中的小型浏览器,这里面最核心的问题就是html 中的js 代码如何调用java 代码,比如js 调用java 代码,然后打开一个新的Activity 界面。比如淘宝已经大量采用了h5 来实现其客户端功能,商品列表是Android 端控件,点击商品列表进入某个商品详情可能就是h5 界面,这里就存在java 给js 传递数据的问题,点击h5 的商品详情界面的立即购买,可能就又从h5 跳转到了Activity 界面,这里又牵扯到js 给java 传递数值的问题
内容摘要
- android 中的java代码调用webview里面的js脚本
- webview中的js脚本调用本地的java代码
- java调用js并传递参数
- js调用java并传递参数
1、Android中调用WebView中的js脚本非常方便,只需要调用WebView的loadUrl()方法即可
// 启用javascript
contentWebView.getSettings().setJavaScriptEnabled(true);
// 从assets目录下面的加载html
contentWebView.loadUrl("file:///android_asset/wst.html");
// 无参数调用
contentWebView.loadUrl("javascript:alert('hello')");
2、WebView中js调用本地java方法,这个功能实现起来稍微有点麻烦,不过也不怎么复杂,首先要对WebView绑定javascriptInterface,js脚本通过这个接口来调用java代码
//参数1:桥梁类,参数2:别名,在js中使用到
webView.addJavascriptInterface(new WebAppInterface(this),"Android");
桥梁类WebAppInterface
public class WebAppInterface {Context mContext;WebAppInterface(Context c) {mContext = c;}@JavascriptInterfacepublic void showToast(String toast) {Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();}
}
桥梁类WebAppInterface实际就是一个普通的java类,里面是我们本地实现的java代码, 将object 传递给WebView,并指定别名,这样js脚本就可以通过我们给的这个别名来调用我们的方法
Html中调用java代码
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
<script type="text/javascript">function showAndroidToast(toast) {Android.showToast(toast); }
</script>
注意:
- 桥梁类中的方法必须添加注解@JavascriptInterface,否则在API 16 以上会抛异常
- 上面的代码存在远程代码执行安全漏洞,可以使用Safe Java-JS WebView Bridge解决该问题
- Android WebView的Js对象注入漏洞解决方案
3、java代码调用js并传递参数
只需要在待用js函数的时候加入参数即可,下面是传递一个参数的情况,需要多个参数的时候自己拼接及行了,注意str类型在传递的时候参数要用单引号括起来
mWebView.loadUrl("javascript:test('" + aa+ "')"); //aa是js的函数test()的参数
4、js调用java函数并传参,java函数正常书写,在js脚本中调用的时候稍加注意,然后在html页面中,利用如下代码,即可实现调用
<div id='b'><a onclick="window.wst.clickOnAndroid(2)">b.c</a></div>
实现案例
这里是实例的html代码,从assert中加载,原来做项目的时候,从assert中加载的中文网页会出现乱码,解决办法就是给html指定编码。如下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<script type="text/javascript">
function javacalljs(){ document.getElementById("content").innerHTML += "<br\>java调用了js函数";
} function javacalljswithargs(arg){ document.getElementById("content").innerHTML += ("<br\>"+arg);
} </script>
</head>
<body>
this is my html <br/>
<a onClick="window.wst.startFunction()">点击调用java代码</a><br/>
<a onClick="window.wst.startFunction('hello world')" >点击调用java代码并传递参数</a>
<br/>
<div id="content">内容显示</div>
</body>
</html>
public class MainActivity extends Activity { private WebView contentWebView = null; private TextView msgView = null; @SuppressLint("SetJavaScriptEnabled") @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); contentWebView = (WebView) findViewById(R.id.webview); msgView = (TextView) findViewById(R.id.msg); // 启用javascript contentWebView.getSettings().setJavaScriptEnabled(true); // 从assets目录下面的加载html contentWebView.loadUrl("file:///android_asset/wst.html"); Button button = (Button) findViewById(R.id.button); button.setOnClickListener(btnClickListener); contentWebView.addJavascriptInterface(this, "wst"); } OnClickListener btnClickListener = new Button.OnClickListener() { public void onClick(View v) { // 无参数调用 contentWebView.loadUrl("javascript:javacalljs()"); // 传递参数调用 contentWebView.loadUrl("javascript:javacalljswithargs(" + "'hello world'" + ")"); } }; public void startFunction() { Toast.makeText(this, "js调用了java函数", Toast.LENGTH_SHORT).show(); runOnUiThread(new Runnable() { @Override public void run() { msgView.setText(msgView.getText() + "\njs调用了java函数"); } }); } public void startFunction(final String str) { Toast.makeText(this, str, Toast.LENGTH_SHORT).show(); runOnUiThread(new Runnable() { @Override public void run() { msgView.setText(msgView.getText() + "\njs调用了java函数传递参数:" + str); } }); }
}
布局文件
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <WebView android:id="@+id/webview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_weight="9" /> <ScrollView android:id="@+id/scrollView1" android:layout_width="fill_parent" android:layout_height="wrap_content" > <TextView android:id="@+id/msg" android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="text" /> </ScrollView> <Button android:id="@+id/button" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="java调用js函数" /> </LinearLayout>
Android WebView 和 javaScript的互相调用(一)相关推荐
- Android WebView 和 javaScript的互相调用(三)
原文出处:http://motalks.cn/2016/08/27/Android-WebView-JavaScript-2/ WebView相关阅读 Android WebView 和 javaSc ...
- Android WebView 和 javaScript的互相调用(二)
原文出处:http://blog.csdn.net/wangtingshuai/article/details/8635787 WebView相关阅读 Android WebView 和 javaSc ...
- Android WebView与JavaScript交互详解
近期工作项目中遇到Android的WebView与js交互问题,之前也知道有这方面的技术可以实现.但在用的过程中,却发现还是需要用电心思. 现把我所了解的分享给大家,希望可以帮助到做类似项目的童鞋. ...
- android webview打印,javascript - 如何在Android Webview中使网站上的打印按钮工作? - 堆栈内存溢出...
我的网站上有一个模式按钮,在该按钮上附加了一个处理程序函数以打印模式. 该处理程序具有处理"仅打印模式"的代码,并最终运行window.print(). 该按钮的功能类似于浏览器中 ...
- Android WebView和JavaScript交互
JavaScript在现在的网页设计中用得很多,Android 的WebView可以载入网页,WebView也设计了与JavaScript通信的桥梁.这篇主要介绍一下WebViewk控件如何和Java ...
- Android WebView 性能优化
原文出处:http://motalks.cn/2016/09/11/Android-WebView-JavaScript-3/ WebView相关阅读 Android WebView 和 javaSc ...
- webview java调用js_android WebView java与js相互调用
android WebView java与js相互调用 发布时间:2020-07-14 00:42:42 来源:51CTO 阅读:454 作者:向往宇宙 android webView js 使用 1 ...
- 【eoe Android特刊】第二十四期Android WebView
一.Android WebView是什么 1.1Aandroid WebView一些基本概念 在android手机中内置了一款高性能webkit内核浏览器,在SDK中封装为一个叫做WebView组件. ...
- Android中Webview使用javascript调用事先定义好的Java函数
1. 首先定义好一个类,专们用于给javascript调用 public class JavaScriptInterface {// share your newspublic void share( ...
最新文章
- java which语句,java入门之表达式、语句、块
- [Security]XSS一直是个棘手的问题
- 灰度图像--图像增强 锐化基础
- JUnit测试方法订购
- 关于oracle sql语句查询时表名和字段名要加双引号的问题
- 210板wince键盘驱动分析和移植
- 洛谷P6140 [USACO07NOV]Best Cow Line S
- 标准工时计算方法有哪些?如何计算标准工时?
- quartz之动态定时器实现
- npm install 报错:node-pre-gyp ERR! 问题解决
- 一篇适合小白的Shiro教程
- 销售额总和的分类汇总计算机操作,excel分类汇总-EXCEL函数公式大全之利用MONTH函数和分类汇总汇总每个月的销售额...
- 【Jquery】文本框校验练习
- 中报业绩被华夏幸福拖累,“50元”的中国平安是否值得珍惜?
- 计算机无法切换用户权限,“无法更改的Administrator账户密码”的解决方案
- NI Multisim元件库:在Multisim中创建自定义元器件
- Android q索尼手机相机算法,手机厂商套路太多!竟在手机摄像头上玩“掩眼法”?...
- 数据结构与算法学习(第一天)
- Step7编程语言编程概述结构
- 名创优品在香港上市:市值170亿港元 10元店也有大生意