一、什么是js与android交互?

  通俗一点就是使用js代码调用java代码,或者使用java代码调用js代码。

二、为什么要使用js与java代码交互?

  1.可以做一些js网页做本身处理不了的事情。例如:在网页上调用Android本地打电话,发短信功能、在网页上调用Android手机通讯录、在网页上调用第三方应用、在网页上调用一些Android的本地化处理(操作IO,数据库)等。

  2.可以实现js开发人员与android开发人员合作开发。例如:js开发人员开发js代码供android开发人员调用,android开发人员就不必写js代码,可以专注于andrid开发,用到js的时候直接调用js代码就可以了。(反之亦然)

  3.可以实现网页的动态更新。例如:可以利用js代码调用java的更新数据显示到网页上以达到动态更新网页的目的。

三、js代码调用java代码操作步骤

  1.开启使用js功能

webSettings.setJavaScriptEnabled(true);

  2.设置编码默认编码格式(编码格式要和html编码格式对应)

webSettings.setDefaultTextEncodingName("gbk");

  3.注入提供的java对象到webView:主要是这段代码,解释一下,第一个参数定义了一个对象,该对象中可以写任意的方法,供js代码调用。第二个参数是该自定义对象的一个别名。js调用该对象的方法时会使用到该别名。调用格式为:对象名.方法名。例如:jsobject.androidAlert();调用android的alert对话框。

webView.addJavascriptInterface(new JsObject(), "jsobject");

  4.设置WebChromeClient对象,并实现其中的onJsAlert、onJsConfirm等方法。注意这里必须要实现这几个方法,不然js调用java代码弹框时可能没有反应。

       @Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
// TODO Auto-generated method stub
return super.onJsAlert(view, url, message, result);
} @Override
public boolean onJsConfirm(WebView view, String url,
String message, JsResult result) {
// TODO Auto-generated method stub
return super.onJsConfirm(view, url, message, result);
} @Override
public boolean onJsPrompt(WebView view, String url, String message,
String defaultValue, JsPromptResult result) {
// TODO Auto-generated method stub
return super.onJsPrompt(view, url, message, defaultValue,
result);
}

四、android代码调用js代码

  这个相对比较简单,只需要一行代码就能搞定:

  例如:

//android调用js代码
webView.loadUrl("javascript:test_alert()");

做完以上几步后就可以实现真正调用了。下面给出完整代码

一、HTML代码jshtml.html(改代码放在assets文件夹下)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>这是一个HTML</title> <script type="text/javascript">
/*js调用android的方法*/
function jsCallAndroidAlert(){
jsobject.androidAlert();
} function test_alert() {
/* 弹出对话框 */
alert("啊哈!连Android系统都调用JS函数了");
} </script>
</head>
<body>
<button onclick="jsCallAndroidAlert()">test</button>
<button onclick="test_alert()">test_alert</button>
</body>
</html>

二、MainActivity.java

package com.yw.webkitdemo;

import android.os.Bundle;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.app.AlertDialog;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.graphics.Bitmap;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.webkit.JsPromptResult;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.Toast; @SuppressLint("JavascriptInterface")
public class MainActivity extends Activity implements android.view.View.OnClickListener{
private WebView webView;
private ProgressBar progressBar;
private Button btn_js;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main_layout);
btn_js = (Button)findViewById(R.id.btn_js);
btn_js.setOnClickListener(this);
progressBar = new ProgressBar(this, null,
android.R.attr.progressBarStyleHorizontal);
progressBar.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT,
5)); webView = (WebView) findViewById(R.id.webView);
WebSettings webSettings = webView.getSettings();
// 启用javascrip功能
webSettings.setJavaScriptEnabled(true);
//设置可以使用中文,否则会出现中文乱码
webSettings.setDefaultTextEncodingName("gbk");
webView.addView(progressBar);
webView.setWebChromeClient(new WebChromeClient() {
@Override
public void onProgressChanged(WebView view, int newProgress) {
if (newProgress == 100) {
progressBar.setVisibility(View.GONE);
} else {
if (progressBar.getVisibility() == View.GONE)
progressBar.setVisibility(View.VISIBLE);
progressBar.setProgress(newProgress);
}
super.onProgressChanged(view, newProgress);
} @Override
public boolean onJsAlert(WebView view, String url, String message,
JsResult result) {
// TODO Auto-generated method stub
return super.onJsAlert(view, url, message, result);
} @Override
public boolean onJsConfirm(WebView view, String url,
String message, JsResult result) {
// TODO Auto-generated method stub
return super.onJsConfirm(view, url, message, result);
} @Override
public boolean onJsPrompt(WebView view, String url, String message,
String defaultValue, JsPromptResult result) {
// TODO Auto-generated method stub
return super.onJsPrompt(view, url, message, defaultValue,
result);
}
});
/*
* 此段代码在不做处理的情况下会弹出多个浏览器选择界面 webView.loadUrl("http://www.baidu.com/");
*/
webView.setWebViewClient(new WebViewClient() {
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
} @Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
}
});
// webView.loadUrl("http://www.baidu.com/");
/**
* 自定义对象,以及对象别名
* 自定义对象中定义的方法可以供js调用
* function jsCallAndroidAlert(){
jsobject.androidAlert();
}
*/
webView.addJavascriptInterface(new JsObject(), "jsobject");
//加载我们自定义的html网页并将其显示在webView上
webView.loadUrl("file:///android_asset/jshtml.html");
} /**
* 此类的方法对应html中js的方法,供js调用Android的方法
*
* @author Administrator
*
*/
class JsObject {
public void androidAlert() {
AlertDialog.Builder dialog = new AlertDialog.Builder(MainActivity.this);
dialog.setTitle("温馨提示");
dialog.setMessage("js调用了Android的Alert,测试完毕是否退出?");
dialog.setNegativeButton("否", new OnClickListener() { @Override
public void onClick(DialogInterface arg0, int arg1) { }
});
dialog.setPositiveButton("是", new OnClickListener() { @Override
public void onClick(DialogInterface dialog, int which) {
dialog.dismiss();
}
});
AlertDialog dialog2 = dialog.create();
dialog2.show();
Toast.makeText(MainActivity.this, "您使用js调用了alert方法",
Toast.LENGTH_LONG).show();
} public void androidConfirm() {
Toast.makeText(MainActivity.this, "您使用js调用了confirm方法",
Toast.LENGTH_LONG).show();
}
} /**
* 对系统的back键进行设置
*/
@Override
public void onBackPressed() {
if (webView != null && webView.canGoBack()) {
webView.goBack();
} else {
super.onBackPressed();
} } @Override
public void onClick(View v) {
switch(v.getId()){
case R.id.btn_js:
//android调用js代码
webView.loadUrl("javascript:test_alert()");
break;
}
}
}

