WebView 加載網頁和java 與js交互


[mw_shl_code=java,true]WebView是一個可以顯示網頁的控件。
需求:
通過WebView加載assets下的html文件。
實現頁面的縮放。
向menu鍵添加:前進、后退和刷新,實現對網頁的操作
點擊網頁中的鏈接,仍然使用本WebView瀏覽器,而非調用系統的瀏覽器
網頁中有button,點擊button,調用android的Toast
點擊WebView隱藏地址欄和button,點擊menu鍵顯示地址欄和button。
WebView加載網頁的方式
WebView webview = (WebView)findViewById(R.id.webview);
webview.loadUrl(" http://192.168.1.33:8080/  ");----訪問本地服務器(如tomcat)的網頁。
webview.loadUrl("http://www.baidu.com");------訪問網絡的的網頁
webview.loadUrl(" file:///android_asset/test.html  ");---------訪問本工程下assets下的html文件。。。。注意: file:///android_asset/是固定寫法。
添加權限:“android.permission.INTERNET”
WebView的常用方法(介紹的是方法的作用,沒有寫參數,具體的方法使用在下面的示例中)
webview.setWebChromeClient();該方法可以處理進度條對話框等。
webview.setOnTouchListener();WebView設置觸摸事件,比如我觸摸屏幕時,可以隱藏地址欄等操作。
webview.setWebViewClient(WebViewClient client);設置該方法后,一旦你點擊網頁中的鏈接,不會去調用系統的瀏覽器,而是仍然使用當前的WebView瀏覽器。實現參數的匿名內部類
覆蓋匿名內部類的方法 shouldOverrideUrlLoading(WebView view, String url),在該方法view.load(url);
onPageStarted():在網頁加載前可以做的一些操作,比如加載網頁需要一些時間,那么我們就讓這段時間顯示進度條或提示一句話"正在加載中"
onPageFinished():在網頁加載后可以做的一些操作,比如關閉進度條。
WebSettings settings = webview.getSettings():就是WebView瀏覽器的一些設置。
設置網頁的縮放:settings.setBuiltInZoomControls(true);也就是放大和縮小網頁。
settings.setJavaScriptEnabled(true):可以讓android和html中的javascript進行交互。
返回鍵:當我們打開多個Activity,一旦點擊返回鍵,就直接退出WebView瀏覽器了。然而這不是我們想要的結果,我們想要的是一點擊返回鍵,我們退回上一個頁面。這時我哦們就需要重寫onKeyDown()方法。
------7,8,9三條選看,是關於menu鍵的內容,網頁的前進、后退和刷新-------
點擊menu鍵:我們添加幾個menu,實現網頁的前進 后退和刷新功能。onCreateOptionsMenu();
為menu的item添加點擊事件,實現前進,后退和刷新功能的具體實現方法。
點擊一次menu,執行一次的方法:onPrepareOptionMenu()
android與javascript的交互:(在javascript中調用android代碼)
背景:WebView加載了一個帶button的html,我想點擊該按鈕調用android的吐司。
html代碼:test.html的內容(html是非嚴謹的,因此如下直接復制就可以)
<button>call java</button>    
<script type="text/javascript">
        function demoTest(){
                window.demo.demoTest("hello android i am javaScript");        
        }
</script>
android內必須添加的代碼:
//可以讓android與javascript進行交互
        settings.setJavaScriptEnabled(true);
        //讓javascript調用java代碼時,需要添加如下android代碼
        webview.addJavascriptInterface(new Object(){
            public void demoTest(String msg){
                showToast(msg);
            }
        }, "demo");
public void showToast(String str){//彈出吐司的方法
        Toast.makeText(MainActivity.this, str, 0).show();
    }
流程概述:
點擊按鈕:  執行:button的點擊事件onclick="demoTest();"
點擊事件demoTest();---->調用javascript代碼的方法,執行window.demo.demoTest("hello android i am javaScript")
然后調用:android的"demo"接口的方法:public void demoTest(String msg){
                showToast(msg);
            }
