Android中WebView与Js交互的实现方法
获取WebView对象
调用WebView对象的getSettings()方法，获取WebSettings对象
调用WebSettings对象的setJavaScriptEnabled()方法，设置js可用，参数：布尔值
在判断是否支持js的时候，不要用alert()，默认不起作用，可以先用document.write()测试
调用WebView对象的addJavascriptInterface(obj, interfaceName)方法，添加js接口，参数：Object对象，String接口名称（这个对象在js中的别名）
定义一个内部类MyJavascript
定义一个方法showToast()，显示吐司，api版本大于17需要加注解@JavascriptInterface
java代码：
package com.tsh.
import android.annotation.SuppressL
import android.app.A
import android.app.ProgressD
import android.graphics.B
import android.os.B
import android.view.KeyE
import android.view.M
import android.view.MenuI
import android.view.W
import android.webkit.JavascriptI
import android.webkit.WebS
import android.webkit.WebV
import android.webkit.WebViewC
import android.widget.T
public class MainActivity extends Activity {
private WebV
private ProgressD
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
pd=new ProgressDialog(this);
pd.setMessage("正在加载...");
//webview的简单设置
webview=(WebView) findViewById(R.id.wv_internet);
//http://100.65.187.106/test.php
webview.loadUrl("http://100.65.187.106/test.php");
WebSettings websettings=webview.getSettings();
websettings.setSupportZoom(true);
websettings.setBuiltInZoomControls(true);
new MyJavascript().showToast("111");
websettings.setJavaScriptEnabled(true);
webview.addJavascriptInterface(new MyJavascript(), "Android");
webview.loadUrl("javascript:documentWrite('测试')");
webview.setWebViewClient(new WebViewClient(){
public void onPageStarted(WebView view, String url, Bitmap favicon) {
pd.show();
public void onPageFinished(WebView view, String url) {
pd.dismiss();
//暴露给js的功能接口
public class MyJavascript{
//显示吐司
// 如果target 大于等于API 17，则需要加上如下注解
@JavascriptInterface
public void showToast(String text) {
Toast.makeText(MainActivity.this, text, 1).show();
//显示loading
@JavascriptInterface
public void showProgressDialog(String text) {
pd.setMessage(text);
pd.show();
public boolean onKeyDown(int keyCode, KeyEvent event) {
if(keyCode==KeyEvent.KEYCODE_BACK&&webview.canGoBack()){
webview.goBack();
return super.onKeyDown(keyCode, event);
public boolean onCreateOptionsMenu(Menu menu) {
menu.add(0, 0, 0, "刷新");
menu.add(0, 0, 1, "后退");
menu.add(0, 0, 2, "前进");
return super.onCreateOptionsMenu(menu);
//菜单点击事件
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getOrder()) {
webview.reload();
if(webview.canGoBack()){
webview.goBack();
if(webview.canGoForward()){
webview.goForward();
return super.onOptionsItemSelected(item);
&meta http-equiv="Content-Type" content="text/ charset=utf-8"/&
&title&测试android程序&/title&
测试android和js交互
&button onClick="showToast()"&显示吐司&/button&
&button onClick="showProgressDialog()"&显示loading&/button&
&script type="text/javascript"&
function showToast(){
Android.showToast("显示吐司");
function showProgressDialog(){
Android.showProgressDialog("显示进度条");
以上内容是小编给大家介绍的Android中WebView与Js交互的实现方法，希望对大家以上帮助！
顶一下(0) 踩一下(0)
热门标签：android webview中使用Java调用JavaScript方法并获取返回值
投稿：junjie
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了android webview中使用Java调用JavaScript方法并获取返回值,本文直接给出代码示例,需要的朋友可以参考下
在android平板上用webview打开一个网页，调用里面的javascript方法，同时相互传参。
网上例子很少啊，基本都不能获取返回值，贴一个自己最后调试完的代码如下：
protected void onCreate(Bundle savedInstanceState)
x = (WebView)this.findViewById(R.id.webView_viewTable);
x.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
x.getSettings().setBuiltInZoomControls(true);
x.getSettings().setJavaScriptEnabled(true);
x.addJavascriptInterface(new JsToJava(), "stub");& //JsToJava是内部类，代码在后面。stub是接口名字。
//x.loadUrl("http://192.168.1.1/init.html");//这句是载入一个html页面。但是因为直接load一个网页会有延迟，所以最好用下面这句:
x.loadDataWithBaseURL("", data, "text/html", "UTF-8","");& //这句里面data是init.html的内容。就是代码。直接用FileInputStream获取到就好。
x.loadUrl("javascript:setValuesJson('hello world')"); //hello world是给JavaScript传递的参数。setValuesJson是页面里JavaScript的方法。如果传递的参数中有双引号的话，用下面的写法：
String url = "javascript:setValuesJson(\"" + jsonString + "\")";
x.loadUrl(url);
}//onCreate结束
再写一个内部类：
private class JsToJava
&&&&&&& public void jsMethod(String paramFromJS)
&&&&&&&&&&& //Log.i("CDH", paramFromJS);
&&&&&&&&&&& System.out.println("js返回结果" + paramFromJS);//处理返回的结果
JavaScript代码:
&script type="text/javascript"&
&&&&&&& function setValuesJson(param)
&&&&&&&&&&& alert(param);//param是java传过来的值，即"hello world".
&&&&&&&&&&& var result = "传回Java的string";
&&&&&&&&&&& window.stub.jsMethod(result);//用接口stub, 通过调用内部类中的方法jsMethod给java传回result。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Android 中 Webview 与 JS 交互 – 热爱改变生活
If you can't fly, if you can't run, if you can't walk, then crawl
but whatever you do, you have to keep moving forward。
“你骗得了我有什么用，这是你自己的人生”
曾有伤心之地，入梦如听
> Android 中 Webview 与 JS 交互
Activity 中或者 Fragment 中放置一个 webview，然后使用这个 webview 来加载本地或者网络上的网页文件。如果网页文件比较复杂，那么不可避免的就要使用 js，如果 js 在他之内使用还好，如果 js 要通过 Android 程序处理数据之后再获得 Android 的返回值，该怎么办？
webview 加载一个 html，html 里面是一个百度地图，页面上有一个按钮，点击之后通过 js 请求 Android 端进行定位，定位之后将经纬度返回到 js 中，js 将调用地图 api 将经纬度显示到当前的百度地图上面。
如何对 webview 进行设置
webview.getSettings().setJavaScriptEnabled(true);
webview.setWebViewClient(new WebViewClient() {
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// 当返回 true 时，你点任何链接都是失效的，需要你自己跳转。return false 时 webview 会自己跳转。
view.loadUrl(url);
//我们自己加载了地址（自己进行了跳转）
//返回 true
最重要的两行代码，第一行之后设置可以和 js 进行交互了。
第二行设置网页内的内容点击后在当前应用内打开，而不是使用第三方浏览器打开。
如何去和 js 进行交互
在了解了需求之后，首先要知道的就是如何和 js 进行交互。
js 调用 Android 方法
一个按钮，点击后想要调用 Android 中的方法，按钮的代码如下
&!DOCTYPE html&
&script type="text/javascript" src="file:///android_asset/out2.js"&&/script&
1: &input type="text" id="field1" value="Hello World!"&&br&
2: &input type="text" id="field2"&&br&&br& &button onclick="copyText()"& 复制文本&/button&
&p& 当按钮被单击时触发函数。此函数把文本从 Field1 复制到 Field2 中。&/p&
当按钮被单击时触发函数。此函数把文本从 Field1 复制到 Field2 中。
function copyText()
Android.getLocation("88");
发现了和其他 js 不同的地方了吧，在 js 中使用了这样的代码：
Android.getLocation("88");
注意开头的 Android 这个单词（这个单词是可以换的，而且，随便换）
当然现在还不能开始调用 Android 中的代码。
我们还需要对 webview 进行一下设置：
JavaScriptInterface jsif=new JavaScriptInterface();
webview.addJavascriptInterface(jsif, "Android");//这句话里面的第二个参数那里写什么，在 js 里面就写什么，可以理解为这里给 js 传递了一个 java 对象
JavaScriptInterface 的代码（这个类的名称也可以随便换）
public class JavaScriptInterface{
@JavascriptInterface
public void getLocation(String str){
System.out.println(str);
所以，可以看到，在 js 里面调用的
Android.getLocation("88");
其中，Android 来自于
webview.addJavascriptInterface(jsif, "Android");
的第二个参数，而它后面的方法名，来自于 JavaScriptInterface 类中的方法名，至于参数的传递，类似于 java。
写完这些之后，就可以运行了。（如果不能运行，看看是不是忘了给 JavaScriptInterface 中的方法添加这个“@JavascriptInterface”【】）
JS 调用 Android 的第二种方法
在 JS 中常用的方法有 alert，Prompt 等（可能是我别的不会，觉得这两个常用。。）
通过第一种方法当然可行。
下面来看看针对 alert,prompt 等的第二种方法。
首先来看 js 中的代码
function copyText()
document.getElementById("field2").value=prompt(document.getElementById("field1").value);
html 中的代码没有变，再看看 Android 中添加的代码
webview.setWebChromeClient(new WebChromeClient() {
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {
// 本方法于 2015 年 8 月 17 日 下午 9:21:51 由 sumile 建立
System.out.println(message + "---&" + url);
result.confirm(message + "添加了东西");
代码运行之后的结果：
08-21 09:33:53.160: I/System.out(31749): Hello World!—&file:///
第二个输入框中的内容变成了”Hello World! 添加了东西”
就是说，在 webview 中，某些特定名称的 js 方法可以在 Android 中被截获，如 prompt,alert 等。
prompt 在 js 中的定义是这样的：
prompt() 方法用于显示可提示用户进行输入的对话框。
prompt(text,defaultText)
可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。
defaultText
可选。默认的输入文本。
如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。
在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 prompt() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。
那么这样，我们在 Android 中通过 onJsPrompt 方法，实际上就实现了一个 js 与 Android 的同步交互。
在这句话中
document.getElementById("field2").value=prompt(document.getElementById("field1").value);
js 执行了等号后面的话之后，会等待 Android 的返回结果，然后将这个返回结果赋值给等号前面。
其次，我们还看到 Android 的 onJsPrompt 方法有一个返回值，那么这个返回值的含义是什么？
prompt 这个东东本来是会弹出一个对话框的，可以点击确定或者取消
返回 true，不会继续弹出对话框
返回 false，你猜。
这种方法中关于 alert 的请看测试代码，其他的，请自行 google
Android 调用 js 中的” 方法”。
看代码，一看你就懂了，记得 js 里面的方法名字么？忘了就回去看看。
button.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
webview.loadUrl("javascript:copyText()");
JS 调用 Android 方法，Android 去执行异步操作，JS 等待到返回值后才可以继续运行
这是一个新问题，其实也是我写这篇文章要解决的问题。
从上面的 JS 调用 Android 以及 Android 调用 js 来看，我们可以将这两种方法进行组合来完成这个功能：
首先通过 js 调用 Android 中的方法，Android 去执行异步任务，异步任务执行完后主动调用 js 中的方法将值传递给 js。
我不想用。。。
然后我就想了，js 调用 Android 方法可以得到返回值，可以通过 prompt 去做，但是在 onJsPrompt 中是同步去做的，就是不等我异步处理完结果，就得返回值了，那该怎么做。
让 js 去频繁的请求当前的这个方法，知道获得返回值。
下面是我的例子：
/////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////
function getLocation()
var j=prompt("x","start");
var lan="false";
if(j=="false"){
lan=prompt("y","get");
}while(lan=="false");
var arr=lan.split(",");
document.getElementById("latitude").value=arr[0];
document.getElementById("longitude").value=arr[1];
theLocation();
/////////////////////////////////////////////////////////
Android 代码
/////////////////////////////////////////////////////////
public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
System.out.println(message + "---&" + url + "---&" + defaultValue);
if ("start".equals(defaultValue)) {
initLocation();
mLocationClient.start();// 定位 SDK
// start 之后会默认发起一次定位请求，开发者无须判断 isstart 并主动调用 request
mLocationClient.requestLocation();
result.confirm("false");
if ("get".equals(defaultValue)) {
((LocationApplication) getApplication()).setLocationInterface(new BDLocationInterface() {
public void getLocation(BDLocation location) {
newStr = String.valueOf(location.getLatitude()) + "," + String.valueOf(location.getLongitude());
System.out.println(newStr);
if (!"".equals(newStr)) {
result.confirm(newStr);
mLocationClient.stop();
System.out.println("confirm");
result.confirm("false");
上面的代码是 js 中点击按钮后的代码以及 Android 中 onJsPrompt 中的代码，首先会先请求一次 prompt 方法，可以看到它的第二个参数是”start”，这时候 Android 开始执行，但是因为是异步执行，并没有返回值，所以我主动给他返回了 false 字符串。然后开始循环调用 prompt 方法，这时候的第二个参数现在是 get。通过 start，get 来在 Android 中区分是应该开启异步任务还是检测异步任务是否已有结果。最后，终于等到你（返回值），还好我不放弃（while）。
下面的代码请在测试之前首先在 AndroidManifest 和 assets 下面的 baidujs.html 中将 key 替换掉。否则不能调用百度地图，但可能不影响测试。
Mission completed
转载请注明： &
本博客只要没有注明“转”，那么均为原创。
转载请注明链接： &webview和js互相调用实现方法
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了 Android
webview和js互相调用实现方法的相关资料,需要的朋友可以参考下
Android-webview和js互相调用
Android 和 H5 都是移动开发应用的非常广泛。市面上很多App都是使用Android开发的，但使用Android来开发一些比较复杂附属类，提示性的页面是得不偿失的。而H5具有开发速度快，更新不用依赖于App的更新，只需要服务端更新相应的页面即可，所以，App和H5页面相结合就显得尤为重要。而android和H5都不可能每次都是独立存在的，而是相互影响也相互的调用，获取信息等，例如，H5页面要获取App中的用户的基本信息，或者App端要操作H5页面等，下面来看看这两是怎么交互的。
先来看一下项目的整体架构（Android studio中的项目）
整个项目的结构就是这样的，里面最主要的就是assets下面的js_webView.html文件和代码中的WebViewJsActivity，其中项目里面的MainActivity只是做了个跳转而已，跳转到WebViewJsActivity。就这样。
下面上代码：(js_webView.html)
html里面的代码也比较简单，整个html中就一个Button，点击这个Button的时候去执行javascript中的 jsCallAndroid() 方法。
网页中有关 javascript 的代码也比较简单，整个 js 就2个方法，一个是 jsCallAndroid() ，一个是 androidCallJs() 。看方法名就知道了，分别是 js 调用 Android 的和 Android 调用 js 的。
先不要去管&jsCallAndroid() 里面做的是什么，待会会解释，来看看&androidCallJs() 这个方法里面做的就是弹出一个信息提示框，具体提示什么信息都不重要了，随便。
再来看看代码部分（WebViewActivity的布局文件）：&
整个布局文件也很简单，一个按钮和一个WebView，按钮是用来测试 Android 调用 js 用的，js 调用 Android 就当然是 webview 加载的网页里面的按钮了。
再来看看 Java 代码部分（WebViewActivity）：
下面来看看代码部分：
37-42行：这几行就是android中的按钮的点击事件，没什么好解释的，来看看点击事件做的是什么？点击事件做的是：调用 webview 的 loadurl 方法去调用 js 中的方法；调用的方式是：前面是 javascript 中间用 ： 分隔 最后是 要调用的 js 的方法名。
45-55行：这几行就是有关于 Webview 的设置等，46-51 这几行是指支持弹窗，也就是支持 html 网页弹框，因为前面的 html 代码中，有我们 Android 调用 js 的时候，调用成功就 js 弹窗，所以这里要加上这个设置。接下来是53行，53行指的是支持 javascript 这里指的是支持 html 中的 javascript 解析，不管是不是 js 和 Android 交互，只要网页中含有 js ，都要。最关键的就是54行，54行就是 javascript 和 Android 交互的了，addJavascriptInterface 方法需要接受两个参数，第一个是与之相对应的 js 调用 Android 本地的类的对象，这个例子中的就是58-63行这个类的对象，第二个参数就是和前面网页中的js代码中的 jsCallAndroid 方法中的 wv.sayHello(),这里的 wv 就和这个参数(wv)与之相对应，而 sayHello() 就是对应的第一个参数的对象里面的方法。
最后是58-63行，这几行没什么好解释的了，只是如果调用成功就打印一行日志。仅此检验是否调用成功而已。
整个 demo 代码到此完毕，好激动，赶紧运行试试看。
运行的结果会让很多人失望，只是android调用js成功了，但 js 调用 android 不成功。&
这是为什么呢？这里要涉及到的是有关于 webview 和 js 的安全性的问题。js 可以通过这种方式下载恶意代码在 android 上执行，具体有兴趣的可以去 Google 一下，所以上面这种写法只是对于 Api16以前的android手机是适用的，16以后，谷歌对这个安全性问题进行了修复。将其注解到android自带的一个javascriptInterfface类中。下面就来看看16以后的写法是咋样的？
&有了注解，简直如虎添翼，非常方便。还是原来的配方，还是原来的味道，原汁原味。除了　Activity　中的代码需要修改，其他都不动。
改动的代码有55行，直接传一个 this(Context) 对象就可以了，那么，原来的 JsInterface 就可以不要了。不要那我 sayHello 方法写到哪里呢？既然你传递的是 this ，当然是写到 this 里面咯（59-62行）。不同的是，这个 sayHello()　方法必须加上一个　JavascriptInterface　的注解。
OK了，16以前和16以后的都有了，不就OK了么。在添加javascript的时候判断一下 Api 版本就可以了，哈哈。。。
不不不，肯定不是这样子做。指需要在onCreate() 方法上添加&@SuppressLint("JavascriptInterface") 注解即可。
看下面的就是终极代码了。
对，没错，就是这样子。大功告成。
最后需要提一点的是，上面的例子是可以执行，正常情况下都没什么问题，但你看看网上的demo，很多在 android 调用 js 的时候是开一个子线程去调用，没错，实际开发中，是必须要这样子做的。好处就不言而喻了。这一点看最后一张代码图，这里也有给出，直接调用webview的post，里面就是 Android 调用 js 了。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具