麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

首頁 > 系統 > 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和視覺效果上就會節省很多時間,重復發明輪子沒有任何意義。

發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 九九午夜 | 一本色道久久99精品综合蜜臀 | 色悠悠久久久久 | 日韩精品二区 | 久草在线视频首页 | 一级做a爰片性色毛片2021 | 国产精品视频免费在线观看 | 久久在线免费视频 | 中文字幕 在线观看 | 国产成视频在线观看 | 欧美成人午夜影院 | 午夜视频在线观 | 免费永久看羞羞片网站入口 | 国产亚洲精品久久久久久久久 | 久久露脸国语精品国产91 | 少妇激情视频 | 一区二区三区在线观看视频 | 欧美亚洲国产一区二区三区 | av在线免费看网址 | 国产精品一区在线观看 | 久久精品资源 | 最新毛片在线观看 | 91av大片 | 亚洲综合中文 | 欧美 日韩 国产 成人 | 美女视频黄a视频免费全过程 | 91网视频在线观看 | 精品国产91久久久 | 免费国产羞羞网站视频 | 国产乱色精品成人免费视频 | 美国黄色毛片女人性生活片 | 午夜神马电影网 | 久久人人爽人人爽人人片av高清 | 日本成人在线免费 | 一级黄色免费 | 美女性感毛片 | 毛片免费网 | 国产91丝袜在线熟 | 日韩午夜片 | 欧美精品一区二区三区在线 | 精品影视一区二区 |