在某些Android应用中,使用Javascript调用Android中的方法也是会用到的。
(1)用WebView来显示HTML代码;
(2)允许WebView执行JavaScript
webView.getSettings().setJavaScriptEnabled(true);
(3)获取到HTML文件,也可从网络中获取
webView.loadUrl("file:///android_asset/index.html"); (注意:index.html文件要存放在assets文件夹中)
(4)为javascript提供一个回调的接口,这里要注意,一定要在单独的线程中实现,要不会阻塞线程的
addJavascriptInterface(Object obj, String interfaceName) 中obj代表一个java对象,这里我们一般会实现一个自己的类,类里面提供我们要提供给javascript访问的方法
interfaceName则是访问我们在obj中声明的方法时候所用到的js对象,调用模式为window.interfaceName.方法名()
(5)webChromeClient提供了一系列与javascript相对应的方法:代码调用特定方法时,我们一般在其内部将javascript形式的展示切换为android的形式。
一、设计界面
1、布局文件
打开res/layout/activity_main.xml文件。
输入以下代码:
- <?xml version="1.0" encoding="utf-8"?>
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:orientation="vertical"
- android:layout_width="match_parent"
- android:layout_height="match_parent" >
- <WebView
- android:id="@+id/webview"
- android:layout_width="match_parent"
- android:layout_height="match_parent" />
-
- </LinearLayout>
二、程序文件
1、MainActivity.java
打开“src/com.genwoxue.webviewandroidjs/MainActivity.java”文件。
然后输入以下代码:
- package com.genwoxue.webviewandroidjs;
-
- import android.app.Activity;
- import android.os.Bundle;
- import android.os.Handler;
- import android.webkit.JsResult;
- import android.webkit.WebChromeClient;
- import android.webkit.WebView;
- import android.widget.Toast;
-
- public class MainActivity extends Activity {
- private WebView webView=null;
- Handler handler = new Handler();
-
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- //实例化WebView
- webView = (WebView) findViewById(R.id.webview);
- //允许JavaScript执行
- webView.getSettings().setJavaScriptEnabled(true);
- //加载HTML文件:注意存放到至assets文件夹,你也可以放到互联网。
- webView.loadUrl("file:///android_asset/index.html");
-
-
- //webChromeClient提供了一系列与javascript相对应的方法
- //代码调用特定方法时,我们一般在其内部将javascript形式的展示切换为android的形式。
- //例如:我们重写了onJsAlert方法,那么当页面中需要弹出alert窗口时,便会在Android中以Toast的形式提示用户。
- class MyWebChromeClient extends WebChromeClient {
- @Override
- public boolean onJsAlert(WebView view, String url, String message,
- JsResult result) {
- Toast.makeText(getApplicationContext(), message,
- Toast.LENGTH_LONG).show();
- return true;
- }
- }
-
- webView.setWebChromeClient(new MyWebChromeClient());
-
- //为javascript提供一个回调的接口,这里要注意,一定要在单独的线程中实现,要不会阻塞线程的
- //addJavascriptInterface(Object obj, String interfaceName)
- // obj代表一个java对象,这里我们一般会实现一个自己的类,类里面提供我们要提供给javascript访问的方法
- // interfaceName则是访问我们在obj中声明的方法时候所用到的js对象,调用模式为window.interfaceName.方法名()
- webView.addJavascriptInterface(new Object() {
- public void show() {
- handler.post(new Runnable() {
- @Override
- public void run() {
- //通过webView.loadUrl("javascript:xxx")方式就可以调用当前网页中的名称
- // 为xxx的javascript方法
- webView.loadUrl("javascript:show()");
- }
- });
- }
-
- }, "AndroidJs");
- }
- }
2、index.html
新建“assets/index.html”文件。
然后输入以下代码:
- <!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=UTF-8">
-
- <title>Calculate</title>
-
- </head>
-
- <script language="JavaScript">
- function show(){
- var n=document.getElementById("number").value;
- alert(n*n);
- }
- </script>
-
- <body>
-
- <input type="text" id="number">
- <input type="submit" value="Calculate" onClick="show()">
- </body>
- </html>
三、配置文件
采用“AndroidManifest.xml”默认生成文件。
四、运行结果