亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb

首頁 > 系統 > Android > 正文

android中webview控件和javascript交互實例

2020-04-11 11:49:03
字體:
來源:轉載
供稿:網友

當我們要實現豐富的圖文混排效果的時候,我們一般會使用webview,這是一個功能十分強大的的控件,來看看官方的解釋:

復制代碼 代碼如下:
A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.

一個能顯示網頁內容的View。該類是你實現一個自己的瀏覽器,或者只是在activity中顯示網頁內容的基礎;它基于WebKit內核來顯示網頁,并且包含了實現前后翻頁、放大縮小,文字搜索方法。

從上面你應該了解到了基本功能,也就是顯示網頁。這篇文章中我們主要討論webview和Javascript的交互。如果你的js基礎比java基礎好的話那么采用這種方式做一些復雜的處理是個不錯的選擇。

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”)來調用newDemoJavaScriptInterface類中的任何方法。

如我們想讓html中的一個button點擊之后調用java中的函數可以這樣:

復制代碼 代碼如下:

<input type="button"  value="click me"  onclick="window.demo.clickOnAndroid()"/>

但是因為安全問題,在Android4.2中(如果應用的android:targetSdkVersion數值為17+)JS只能訪問帶有 @JavascriptInterface注解的Java函數。因此如果你的開發版本比較高,需要在被調用的函數前加上@JavascriptInterface注解。

下面是谷歌給出的代碼示例:
WebViewDemo.java

復制代碼 代碼如下:

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>
 * 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;
        }
    }
}

demo.html

復制代碼 代碼如下:

<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

復制代碼 代碼如下:

<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

上面的代碼在演示如何在js中調用java代碼的同時也演示了如何在java中調用js
調用形式:

復制代碼 代碼如下:
mWebView.loadUrl("javascript:wave()");

其中wave()是js中的一個方法,當然你可以把這個方法改成其他的方法,也就是android調用其他的方法。

demo的解釋:

現在你一定了解了android和js的交互了。是時候分析一些demo了,根據上面講的你也應該比較清楚了。具體交互流程如下:

①點擊圖片,則在js端直接調用android上的方法clickOnAndroid();
②clickOnAndroid()方法(利用線程)調用js的方法。
③被②調用的js直接控制html。