showToast(msg),調用彈出吐司方法
這就是點擊button調用android代碼
關於android與javascript的直白理解:通過 settings.setJavaScriptEnabled(true);  方法設置android和javascript可以交互,在android中通過 webview.addJavascriptInterface(參數一:參數二) 方法 定義一個接口名稱(參數二),通過該接口名稱可以在javascript中調用該接口代表的對象的方法(參數一)。更啰嗦的說就是:參數一:new Object(){
            public void demoTest(String msg){
                showToast(msg);
            }定義了一個匿名內部類,該匿名內部類中定義了一個方法demoTest(String msg)。參數二:為該匿名內部類其的名字,通過該名字可以調用匿名內部類中定義的方法,並且必須是在javasrript中調用:調用方式:window.參數二.參數一方法名(參數)
在java中調用javascript代碼:
首先需要在html中有script代碼塊,並且在script中定義了方法。
我們需要做的就在java中調用javascript中的方法
如何調用:WebView.loadUrl("javascript:方法名");

源碼:test.html-------------該文件一定要放到assets下
       *****************************
test.html
<button>call java</button>
        <script type="text/javascript">
                function demoTest(){
                        window.demo.demoTest("hello android i am javaScript");        
                }
        </script>

布局文件:********************************************************8
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/ll_tool"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" >
        <!-- 地址欄 -->
        <EditText
            android:id="@+id/et"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="http://192.168.1.111" />
        <!-- 點擊搜索 ,用WebView加載網頁 -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="search"
            android:text="search" />
        <!-- java代碼調用javascript的代碼 -->
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:onClick="calljs"
            android:text="calljs" />
    </LinearLayout>
    <WebView
        android:id="@+id/webview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1" />
</LinearLayout>



android代碼:-----------------------********************************************
package com.example.a1302_webview;

import android.app.Activity;
import android.app.ProgressDialog;
import android.graphics.Bitmap;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.MenuItem;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

        private WebView webview;
        private EditText et;
        private ProgressDialog pd;
        private LinearLayout ll_tool;
        @Override
        protected void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_main);
                
                webview = (WebView) findViewById(R.id.webview);
                et = (EditText) findViewById(R.id.et);
                pd = new ProgressDialog(this);//進度條
                ll_tool = (LinearLayout) findViewById(R.id.ll_tool);
                
                //處理進度條、js對話框等時使用
                webview.setWebChromeClient(new WebChromeClient(){
                        @Override
                        public void onProgressChanged(WebView view, int newProgress) {
                                // TODO Auto-generated method stub
                                super.onProgressChanged(view, newProgress);
                                pd.setMessage("正在快速加載"+newProgress+"%");
                        }
                });
                
                //為WebView設置觸摸事件,觸摸屏幕時 因此地址欄和按鈕
                webview.setOnTouchListener(new OnTouchListener() {
                        
                        @Override
                        public boolean onTouch(View v, MotionEvent event) {
                                // TODO Auto-generated method stub
                                if(ll_tool.isShown()){
                                        ll_tool.setVisibility(View.GONE);
                                }
                                return false;
                        }
                });
                
                //防止調用系統瀏覽器
                /*
                 * 用setWebViewClient方法設置webView客戶端,用於接收webView發出的請求,通常的用法是覆蓋其中的方法,
                 * 自己處理相關的事件,如:shouldOverrideUrlLoading(WebView view, String url);在自身webView中打開新的超鏈接。
                 */
                webview.setWebViewClient(new WebViewClient(){
                        //設置頁面加載前的事件
                        @Override
                        public void onPageStarted(WebView view, String url, Bitmap favicon) {
                                // TODO Auto-generated method stub
                                super.onPageStarted(view, url, favicon);
                                pd.show();
                        }
                        
                        //設置頁面加載后的事件
                        @Override
                        public void onPageFinished(WebView view, String url) {
                                // TODO Auto-generated method stub
                                super.onPageFinished(view, url);
//                                pd.cancel();
                                pd.dismiss();
                        }
                });
                //給 屏幕添加縮放
                /*
                 當webView對象構造生成時,便會生成一個默認的webset對象,里面包含了默認的設置,
                 可以用webSet = webView.getSettings();取得webset的引用,並對其進行修改。
                 */
                WebSettings settings = webview.getSettings();
                //該行代碼寫不寫都可以,因為默認的是true,表示是否支持縮放
                settings.setSupportZoom(true);
                //縮放的設置
                settings.setBuiltInZoomControls(true);
                
                //即時縮放,設置初始比例
