WebView与js的交互包含两方面,一是在html中通过js调用java代码;二是在安卓java代码中调用js。

一、html中通过js调用java代码

js中调用java代码其实就记住一点,WebView设置一个和js交互的接口(这里的接口是一般的意思,不是java中接口的含义),这个接口其实就是一个一般的类,同时为这个接口取一个别名。这个过程如下:
mWebView.addJavaScriptInterface(new DemoJavaScriptInterface(),"demo");
new DemoJavaScriptInterface()就是这个接口,demo就是这个接口的别名。
上面的代码执行后在html中js就能通过别名(这里是“demo”)来调用DemoJavaScriptInterface类中的任何方法了。
如果我们想让html中的一个button点击之后调用java中的函数可以这样:
<input type="button" value="click me" onclick="window.demo.clickOnAndroid()"/>
但是因为安全问题,在Android4.2中(如果应用的android:targetSdkVersion为17+)JS只能访问带有@javaScriptInterface注解的java函数,所以开发版本较高的时候,在需要被调用的函数前加上这个注解。4.2以下为了安全尽量不要调用addJavascriptInterface,需要另谋他法。

下面是google官方给的实例:
WebViewDemo.java

[代码]java代码:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
package com.google.android.webviewdemo;
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;
/**
 * Demonstrates how to embed a WebView in your activity. Also demonstrates how
 * to have javascript in the WebView call into the activity, and how the activity
 * can invoke javascript.
 * <p>
 * In this example, clicking on the android in the WebView will result in a call into
 * the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code
 * will turn around and invoke javascript using the {@link WebView#loadUrl(String)}
 * method.
 * </p><p>
 * Obviously all of this could have been accomplished without calling into the activity
 * and then back into javascript, but this code is intended to show how to set up the
 * code paths for this sort of communication.
 *
 */
public class WebViewDemo extends Activity {
    private static final String LOG_TAG = "WebViewDemo";
    private WebView mWebView;
    private Handler mHandler = new Handler();
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
        mWebView = (WebView) findViewById(R.id.webview);
        WebSettings webSettings = mWebView.getSettings();
        webSettings.setSavePassword(false);
        webSettings.setSaveFormData(false);
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(false);
        mWebView.setWebChromeClient(new MyWebChromeClient());
        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
        mWebView.loadUrl("file:///android_asset/demo.html");
    }
    final class DemoJavaScriptInterface {
        DemoJavaScriptInterface() {
        }
        /**
         * This is not called on the UI thread. Post a runnable to invoke
         * loadUrl on the UI thread.
         */
        public void clickOnAndroid() {
            mHandler.post(new Runnable() {
                public void run() {
                    mWebView.loadUrl("javascript:wave()");
                }
            });
        }
    }
    /**
     * Provides a hook for calling "alert" from javascript. Useful for
     * debugging your javascript.
     */
    final class MyWebChromeClient extends WebChromeClient {
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            Log.d(LOG_TAG, message);
            result.confirm();
            return true;
        }
    }
}</p>

 

demo.html

[代码]xml代码:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<html>
    <script language="javascript">
        /* This function is invoked by the activity */
        function wave() {
            alert("1");
            document.getElementById("droid").src="android_waving.png";
            alert("2");
        }
    </script>
    <body>
        <!-- Calls into the javascript interface for the activity -->
        <a onClick="window.demo.clickOnAndroid()">
            <div style="width:80px;
                margin:0px auto;
                padding:10px;
                text-align:center;
                border:2px solid #202020;" >
                <img id="droid" src="android_normal.png"/><br>
                Click me!
            </div>
        </a>
    </body>
</html>

 

main.xml

[代码]xml代码:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/intro"
        android:padding="4dip"
        android:textSize="16sp"
        />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        />
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          
</LinearLayout>

 

Android调用js

调用webview页面内的js方法,调用形式:
mWebView.loadUrl("javascript:wave()");
其中wave()是js中的一个方法,当然你可以把这个方法改成其他的方法,也就是android调用其他的方法。但java不能直接获取Js方法的返回结果。

小结

具体交互流程如下:

  • 点击图片,则在js端直接调用android上的方法clickOnAndroid();
  • clickOnAndroid()方法(利用线程)调用js的方法。
  • 被调用的js直接控制html。

利用webView的这种方式在有些时候UI布局就可以转成相应的html代码编写了,而html布局样式之类有DW这样强大的工具,而且网上很多源码,很多代码片。在UI和视觉效果上就会节省很多时间,重复发明轮子没有任何意义。

交互结果

Android Webview中Java调用Js方法很容易,loadUrl("javascript:isOk()")就可以调用isOk这个Js方法,但不能直接获取Js方法的返回结果。
1.传统的方法中,Js获取Java信息可以采用如下方式:

[代码]java代码:

1
2
3
4
5
6
7
class JsObject {
      @JavascriptInterface
      public String toString() { return "injectedObject"; }
   }
webView.addJavascriptInterface(new JsObject(), "injectedObject");
webView.loadData("", "text/html", null);
webView.loadUrl("javascript:alert(injectedObject.toString())");

2.Java获取Js信息(如通过Js获取网页源代码)可以这样:

[代码]java代码:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import android.app.Activity;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.util.Log;
import android.webkit.WebView;
import android.webkit.WebViewClient;
 