三、main_layout.xml文件

<?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="wrap_content"
android:orientation="vertical" > <WebView
android:id="@+id/webView"
android:layout_width="match_parent"
android:layout_height="match_parent" /> <Button
android:id="@+id/btn_js"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="调用javascript函数" /> </LinearLayout>

完成。

WebView之javascript与android交互基础加强的更多相关文章

  1. 在android中实现webview与javascript之间的交互(转)

    参见“在android中实现webview与javascript之间的交互”

  2. Android中webview跟JAVASCRIPT中的交互

    在android的应用程序中,可以直接调用webview中的javascript代码,而webview中的javascript代码,也可以去调用ANDROID应用程序(也就是JAVA部分的代码).下面 ...

  3. webview与JavaScript之间的交互

    据说WebView的强大之处就是能和JavaScript进行交互调用. 参考博客:http://droidyue.com/blog/2014/09/20/interaction-between-jav ...

  4. 一处疑难杂症的术后总结:WebView和JavaScript之间的交互

    近期在公司里參与了M3项目的开发,这个项目是使用HTML5开发的前端页面,在开发完成后,把项目地址写入Android.iOS的壳源代码里面,这样当应用被打开时候自己主动加载项目首页的URL.这样的做法 ...

  5. Android Webview 和Javascript交互,实现Android和JavaScript相互调用

    在Android的开发过程中.遇到一个新需求.那就是让Java代码和Javascript代码进行交互.在IOS中实现起来很麻烦.而在Android中相对来说容易多了.Android对这种交互进行了很好 ...

  6. Android WebView与JavaScript交互操作(Demo)

    应用场景: 为了使Android移动项目能够在较短的时间内完成开发,同时降低技术人员开发的成本投入,往往会采用Hybrid APP的开发模式.相关Hybrid APP(混合型应用)参看:http:// ...

  7. Android混合开发之WebView与Javascript交互

    前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.Web App.Hybrid App三种方式,个人觉得目前以Hybri ...

  8. Android中WebView的JavaScript代码和本地代码交互的三种方式

    一.Android中WebView的漏洞分析最近在开发过程中遇到一个问题,就是WebView使用的时候,还是需要解决之前系统(4.2之前)导致的一个漏洞,虽然现在这个系统版本用户很少了,但是也不能忽视 ...

  9. Android总结之WebView与Javascript交互[转]

    Android总结之WebView与Javascript交互   前言: 最近公司的App为了加快开发效率选择了一部分功能采用H5开发,从目前市面的大部分App来讲,大致分成Native App.We ...

随机推荐

  1. POJ2186(强连通分量分解)

    Popular Cows Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 35035   Accepted: 14278 De ...

  2. Code Signal_练习题_chessBoardCellColor

    Given two cells on the standard chess board, determine whether they have the same color or not. Exam ...

  3. centos7下docker发布第一个微服务应用(Eureka)

    1.在windows下打包 微服务应用通过maven进行打包,在项目的pom.xml执行mvn clean package,或者直接通过idea或者eclipse进行maven打包 之上操作将在项目的 ...

  4. Python 并发编程(管道,事件,信号量,进程池)

    管道 Conn1,conn2 = Pipe() Conn1.recv() Conn1.send() 数据接收一次就没有了 from multiprocessing import Process,Pip ...

  5. input不可编辑且颜色不变

    <input name="ly_qq" type="text" tabindex="2" onMouseOver="this ...

  6. 内联元素的padding和margin

    首先区分一下3类元素: 1)块级元素:div.p等这一类具有宽高属性,且单独占一行的元素: 2)占位元素:img.input这一类具有宽高属性.紧随上一个元素不单独占一行的元素: 3)内联元素:spa ...

  7. dubbo 图片服务器(FastDFS) redis solr ActiveMQ等简单配置使用

    一.dubbo 项目基于soa的架构,表现层和服务层是不同的工程.所以要实现商品列表查询需要两个系统之间进行通信. 1.1如何实现远程通信? 1.Webservice:效率不高基于soap协议.项目中 ...

  8. ionic2.2.1 配置环境变量及创建新项目

    1,jdk的安装与环境配置 jdk下载网址 http://www.oracle.com/technetwork/java/javase/downloads/index.html, jdk环境配置  A ...

  9. pm2以windows服务运行

    借助于pm2-windows-service 可以把pm2以windows服务运行.已服务运行的好处就是,即时用户注销也,pm2也会在后台运行 npm i pm2 -g npm i pm2-windo ...

  10. Cookie、Session 和 Token区别

    1 Cookie.Session 和 Token 都是用来做持久化处理的,目的就是让客户端和服务端相互认识.Http 请求默认是不持久的没有状态的,谁也不认识谁.   2 Cookie: 是存放在客户 ...