WebView中使用javaScript

现在在很多应用中都会嵌入web网页,一些操作直接在webview中实现。这样做最大的一个好处是,不需要更新手机客户端即可在手机端发布新的大型信息,必须新的活动,新的促销信息等。
举一个同程网的例子看一下:

1. 这是同程网首页,我们尝试点击首页的幻灯片:

首页幻灯片

2. 好了,进入了一整个页面的webView,然后我们点击webView上的这个标价80元的大图片

web页面,活动列表

3. 跳转到了一个正常的Android布局

活动详情页

现在我们分析一下实现方法:
很简单,webView加载一个HTML,HTML中加入javaScript代码。点击指定图片的时候,JS调用本地Java代码,实现Activity的跳转。不会JS也没有关系,现在我们建一个Demo简单看一下。

Paste_Image.png

这是放在assets中的html文件,主要看<body>中的内容,<div>中的内容意思是显示一张img,id为"droid",src表示加载assets中的一个图片,当然这些不是重点,如果是服务器端,你的后端程序员会帮你搞定的。style表示的是设置这样img的一些布局格式。
重点是 <a 中的代码,onClick表示这张图片可点击,点击之后调用本地java代码中的clickOnAndroid()方法,当然也可以是有参函数,demo是一个代号。

<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="ic_launcher.png"/><br>
                Click me, can load clickOnAndroid
        </div></a>
    </body>
</html>

这个是主Activity的方法。

public class WebViewDemo extends Activity {
    private static final String LOG_TAG = "WebViewDemo";
    private WebView mWebView;
    private Handler mHandler = new Handler();
    
    @SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" }) @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setContentView(R.layout.main);
        mWebView = (WebView) findViewById(R.id.webview);
        
        //最开始的一步,获取WebSetting,管理WebView的设置状态
        WebSettings webSettings = mWebView.getSettings();
        
        // 设置JS可用
        webSettings.setJavaScriptEnabled(true);
        // 是否支持缩放
        webSettings.setSupportZoom(false);
        
        //WebChromeClient和WebSetting一样,也是WebView的辅助对象
        mWebView.setWebChromeClient(new MyWebChromeClient());
        
        // 添加JS调用接口, DemoJavaScriptInterface是"接口",在里面写上点击webView调用的java方法, demo是这个接口的别名
        // 在HTML的JS就能通过别名(demo)来调用newDemoJavaScriptInterface类中的任何方法。
        mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");
        //载入具体的web地址
        mWebView.loadUrl("file:///android_asset/demo.html");
    }
        
    
    //这个接口就是addJavascriptInterface方法中添加的接口,当然这个方法里也可以传入this,那么就不需要这个接口了,clickOnAndroid方法直接作为成员方法出现
    final class DemoJavaScriptInterface {
        
        DemoJavaScriptInterface() {
        }
        @ JavascriptInterface       // SDK-17以上需加入这个注解
        public void clickOnAndroid() {
//          //接口中的事件不能在UI线程中,可以用handler或者runOnUiThread
//          mHandler.post(new Runnable() {
//              public void run() {
//                  //java调用JS中的方法,对应 function wave()
//                  mWebView.loadUrl("javascript:wave()");
//                  
//              }
//          });
            startActivity(new Intent(WebViewDemo.this, ActivityTwo.class));
        }
    }
    
    
    /**
     * Provides a hook for calling "alert" from javascript. Useful for
     * debugging your javascript.
     */
    final class MyWebChromeClient extends WebChromeClient {
        // 处理JS中的Alert事件
        @Override
        public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
            Log.d(LOG_TAG, message);
            result.confirm();
            return true;
        }
    }
}
WebViewDemo
ActivityTwo

clickOnAndroid()内是启动另一个Activity,原先被我注释掉的是本地Java代码调用webView中的javaScript方法(即Html中的function wave()片段 )。需要注意的是,如果需要更新UI,是需要放在工作线程中的,使用handler或者runOnUiThread。
再者,如果需要判断点击webView中不同的图片,跳转到不同的详情页,可以在clickOnAndroid()中传入Json对象或者相关信息,比如一个活动的Json信息,再适配到下一个Activity中去显示。
这样,大概一个webView专题页面就实现了,不需要更新客户端。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容