public class HtmlSource extends Activity {
    private WebView webView;
 
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        webView = (WebView)findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new InJavaScriptLocalObj(), "local_obj");
        webView.setWebViewClient(new MyWebViewClient());
        webView.loadUrl("http://www.cnblogs.com/hibraincol/");
    }
 
 
   final class MyWebViewClient extends WebViewClient{ 
        public boolean shouldOverrideUrlLoading(WebView view, String url) {  
            view.loadUrl(url);  
            return true;  
        
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            Log.d("WebView","onPageStarted");
            super.onPageStarted(view, url, favicon);
        }   
        public void onPageFinished(WebView view, String url) {
            Log.d("WebView","onPageFinished ");
            view.loadUrl("javascript:window.local_obj.showSource(''+" +
                "document.getElementsByTagName('html')[0].innerHTML+'');");
            super.onPageFinished(view, url);
        }
    }
 
    final class InJavaScriptLocalObj {
 
        public void showSource(String html) {
            Log.d("HTML", html);
        }
    }
}

当网页中有超链接跳转时,将会调用WebClient的shouldOverrideUrlLoading方法,若设置 WebViewClient 且该方法返回 true,则说明由应用的代码处理该 url,WebView 不处理,就可以达到拦截跳转的效果。

Android与javaScript的交互的更多相关文章

  1. Android WebView JavaScript交互

    今天介绍一下,Android中Webview与JavaScript的交互,首先是在布局文件里添加webview控件: <WebView android:id="@+id/webview ...

  2. 客户端相关知识学习(三)之Android原生与H5交互的实现

    Android原生与H5交互的实现 H5调用原生的方式 方式可能有多种,根据开发经验,接触过两种方式. 方法一:Android向H5注入全局js对象,也就是H5调Android 1.首先对WebVie ...

  3. Android和JavaScript相互调用的方法

    转载地址:http://www.jb51.net/article/77206.htm 这篇文章主要介绍了Android和JavaScript相互调用的方法,实例分析了Android的WebView执行 ...

  4. [置顶] android 与JavaScript的互相调用

    1.html代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> ...

  5. android与javascript相互调用

    下面这一节来介绍android和javascript是怎么相互调用的,这样我们的UI界面设计起来就简单多了,而且UI设计起来也可以跨平台.现在有好多web app前台框架了,比如sencha和jque ...

  6. C# WinForm 和 javascript进行交互 使用HTML做界面

    01 using System; 02 using System.Collections.Generic; 03 using System.Text; 04 using System.Reflecti ...

  7. Android - 和其他APP交互 - 获得activity的返回值

    启用另一个activity不一定是单向的.也可以启用另一个activity并且获得返回值.要获得返回值的话,调用startActivityForResult()(而不是startActivity()) ...

  8. Android - 和其他APP交互 - 把用户带到其他app

    Android的重要功能之一就是app可以根据要执行的操作让用户启动另外一个app.例如,app有一个商业地址然后想要在地图上显示,并不需要在app中加一个显示地图的activity,可以直接用Int ...

  9. [Unity][安卓]Unity和Android Studio 3.0 交互通讯(1)Android Studio 3.0 设置

    [安卓]Android Studio 3.0 JDK安卓环境配置(2017.10) http://blog.csdn.net/bulademian/article/details/78387052 [ ...

随机推荐

  1. 【Edit Distance】cpp

    题目: Given two words word1 and word2, find the minimum number of steps required to convert word1 to w ...

  2. MOCTF-火眼金睛

    MOCTF-火眼金睛 http://119.23.73.3:5001/web10/ 把这个题目当作python爬虫来练习. 首先要获取到文本框里面的全部信息, import requests impo ...

  3. java线程安全问题原因及解决办法

    1.为什么会出现线程安全问题 计算机系统资源分配的单位为进程,同一个进程中允许多个线程并发执行,并且多个线程会共享进程范围内的资源:例如内存地址.当多个线程并发访问同一个内存地址并且内存地址保存的值是 ...

  4. 14 Java虚拟机实现 synchronized

    java 中的 synchronized 运行 在 Java 中,我们经常用 synchronized 关键字对程序进行加锁.无论是一个代码块还是静态方法或者实例方法,都可以直接用 synchroni ...

  5. POJ2796 Feel Good -- 单调队列

    Feel Good Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 14489   Accepted: 4015 Case T ...

  6. Linux抓包工具tcpdump命令详解

    1.简介      用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具. tcpdump可以将网络中 ...

  7. BZOJ 1864:[Zjoi2006]三色二叉树(树DP)

    三色二叉树 问题描述 输入 仅有一行,不超过500000个字符,表示一个二叉树序列. 输出 输出文件也只有一行,包含两个数,依次表示最多和最少有多少个点能够被染成绿色. 样例输入 1122002010 ...

  8. 【bzoj4896】[Thu Summer Camp2016]补退选 Trie树+STL-vector

    题目描述 X是T大的一名老师,每年他都要教授许多学生基础的C++知识.在T大,每个学生在每学期的开学前都需要选课,每次选课一共分为三个阶段:预选,正选,补退选:其中"补退选"阶段最 ...

  9. 使用SS5搭建linux下的sock5代理服务器

    http://sourceforge.net/projects/ss5/下载最新源码 apt-get install libpam0g-dev apt-get install libldap2-dev ...

  10. P4302 [SCOI2003]字符串折叠

    题目描述 折叠的定义如下: 一个字符串可以看成它自身的折叠.记作S = S X(S)是X(X>1)个S连接在一起的串的折叠.记作X(S) = SSSS…S(X个S). 如果A = A’, B = ...