android软件开发之webView.addJavascriptInterface循环渐进【一】

代码
由于这里是第一阶段的webView所我就写个最简单的文章,这样大家可以循环渐进的来了解addJavascriptInterface这句话是怎么用的。
在这里我们引用Google的一个事例下面是我Google给提供的一个dome的地址: 点击打开链接
我们先看它的HTML文件,HTML的文件路径是在: 点击打开链接
他的代码为:
<html>
        <script language="javascript">
            /* This function is invoked by the activity */
            /* 这个函数被Activity调用的活动 这里的图片我们可以在它的连接里面下载 android_waving.png */
                function wave() {
                        /* 这里是一个javascript 自定义函数,这是由我们在android的程序里调用的,不在在HTML中调用*/
                        document.getElementById("droid").src="android_waving.png";
                }
        </script>
        <body>
            <!-- Calls into the javascript interface for the activity -->
            <!-- 从HTML文件中调用activity中的函数 -->
            <!-- 也就是从HTML到android程序 留意window.demo.clickOnAndroid()这句话 -->
            <a onClick="window.demo.clickOnAndroid()"><div style="width:80px;
                        margin:0px auto;
                        padding:10px;
                        text-align:center;
                        border:2px solid #202020;" >
                                <!-- 图片默认的为 android_normal.png -->
                                <img id="droid" src="android_normal.png"/><br>
                                Click me!
                </div></a>
        </body>
</html>

这里我做了注释,可能你会看不懂,没有关系,下面我们就再看的activity的代码吧。点击打开链接

由于他的源码比较长,我就不多全部都贴进来了,我只贴一下重要的部分就好了…….貌似都重要,还是全贴吧

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

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);
        // 下面的一句话是必须的,必须要打开javaScript不然所做一切都是徒劳的
        webSettings.setJavaScriptEnabled(true);
        webSettings.setSupportZoom(false);

        mWebView.setWebChromeClient(new MyWebChromeClient());

        // 看这里用到了 addJavascriptInterface 这就是我们的重点中的重点
        // 我们再看他的DemoJavaScriptInterface这个类。还要这个类一定要在主线程中
        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

        mWebView.loadUrl("file:///android_asset/demo.html");
    }

    // 这是他定义由 addJavascriptInterface 提供的一个Object
    final class DemoJavaScriptInterface {
        DemoJavaScriptInterface() {
        }

        /**
         * This is not called on the UI thread. Post a runnable to invoke
         * 这不是呼吁界面线程。发表一个运行调用
         * loadUrl on the UI thread.
         * loadUrl在UI线程。
         */
        public void clickOnAndroid() {        // 注意这里的名称。它为clickOnAndroid(),注意,注意,严重注意
            mHandler.post(new Runnable() {
                public void run() {
                    // 此处调用 HTML 中的javaScript 函数
                    mWebView.loadUrl("javascript:wave()");
                }
            });
        }
    }
// 线下的代码可以不看,调试用的
///
    /**
     * Provides a hook for calling "alert" from javascript. Useful for
     * 从javascript中提供了一个叫“提示框” 。这是很有用的
     * debugging your javascript.
     *  调试你的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;
        }
    }
}
这里我也做了注释,在这里他在他的类中定义了一个 clickOnAndroid() 的函数,我记不记得我们在 HTML中看到的 window.demo.clickOnAndroid()这句话。如果忘记了就 翻上去再看一下,特别是我说注意的地方。是的,这里的 clickOnAndroid() 是我们android程序中的一个函数。可能你会问那.为什么是 windows.demo.这里demo我们可以看到在
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

这句话 中后面它加了一个demo这个字符.我可以理解成 addJavascriptInterface 的前一个参数为HTML中的一个方法,当然我更喜欢说他为函数。demo就是个对象…呵呵,我对这也不是怎么的熟悉。至于这个window我也不知道是为什么我只知道这样写程序就可以正确的运行,如果你知道这是什么那么请你在下面的留言版里告诉我一下好吗?

现在知道怎么在HTML中怎么调用Android程序的一个方法了吧。其实就是这这么的简单,不过demo这个字符我没有试他是不是区分大小写。如果你有兴趣那么你可以去试一下它有没有区分大小写。知道了怎么样从HTML中怎么样调用Android中的方法,下面我就再研究一下,它是怎么样从Android到HTML的吧。其实这个很简单,只要使用

mWebView.loadUrl("javascript:wave()");

这句话就可以了。 这样我主解读完Google给我提供的一个demo了。下面就是让我来试一下吧,试试他的这个demo吧,因为人家给提供了源码,所以我就不贴的啦,大家把他的源码贴上去就可以实现这个啦

在下一集里我将会带领大家来怎么使用 addJavascriptInterface 怎么样从一个JavaScript 的函数中获得一个返回值。文章内容不多,还请见谅




转载自:android软件开发之webView.addJavascriptInterface循环渐进【一】


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值