浅谈Android程序与JavaScript脚本的交互

我们都知道，手机时代的来临的主要标志是啥？能够方便的接入互联网！互联网展现给我们的方式一般都是网页，网页中又必不可少的拥有javascript，所以说，android提供对javascript的支持那是迫在眉睫了，幸好，android早就给我们提供了无缝连接。让我们可以通过android与javascript进行交互。

我们的应用很简单，如图：

我们有一个输入框，旁边有个按钮，点击按钮就会提示我们输入的内容。当然这只是html中最简单的程序了，但是你将这个程序放入android手机中访问下试试，它是不会进行提示的。要想让其以android的形式提示用户，我们就需要用到android和javascript的交互。对了，这里展示的是一个网页哦，代码如下：

js.html

<html>
<head>
<title>js交互android</title>
<mce:script type="text/javascript"><!-- 

 function show(){
 var a = document.getElementById("text").value;
 alert(a); 

 }
// --></mce:script>
</head>
<body>
<form action="">
 <input type="text" id="text" value=""/>
 <input type="button" id="button" onclick="window.chenzheng_java.show()" value="clickme"/> 

</form> 

</body>
</html>

再看看我们的activity代码：

package cn.com.chenzheng_java.js; 

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.widget.Toast; 

public class JavaScriptActivity extends Activity {
 WebView webView;
 Handler handler = new Handler(); 

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main); 

  webView = (WebView) findViewById(R.id.webView1);
  /**
   * webSettings 保存着WebView中的状态信息。当WebView第一次被创建时，webSetting中
   * 存储的都为默认值。WebSetting和WebView是一一绑定的。如果webView被销毁了，那么
   * 我们再次调用webSetting中的方法时，会抛出异常。
   */
  WebSettings webSettings = webView.getSettings();
  webSettings.setJavaScriptEnabled(true);
  webView.loadUrl("file:///data/js.html"); 

  /***
   *webChromeClient是一个比较神奇的东西，其里面提供了一系列的方法，
   *分别作用于我们的javascript代码调用特定方法时执行，我们一般在其内部
   *将javascript形式的展示切换为android的形式。
   * 例如：我们重写了onJsAlert方法，那么当页面中需要弹出alert窗口时，便
   * 会执行我们的代码，按照我们的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() {
      Log.i("通知", "调用了该方法哦");
      /*
       * 通过webView.loadUrl("javascript:xxx")方式就可以调用当前网页中的名称
       * 为xxx的javascript方法
       */
      webView.loadUrl("javascript:show()");
     }
    }); 

   } 

  }, "chenzheng_java"); 

 }
}

注意：

1)为了让WebView从apk文件中加载assets，Android SDK提供了一个schema，前缀为"file:///android_asset/"。WebView遇到这样的schema，就去当前包中的assets目录中找内容。如上面的"file:///android_asset/demo.html"

2)addJavascriptInterface方法中要绑定的Java对象及方法要运行另外的线程中，不能运行在构造他的线程中，这也是使用Handler的目的。

3）如果你要访问网络，请在androidManifest.xml中加上权限<uses-permission android:name="android.permission.INTERNET"></uses-permission>

API
我们在程序中可以看到，android访问网页以及与javascript交互主要用到了这么几个类：

WebView ：我们可以认为它就是一个浏览器，会对用户访问的网址进行解析，下载，渲染……，然后返回给用户一个网页。  其内部使用的是webkit渲染引擎，它还包含了一些我们经常使用的功能，比如放大、缩小网页（需要在webSetting中先设置WebSettings.setBuiltInZoomControls(boolean)）；前进、后退……。

默认情况下，webView对javascript和页面的错误都是忽略的。很多时候，如果我们想要加载一个uri，可能我们更多的会使用这种形式：

Uri uri = Uri.parse("http://www.example.com"); Intent intent = new Intent(Intent.ACTION_VIEW, uri); startActivity(intent);

api中为我们提供了一个通过webView加载页面的例子，

我们可以看到，主要有loadUrl()和loadData()方法。这里请注意各个参数的含义哦、

拓展

此外，android还为我们提供了一些类来辅助我们的webview的使用。

WebViewClient:

。WebViewClient就是帮助WebView处理各种通知、请求事件的，具体来说包括：

  • onLoadResource:通知webView加载url指定的资源时触发
  • onPageStart：页面开始加载时触发
  • onPageFinish：页面加载完毕时触发
  • onReceiveError：出现错误时触发
  • WebChromeClient:

WebChromeClient是辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等

  • onCloseWindow(关闭WebView)
  • onCreateWindow()
  • onJsAlert (WebView上alert是弹不出来东西的，需要定制你的WebChromeClient处理弹出)
  • onJsPrompt
  • onJsConfirm
  • onProgressChanged
  • onReceivedIcon
  • onReceivedTitle

api中提供给我们一个实例：

WebSetting:和WebView是一一绑定的，控制webview的一些基础设置信息，如是否识别javascript，网页是否可放大缩小等。

如果我们想通过webview进行历史网页查看时，一定要注意，先通过如下方法判断下是否可执行该操作才好：

然后就可通过

  • void goBack()
  • void goBackOrForward(int steps)
  • void goForward()

三个方法进行操作了，字面意思很容易看懂，其中goBackOrForward传递进负数时为back操作，正数为forward操作。

赞 (0)

