你好,游客 登录
背景:
阅读新闻

第99章、Android调用Javascript(从零开始学Android) - jianghuiquan的专栏

[日期:2013-03-18] 来源:  作者: [字体: ]

   在某些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”默认生成文件。

四、运行结果

  





收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