Android与Javascript交互之入门
来源:互联网 发布:人工智能的好处和坏处 编辑:程序博客网 时间:2024/05/18 16:54
Android与JavaScript交互主要是使用的WebView。
关于WebView,一般涉及到2个类:WebChromeClient 和 WebViewClient 。
开发的大致流程为(摘自Android developer):
A WebView has several customization points where you can add your own behavior. These are:
Creating and setting a WebChromeClient subclass. This class is called when something that might impact a browser UI happens, for instance, progress updates and JavaScript alerts are sent here (see Debugging Tasks).Creating and setting a WebViewClient subclass. It will be called when things happen that impact the rendering of the content, eg, errors or form submissions. You can also intercept URL loading here (via shouldOverrideUrlLoading()).Modifying the WebSettings, such as enabling JavaScript with setJavaScriptEnabled().Injecting Java objects into the WebView using the addJavascriptInterface(Object, String) method. This method allows you to inject Java objects into a page's JavaScript context, so that they can be accessed by JavaScript in the page.
好了,废话不多说,上Demo。
此demo完成了Android与Javascript交互的基础功能,并用json字符串进行了值传递。
秉持一贯的风格,知识内容都在代码注释中,这样方便以后复习。(布局就不贴了,比较简单)
整个工程结构比较简单:
首先是这个jsdroid.html文件的界面(贴界面其实有点2 --!):
html代码比较简单:
- <html>
- <meta charset="GBK">
- <head>
- <title>js交互android</title>
- <script type="text/javascript">
-
- function show(){
- var a = document.getElementById("text").value;
- alert("警告,你输入的是:"+a);
- }
-
- function rfInfo(jsonStr) {
- document.getElementById("info").innerHTML="从Android客户端传来的作者信息:"+jsonStr.Developer;
- }
-
- function cfm() {
- if(confirm("确认界面提示?")){
- return true;
- }else
- return false;
- }
-
- function pmt() {
- var place = prompt("请输入位置?","");
- }
-
- </script>
- </head>
- <body>
- <form action="">
- <p><div id="info" >从Android客户端传来的作者信息:</div></p>
- <p><input type="text" id="text" value="input your msg"/></p>
- <p><div id="inputinfo" >输入的信息:</div></p>
- <p><input type="button" id="btn_alert" onclick="show()" value="Alert"/></p>
- <p><input type="button" id="btn_cfm" onclick="cfm()" value="Confirm"/></p>
- <p><input type="button" id="btn_pmt" onclick="pmt()" value="Prompt"/></p>
- <p><input type="button" id="btn_pmt" onclick="window.demo.adrdMethod()" value="调用android方法"/></p>
- </form>
- </body>
- </html>
其中,id为“btn_pmt”的button,监听器设置的是调用Android中的方法。
好了,上最重要的,android端实现的代码。
- package com.harlan.demo.activity;
-
- import android.annotation.SuppressLint;
- import android.app.Activity;
- import android.graphics.Bitmap;
- import android.os.Bundle;
- import android.os.Handler;
- import android.util.Log;
- import android.view.View;
- 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.Toast;
-
- @SuppressLint("SetJavaScriptEnabled")
- public class MainActivity extends Activity {
-
- private static final String TAG = "MainActivity";
- WebView webView;
- Handler handler = new Handler();
- Button btn;
- final String jsonStr = "{\"Developer\":\"Harlan\",\"Place\":\"Nanjing\"}";
-
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
-
- webView = (WebView) findViewById(R.id.myweb);
- btn = (Button) findViewById(R.id.mybtn);
-
-
-
-
-
-
- WebSettings webSettings = webView.getSettings();
-
- webSettings.setJavaScriptEnabled(true);
-
- webSettings.setSupportZoom(false);
-
- webView.loadUrl("file:///android_asset/jsdroid.html");
-
-
-
-
-
-
-
- class HarlanWebChromeClient extends WebChromeClient {
-
-
-
-
-
- @Override
- public boolean onJsAlert(WebView view, String url, String message,
- JsResult result) {
- Toast.makeText(getApplicationContext(), message,
- Toast.LENGTH_LONG).show();
- Log.d(TAG, "弹出了提示框");
-
-
-
-
-
- result.confirm();
- return true;
- }
-
-
-
-
-
- @Override
- public boolean onJsConfirm(WebView view, String url,
- String message, JsResult result) {
- Log.d(TAG, "弹出了确认框");
- result.confirm();
- return true;
- }
-
-
-
-
-
- @Override
- public boolean onJsPrompt(WebView view, String url,
- String message, String defaultValue,
- JsPromptResult result) {
- Log.d(TAG, "弹出了输入框");
- result.confirm();
- return true;
- }
-
-
-
-
-
- @Override
- public boolean onJsBeforeUnload(WebView view, String url,
- String message, JsResult result) {
- Log.d(TAG, "弹出了离开确认框");
- result.confirm();
- return true;
- }
- }
-
- class HarlanWebViewClient extends WebViewClient{
-
-
-
- @Override
- public boolean shouldOverrideUrlLoading(WebView view,
- String url) {
-
- view.loadUrl(url);
- return true ;
- }
-
-
-
-
- @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);
- }
-
-
-
-
- @Override
- public void onLoadResource(WebView view, String url) {
-
- super.onLoadResource(view, url);
- }
-
-
-
-
- @Override
- public void onReceivedError(WebView view, int errorCode,
- String description, String failingUrl) {
-
- super.onReceivedError(view, errorCode, description, failingUrl);
- }
- };
-
- webView.setWebChromeClient(new HarlanWebChromeClient());
- webView.setWebViewClient(new HarlanWebViewClient());
-
-
-
-
-
-
- webView.addJavascriptInterface(new Object() {
- @SuppressWarnings("unused")
- public void adrdMethod() {
- handler.post(new Runnable() {
- @Override
- public void run() {
- Log.d(TAG, "js调用了Android方法");
- }
- });
- }
- }, "demo");
-
- btn.setOnClickListener(new View.OnClickListener() {
- @Override
- public void onClick(View v) {
- Log.d(TAG, "Android调用了js方法");
-
-
-
-
- webView.loadUrl("javascript:rfInfo("+jsonStr+")");
- }
- });
-
- }
- }
这只是粗略地学习了下android和Javascript的交互,后面的,还需要继续深入研究下。
最终在手机上跑的效果图:
Demo的下载地址:
http://download.csdn.net/detail/singleton1900/5238800