//                webview.setInitialScale(50);
//                //
//                webview.zoomIn();
//                webview.zoomOut();
                
                //可以讓android與javascript進行交互
                settings.setJavaScriptEnabled(true);
                //讓javascript調用java代碼時,需要添加如下android代碼
                webview.addJavascriptInterface(new Object(){
                        public void demoTest(String msg){
                                showToast(msg);
                        }
                }, "demo");
        }

        public void showToast(String str){
                Toast.makeText(MainActivity.this, str, 0).show();
        }
        
        //在menu菜單增加幾個選項
        @Override
        public boolean onCreateOptionsMenu(Menu menu) {
                // Inflate the menu; this adds items to the action bar if it is present.
                getMenuInflater().inflate(R.menu.main, menu);
                //參數三:order號碼,可以通過getOrder標示該選項
                menu.addSubMenu(0,0,0,"刷新");//0刷新
                menu.addSubMenu(0,0,1,"前進");//1前進
                menu.addSubMenu(0,0,2,"后退");//2后退
                return true;
        }

        //為menu裁斷添加item選中事件
        @Override
        public boolean onOptionsItemSelected(MenuItem item) {
                // TODO Auto-generated method stub
                switch (item.getOrder()) {//menu.addSubMenu(0,0,0,"刷新");獲得的是第三個參數order
                case 0:
                        webview.reload();//刷新
                        break;
                case 1:
                        if(webview.canGoForward()){
                                webview.goForward();//前進
                        }
                        break;
                case 2:
                        if(webview.canGoBack()){
                                webview.goBack();//后退
                        }
                        break;

                default:
                        break;
                }
                return super.onOptionsItemSelected(item);
        }
        
        //點擊menu時顯示地址欄和按鈕,點擊menu鍵一次執行一次該方法
        @Override
        public boolean onPrepareOptionsMenu(Menu menu) {
                // 點擊menu鍵顯示地址欄和按鈕
                ll_tool.setVisibility(View.VISIBLE);
                return super.onPrepareOptionsMenu(menu);
        }
        
        //點擊事件,搜尋網址
        public void search(View v){
                /*
                 * loadUrl()方法webView加載頁面,可以是url = "http://192.168.1.33:8080/" 
                 * 或 本地頁面"file:///android_asset/index.html" webView1.loadUrl(url);
                 */
                String url = "file:///android_asset/test.html" ;
//                String url = et.getText().toString().trim();
                webview.loadUrl(url);
        }
        
        //點擊返回鍵,不退出應用,而是回到上一個頁面
        @Override
        public boolean onKeyDown(int keyCode, KeyEvent event) {
                // TODO Auto-generated method stub
                if(keyCode==KeyEvent.KEYCODE_BACK&&webview.canGoBack()){
                        webview.goBack();
                        return true;
                }else{
                        return super.onKeyDown(keyCode, event);
                }
        }

    //在java中調用javascript中的方法
    //調用方式:webview.loadUrl("javascript:方法名");
    public void calljs(View v){
        webview.loadUrl("javascript:demoTest()");
    }
}
[/mw_shl_code]
<ignore_js_op>

A1302_WebView.zip


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM