webview和js交互
今天主要总结两点:一是使用Js去调用客户端公有方法,二是从客户端调用Js中的方法
一、JS调用客户端公有方法
上例子:(PS:不会写JS,就网上找了一段js代码)
新建项目,在项目的assets文件夹下创建一个test.html:
<body>
<a>Web与Js交互:点击我,来调用客户端的show方法吧</a>
<script>
function
funFromjs(){
document.getElementById("helloweb").innerHTML="我是JS里的方法";
}
var
aTag = document.getElementsByTagName('a')[0];
aTag.addEventListener('click',
function(){
//调用android本地方法
AppFunction.show("Js调用show()方法成功!");
return
false;
},
false);
</script>
<p></p>
<div
id="helloweb">
</div>
</body>
这段代码有两个重点,一是funFromjs()方法,该方法是js里提供给客户端去调用的方法。二是AppFunction.show();show()方法是客户端提供给js去调用的方法,AppFunction是定义的接口名。底下是客户端的实现:
package
com.aliao.web;
import
android.annotation.SuppressLint;
import
android.support.v7.app.ActionBarActivity;
import
android.os.Bundle;
import
android.webkit.JavascriptInterface;
import
android.webkit.WebView;
import
android.widget.Toast;
public
class
MainActivity extends
ActionBarActivity {
private
WebView mWebView;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private
void
initViews() {
String
url = "file:///android_asset/test.html";
mWebView
= (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);//支持js
mWebView.addJavascriptInterface(this,
"AppFunction");
mWebView.loadUrl(url);
}
@JavascriptInterface
public
void
show(String msg){
Toast.makeText(this,
msg, Toast.LENGTH_SHORT).show();
}
}
这里需要注意的是,在Android4.2.2及之后的版本只有带有 JavascriptInterface 注释的public方法才能够被js访问。所以要在show()方法前加:@JavascriptInterface
具体查看: Webview addJavascriptInterface()(http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String))
public void addJavascriptInterface ( Object object, String name)
Added in API level 1
Injects the supplied Java object into this WebView. The object is injected into the JavaScript context of the main frame, using the supplied name. This allows the Java object's methods to be accessed from JavaScript. For applications targeted to API level JELLY_BEAN_MR1 and above, only public methods that are annotated with JavascriptInterface can be accessed from JavaScript. For applications targeted to API level JELLY_BEANor below, all public methods (including the inherited ones) can be accessed, see the important security note below for implications.
Note that injected objects will not appear in JavaScript until the page is next (re)loaded. For example:
class
JsObject {[/backcolor] @JavascriptInterface
public
String toString() { return
"injectedObject";
}
}
webView.addJavascriptInterface(new
JsObject(), "injectedObject");
webView.loadData("",
"text/html",
null);
webView.loadUrl("javascript:alert(injectedObject.toString())");
这段是说,注入提供的java对象到WebView中。该对象以接口名的方式被注入到Javascript的上下文环境中。这样就可以在JavaScript中去访问该对象的方法。对于APl Level在4.2及以上的应用,只有带有 JavascriptInterface 注释的的公有方法可以被JavaScript访问。对于Api Level在4.1及以下的应用,所有的公有方法都可以被访问(包括继承的方法),参见下面的重要的安全注意的影响。(系统版本在4.2以下要考虑的安全问题先mark下这个blog: Android WebView的Js对象注入漏洞解决方案http://blog.csdn.net/leehong2005/article/details/11808557
)
这里我把当前类的对象注入到webview中,命名为AppFunction,这样在JavaScript里就可以通过AppFunction直接访问MainActivity中定义的供js调用方法。
mWebView.addJavascriptInterface(this,
"AppFunction");
也可以自定义一个类,例如上例中的
webView.addJavascriptInterface(new
JsObject(), "injectedObject");
定义一个JsObject类,该类里定义了提供给Js调用的方法,将该对象命名为injectedOnject,即接口名注入到js中。
运行后的结果:
二、JS调用客户端公有方法
前面写过的test.html里已经提供了一个供Android客户端调用的方法funFromjs(),那客户端的代码要怎么写?
在MainActivity的布局文件中添加一个按钮,点击该按钮后,调用js中的funFromjs方法:
package
com.aliao.web;
import
android.support.v7.app.ActionBarActivity;
import
android.os.Bundle;
import
android.view.View;
import
android.webkit.JavascriptInterface;
import
android.webkit.WebView;
import
android.widget.Button;
import
android.widget.Toast;
public
class
MainActivity extends
ActionBarActivity {
private
WebView mWebView;
private
Button mBtnCallJsFun;
@Override
protected
void
onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private
void
initViews() {
String
url = "file:///android_asset/test.html";
mWebView
= (WebView) findViewById(R.id.webview);
mWebView.getSettings().setJavaScriptEnabled(true);//支持js
mWebView.addJavascriptInterface(this,
"AppFunction");
mWebView.loadUrl(url);
mBtnCallJsFun
= (Button) findViewById(R.id.btn_call_js_fun);
mBtnCallJsFun.setOnClickListener(new
View.OnClickListener() {
@Override
public
void
onClick(View v) {
mWebView.loadUrl("javascript:funFromjs()");
}
});
}
@JavascriptInterface
public
void
show(String msg){
Toast.makeText(this,
msg, Toast.LENGTH_SHORT).show();
}
}
运行结果:
- SpringBoot解决ajax跨域问题
- WebBrowser(IE) 与 JS 相互调用
- HOSTS配置问题导致集群异常故障分析
- Linux Regulator Framework(2)_regulator driver
- systemd的作用
- alsa声卡分析alsa-utils调用过程(二)-tinymixer
- alsa声卡分析alsa-utils调用过程(一)-tinyplay
- ALSA声卡驱动的DAPM(二)-建立过程
- ALSA声卡驱动的DAPM(一)-DPAM详解
- 高通Audio中ASOC的codec驱动(二)
- vue项目里的日期格式化
- CentOS下的Mysql的安装和使用
- vue路由跳转传参数
- 刘寅:TiDB 工具链和生态
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android ScrollView实现下拉弹回动画效果
- Android实现用文字生成图片的示例代码
- Android bindservice失败解决方法
- Android 悬浮窗权限各机型各系统适配大全(总结)
- Android中Fragment相互切换间不被回收的实现方法
- Android手机管理工具类详解
- 通过代码学Sutton强化学习第四章动态规划
- android通过okhttpClient下载网页内容的实例代码
- Android自定义键盘的实现(数字键盘和字母键盘)
- Android iconify 使用详解
- XRecyclerView实现下拉刷新、滚动到底部加载更多等功能
- 浅析Android 快速实现图片压缩与上传功能
- Android处理时间各种方法汇总
- Android TextView Marquee的应用实例详解
- Android毛玻璃背景效果简单实现代码