個人總結:利用webView的這種方式在有些時候UI布局就可以轉成相應的html代碼編寫了,而html布局樣式之類有DW這樣強大的工具,而且網上很多源碼,很多代碼片。在UI和視覺效果上就會節省很多時間,重復發明輪子沒有任何意義。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
亚洲香蕉成人av网站在线观看_欧美精品成人91久久久久久久_久久久久久久久久久亚洲_热久久视久久精品18亚洲精品_国产精自产拍久久久久久_亚洲色图国产精品_91精品国产网站_中文字幕欧美日韩精品_国产精品久久久久久亚洲调教_国产精品久久一区_性夜试看影院91社区_97在线观看视频国产_68精品久久久久久欧美_欧美精品在线观看_国产精品一区二区久久精品_欧美老女人bb
日产精品99久久久久久| 久久国产精品免费视频| 亚洲jizzjizz日本少妇| 亚洲成人激情视频| 成人黄色av网站| 亚洲欧美中文日韩v在线观看| 911国产网站尤物在线观看| 欧美在线影院在线视频| 久久久精品久久久久| 久久精品国产亚洲精品2020| 少妇高潮久久久久久潘金莲| 91高清免费视频| 国产精品高潮呻吟久久av无限| 欧洲成人免费aa| 日韩电影免费在线观看| 91精品国产91久久久久福利| 国产欧美一区二区三区在线看| 亚洲v日韩v综合v精品v| 欧美极品第一页| 中文字幕精品av| 亚洲www在线| 国产精品福利在线| 成人国产精品日本在线| 色在人av网站天堂精品| 亚洲日本成人女熟在线观看| 国产玖玖精品视频| 欧美日韩福利电影| 91日本在线视频| 91福利视频在线观看| 精品亚洲一区二区三区在线播放| 精品久久久香蕉免费精品视频| 午夜精品免费视频| 日韩在线欧美在线| 中文亚洲视频在线| 亚洲人成在线播放| 欧美www在线| 日韩av片电影专区| 亚洲剧情一区二区| 成人福利网站在线观看11| 国产成人一区三区| 久久精品最新地址| 国产精品久久激情| 亚洲天堂一区二区三区| 热久久免费国产视频| 国产不卡在线观看| 97在线观看免费高清| 亚洲国产精品一区二区久| 欧美一级成年大片在线观看| 热门国产精品亚洲第一区在线| 92看片淫黄大片欧美看国产片| 亚洲三级av在线| 欧美一级视频在线观看| 福利微拍一区二区| 国产成人精品电影| 精品久久久国产| 亚洲石原莉奈一区二区在线观看| 欧美一区二区三区图| 亚洲福利视频免费观看| 亚洲欧美精品伊人久久| 欧美日韩激情小视频| 亚洲二区中文字幕| 国产精品18久久久久久首页狼| 日韩电影视频免费| 日本三级韩国三级久久| 亚洲视频自拍偷拍| 国产福利精品av综合导导航| 亚洲福利影片在线| 最近2019中文免费高清视频观看www99| 国产经典一区二区| 97在线看福利| 亚洲天堂色网站| 亚洲18私人小影院| 亚洲色图第三页| 欧美日韩国产二区| 日韩在线观看av| 日韩福利伦理影院免费| www.日韩不卡电影av| 久久久久久久久久久久久久久久久久av| 国产亚洲精品久久久久动| 国产精品一区二区三区成人| 色中色综合影院手机版在线观看| 欧美人成在线视频| 91精品国产自产在线观看永久| 精品国产福利视频| 国产精品成人免费视频| 亚洲free性xxxx护士白浆| 亚洲xxxx妇黄裸体| 国产精品嫩草视频| 亚洲国产私拍精品国模在线观看| 欧美精品xxx| 国产aⅴ夜夜欢一区二区三区| 久久不射电影网| 国产亚洲日本欧美韩国| 精品国内产的精品视频在线观看| 亚洲美女在线观看| 欧日韩不卡在线视频| 久久久久国产视频| 欧美激情一级二级| 国产成人涩涩涩视频在线观看| 国产拍精品一二三| 国产精品∨欧美精品v日韩精品| 韩国三级电影久久久久久| 九九精品在线播放| 色偷偷av一区二区三区乱| 亚洲精品国产美女| 国产成人欧美在线观看| 久久人人爽人人| 国产精彩精品视频| 日韩乱码在线视频| 国产欧美日韩中文字幕| 亚洲一级黄色片| 精品国产一区二区三区久久狼5月| 一本色道久久综合狠狠躁篇的优点| 日韩午夜在线视频| 国产成人精品综合久久久| 久久天天躁狠狠躁夜夜爽蜜月| 日韩三级成人av网| 国产成人精品免高潮费视频| 成人欧美一区二区三区黑人| 日韩最新av在线| 一区二区欧美激情| 亚洲国产精品高清久久久| 亚洲天堂成人在线| 一区二区三区视频在线| 欧美激情第99页| 欧美丝袜一区二区| 精品动漫一区二区三区| 欧美成人精品三级在线观看| 久久久久久久97| 亚洲天堂免费视频| 国模gogo一区二区大胆私拍| 精品高清美女精品国产区| 岛国视频午夜一区免费在线观看| 日韩视频第一页| 久久精品国产亚洲精品| 国产欧美亚洲精品| 欧美激情中文网| 欧美成人剧情片在线观看| 啊v视频在线一区二区三区| 88国产精品欧美一区二区三区| 日韩在线观看免费av| 国模视频一区二区| 欧美日韩国产成人高清视频| 69视频在线播放| 一本色道久久88亚洲综合88| 成人在线观看视频网站| 日韩精品中文字| 国产精品亚洲综合天堂夜夜| 久久天天躁狠狠躁夜夜躁2014| 亚洲国产精品久久久久久| 亚洲第一福利视频| 国产精品亚洲片夜色在线| 国产精品日韩在线播放| 日本欧美国产在线| 韩国国内大量揄拍精品视频| 日韩美女在线观看| 国产欧美精品久久久| 中文字幕视频在线免费欧美日韩综合在线看| 国产精品久久9| 精品久久久久久久久中文字幕| 国产亚洲a∨片在线观看| 亚洲一区中文字幕在线观看| 国产一区红桃视频| 国产免费一区二区三区在线观看|