相关推荐

  • 原生javascript实现分享到朋友圈功能 支持ios和android

    原生javascript实现分享到朋友圈功能 支持ios和android

    现在主流的分享工具也有很多,例如JiaThis.bShare分享,甚至一些大公司的如百度分享,但是他们依旧停留在只是在PC端的分享,对手机端的支持不是太好. 大家都知道现在很多手机端浏览器都内置了一些分享组件,像UC浏览器.QQ浏览器,内置的组件分享可以直接启动相应的APP分享,要是一个JS能调用浏览器的内置分享组件,那是多么酷啊. 高手在民间啊,下面我们的小编就带你来看看这位兄弟的编写的JS库. 一.工具介绍 nativeShare.js 一个可以通过javascript直接调用原生分享的工具

  • Android开发方式之Java+html+javascript混合开发

    Android开发方式之Java+html+javascript混合开发

    android开发,除了使用原生态的开发方式之外,还可以使用java+html+javascript混合开发的方式来开发,这样可以节省大量的开发时间,同时还可以使不同设备的用户获得相同的用户体验.好了,废话不多说,先来看看今天要做什么. 主要是实现一个简单的注册功能,先用jquery mobile的方式写一个简单的注册页面,点击提交按钮之后跳转到一个新的activity中,同时把用户的注册信息显示出来,整体效果如下图: 这个页面完全用html+jquery写成,它的最下面有一个提交按钮,点击提交

  • Android通过json向MySQL中读写数据的方法详解【读取篇】

    本文实例讲述了Android通过json向MySQL中读取数据的方法.分享给大家供大家参考,具体如下: 首先 要定义几个解析json的方法parseJsonMulti,代码如下: private void parseJsonMulti(String strResult) { try { Log.v("strResult11","strResult11="+strResult); int index=strResult.indexOf("[");

  • Android与JS之间跨平台异步调用实例详解

    Android与JS之间跨平台异步调用实例详解

    Android与JS之间跨平台异步调用 为什么突然要搞这个问题呢? 在开发浏览器的时候遇到这个狗血的问题,花了将近1天的时间才想到这个解决方案,Android与JavaScirpt互调. 因为接口是抓取的别人的,所以出现了JS跨域问题,Android闪亮登场搞定了. GIF动画演示   WebView相关设置 WebSettings mWebSettings = getSettings(); mWebSettings.setDefaultTextEncodingName("UTF-8"

  • Android webview和js互相调用实现方法

    Android webview和js互相调用实现方法

    Android-webview和js互相调用 Android 和 H5 都是移动开发应用的非常广泛.市面上很多App都是使用Android开发的,但使用Android来开发一些比较复杂附属类,提示性的页面是得不偿失的.而H5具有开发速度快,更新不用依赖于App的更新,只需要服务端更新相应的页面即可,所以,App和H5页面相结合就显得尤为重要.而android和H5都不可能每次都是独立存在的,而是相互影响也相互的调用,获取信息等,例如,H5页面要获取App中的用户的基本信息,或者App端要操作H5

  • Android读取本地json文件的方法(解决显示乱码问题)

    本文实例讲述了Android读取本地json文件的方法.分享给大家供大家参考,具体如下: 1.读取本地JSON ,但是显示汉字乱码 public static String readLocalJson(Context context, String fileName){ String jsonString=""; String resultString=""; try { BufferedReader bufferedReader=new BufferedReade

  • Android开发之利用jsoup解析HTML页面的方法

    Android开发之利用jsoup解析HTML页面的方法

    本文实例讲述了Android利用jsoup解析HTML页面的方法.分享给大家供大家参考,具体如下: 这节主要是讲解jsoup解析HTML页面.由于在android开发过程中,不可避免的涉及到web页面的抓取,解析,展示等等,所以,在这里我主要展示下利用jsoup jar包来抓取cnbeta.com网站的话题分类的实例. 下面是主要的代码,由于使用及其简单,我这里就不再多说了: package com.android.web; import java.io.BufferedInputStream;

  • Android M(6.x)使用OkHttp包解析和发送JSON请求的教程

    关于Android 6.0 Android老版本网络请求: 1,HttpUrlConnection 2,Apache Http Client Android6.0版本网络请求: 1,HttpUrlConnection 2,OkHttp Android6.0版本废弃了老的网络请求,那么它的优势是什么呢? 1,支持SPDY,共享同一个Socket来处理同一个服务器的所有请求 2,如果SPDY不可用,则通过连接池来减少请求延时 3,无缝的支持GZIP来减少数据流量 4,缓存响应数据来减少重复的网络请求

  • Android通过json向MySQL中读写数据的方法详解【写入篇】

    Android通过json向MySQL中读写数据的方法详解【写入篇】

    本文实例讲述了Android通过json向MySQL中写入数据的方法.分享给大家供大家参考,具体如下: 先说一下如何通过json将Android程序中的数据上传到MySQL中: 首先定义一个类JSONParser.Java类,将json上传数据的方法封装好,可以直接在主程序中调用该类,代码如下 public class JSONParser { static InputStream is = null; static JSONObject jObj = null; static String j

  • Android WebView使用方法详解 附js交互调用方法

    Android WebView使用方法详解 附js交互调用方法

    目前很多Android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: --可以直接显示和渲染web页面,直接显示网页 --webview可以直接用html文件(网络上或本地assets中)作布局 --和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1

随机推荐