今天主要总结两点：一是使用Js去调用客户端公有方法，二是从客户端调用Js中的方法
一、JS调用客户端公有方法
上例子：（PS：不会写JS，就网上找了一段js代码）
新建项目，在项目的assets文件夹下创建一个test.html：
纯文本查看
复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
< 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是定义的接口名。底下是客户端的实现：
纯文本查看
复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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
具体查看： Webview addJavascriptInterface()（http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String)）
Object object, String
API level 1
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:
纯文本查看
复制代码
?
1
2
3
4
5
6
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对象
这里我把当前类的对象注入到webview中，命名为AppFunction，这样在JavaScript里就可以通过AppFunction直接访问MainActivity中定义的供js调用方法。
纯文本查看
复制代码
?
1
mWebView.addJavascriptInterface( this , "AppFunction" );
也可以自定义一个类，例如上例中的
纯文本查看
复制代码
?
1
webView.addJavascriptInterface( new JsObject(), "injectedObject" );
定义一个JsObject类，该类里定义了提供给Js调用的方法，将该对象命名为injectedOnject，即接口名注入到js中。
运行后的结果：
二、JS调用客户端公有方法
前面写过的test.html里已经提供了一个供Android客户端调用的方法funFromjs()，那客户端的代码要怎么写？
在MainActivity的布局文件中添加一个按钮，点击该按钮后，调用js中的funFromjs方法：
纯文本查看
复制代码
?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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();
}
}
运行结果：
webview和js交互
原创
©著作权归作者所有：来自51CTO博客作者wx5aae83353cec4的原创作品，请联系作者获取转载授权，否则将追究法律责任
提问和评论都可以，用心的回复会被更多人看到
评论
发布评论
相关文章
-
Android实现WebView和Js交互
概述今天来看看WebView和Js的交互功能如何实现效果图代码首先我们需要准备一个ht
webview android javascript -
Android webview与js交互
Android 默认方法对于Android调用JS代码的方法有2种：通过WebView的loadUrl（）通过WebView的evaluateJavascript（）示例演示：点击Android按钮
webview js android javascript -
Android：WebView与 JS 交互方式
前言现在很多App里都内置了Web网页（Hybrid App），比如说很多电商平
android webview Android html ide -
使用JS交互WebView可点击图片android ide bundle webview javascript
-
Android AgentWeb WebView 与js交互总结
想必熟悉android开发的同学都知道使用原生 webview 与js 的交互方式，下面我们先来回顾一下。webview 通过addJavascriptInterface 进行对象映射首先要打开交互权详细说明。根据
android javascript 交互 Android webview -
webview与js交互（转）
对于android初学者应该都了解webView这个组件。之前我也是对其进行了一些简单的了解，但是在一个项目中不得不用webview的时候，发现了webview的强大之
android webview javascript
