當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

Android WebView使用与JavaScript使用

發(fā)布時(shí)間：2023/11/27 生活经验 33 豆豆

生活随笔收集整理的這篇文章主要介紹了 Android WebView使用与JavaScript使用小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

WebView基本使用

?　　WebView是View的一個(gè)子類，可以讓你在activity中顯示網(wǎng)頁。

　　可以在布局文件中寫入WebView：比如下面這個(gè)寫了一個(gè)填滿整個(gè)屏幕的WebView：　

<?xml version="1.0" encoding="utf-8"?>
<WebView  xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/webview"android:layout_width="fill_parent"android:layout_height="fill_parent"
/>

　　加載一個(gè)網(wǎng)頁，使用loadUrl()：

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.loadUrl(http://www.example.com);

　　注意要在manifest中加上訪問網(wǎng)絡(luò)的權(quán)限：

<manifest ... > <uses-permission android:name="android.permission.INTERNET" /> ... 
</manifest>

設(shè)置WebView要顯示的網(wǎng)頁

　　設(shè)置WevView要顯示的網(wǎng)頁方法有很多：

　　互聯(lián)網(wǎng)頁面直接用：　

myWebView.loadUrl(“http://www.google.com“);

　　本地文件用：

myWebView.loadUrl(“file:///android_asset/XX.html“);

　　本地文件存放在：assets文件中。

　　還可以直接載入html的字符串，如：

String htmlString = "<h1>Title</h1><p>This is HTML text<br /><i>Formatted in italics</i><br />Anothor Line</p>";
// 載入這個(gè)html頁面
myWebView.loadData(htmlString, "text/html", "utf-8");

在WebView中使用JavaScript

　　如果你想要載入的頁面中用了JavaScript，你必須為你的WebView使能JavaScript。

　　一旦使能之后，你也可以自己創(chuàng)建接口在你的應(yīng)用和JavaScript代碼間進(jìn)行交互。

使能JavaScript

　　可以通過getSettings()獲得WebSettings，然后用setJavaScriptEnabled()使能JavaScript：

WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);

　　WebSettings中提供了很多有用的設(shè)置。

處理頁面瀏覽

　　當(dāng)用戶點(diǎn)擊了你的WebView中的一個(gè)鏈接，默認(rèn)的行為是Android啟動(dòng)一個(gè)處理URL的應(yīng)用，通常，默認(rèn)的瀏覽器打開并下載目標(biāo)URL。

　　但是，你可以在你的WebView中覆蓋這一行為，使得連接仍在你的WebView中打開。

　　之后，根據(jù)在WebView中維護(hù)的網(wǎng)頁瀏覽歷史，你可以允許用戶向前或向后瀏覽他們的網(wǎng)頁。

在WebView中打開所有鏈接

　　要打開用戶點(diǎn)擊的鏈接，只需要用setWebViewClient()方法向你的WebView提供一個(gè)WebViewClient?比如：

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new WebViewClient());

　　此時(shí)就OK了，就可以在你的WebView中打開鏈接了。

關(guān)于打開鏈接位置的更多控制

　　如果你對(duì)在哪里打開鏈接需要更多的控制，你可以創(chuàng)建自己的類，繼承?WebViewClient，然后覆寫shouldOverrideUrlLoading()?方法。

　　比如下面這個(gè)：

    private class MyWebViewClient extends WebViewClient{@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url){

　　　　　　　if(Uri.parse(url).getHost().equals(www.example.com))
 { // This is my web site, so do not override; let my WebView load // the page return false; } // Otherwise, the link is not for a page on my site, so launch // another Activity that handles URLs Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); startActivity(intent); return true; } }

　　將特定的鏈接用自己的WebView打開，其他鏈接用瀏覽器（intent啟動(dòng)了默認(rèn)的處理URL的Activity）。

　　定義完之后把這個(gè)類的對(duì)象傳入setWebViewClient()方法即可。　

WebView myWebView = (WebView) findViewById(R.id.webview);
myWebView.setWebViewClient(new MyWebViewClient());

　　實(shí)踐驗(yàn)證：在直接設(shè)置setWebViewClient(new WebViewClient());時(shí)驗(yàn)證正確，即所有鏈接都是在WebView中打開。

　　在設(shè)置為自定義的WebViewClient子類對(duì)象時(shí)，發(fā)現(xiàn)鏈接仍然都是從默認(rèn)瀏覽器中打開。

瀏覽網(wǎng)頁歷史回退

　　當(dāng)你的WebView覆寫了URL載入的行為，它會(huì)自動(dòng)地對(duì)訪問過的網(wǎng)頁積累一個(gè)歷史，你可以利用?goBack()?和?goForward()方法在這個(gè)歷史中前進(jìn)或后退。

　　比如說使用后退鍵進(jìn)行網(wǎng)頁后退：

    /*** 按鍵響應(yīng)，在WebView中查看網(wǎng)頁時(shí)，按返回鍵的時(shí)候按瀏覽歷史退回,如果不做此項(xiàng)處理則整個(gè)WebView返回退出*/@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event){// Check if the key event was the Back button and if there's historyif ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()){// 返回鍵退回myWebView.goBack();return true;}// If it wasn't the Back key or there's no web page history, bubble up// to the default// system behavior (probably exit the activity)return super.onKeyDown(keyCode, event);}

　　canGoBack()?方法在網(wǎng)頁可以后退時(shí)返回true。

　　類似的，canGoForward()方法可以檢查是否有可以前進(jìn)的歷史記錄。

　　如果你不執(zhí)行這種檢查，一旦?goBack()?和?goForward()方法到達(dá)歷史記錄頂端，它們將什么也不做。

　　如果不加這種設(shè)置，在用戶按下Back鍵時(shí)，如果是WebView顯示網(wǎng)頁，則會(huì)將WebView作為整體返回。

程序?qū)嵗?/h2>

　　附上完整的程序：

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.net.Uri;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;@SuppressLint("SetJavaScriptEnabled")
public class WebActivity extends Activity
{private WebView myWebView = null;@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_web);// 打開網(wǎng)頁myWebView = (WebView) findViewById(R.id.webview);//// myWebView.loadUrl("http://www.cnblogs.com/mengdd/");// 博客鏈接myWebView.loadUrl("http://www.baidu.com/");// 百度鏈接// JavaScript使能(如果要加載的頁面中有JS代碼，則必須使能JS)WebSettings webSettings = myWebView.getSettings();webSettings.setJavaScriptEnabled(true);// 在WebView中打開鏈接（默認(rèn)行為是使用瀏覽器，設(shè)置此項(xiàng)后都用WebView打開）// myWebView.setWebViewClient(new WebViewClient());// 這樣設(shè)置后所有的鏈接都會(huì)在當(dāng)前WebView中打開// 更強(qiáng)的打開鏈接控制：自己覆寫一個(gè)WebViewClient類：除了指定鏈接從WebView打開，其他的鏈接默認(rèn)打開myWebView.setWebViewClient(new MyWebViewClient());}@Overridepublic boolean onCreateOptionsMenu(Menu menu){getMenuInflater().inflate(R.menu.activity_web, menu);return true;}/*** 自定義的WebViewClient類，將特殊鏈接從WebView打開，其他鏈接仍然用默認(rèn)瀏覽器打開* * @author 1* */private class MyWebViewClient extends WebViewClient{@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url){if (Uri.parse(url).getHost().equals("http://www.cnblogs.com/mengdd/archive/2013/02/27/2935811.html")|| Uri.parse(url).getHost().equals("http://music.baidu.com/")){// This is my web site, so do not override; let my WebView load// the page// 這是官網(wǎng)上的例子，但是我點(diǎn)擊特定鏈接的時(shí)候仍然是用瀏覽器而不是用自己的WebView打開，加上下面這句view.loadUrl(url)仍然是用瀏覽器，無解，不知道哪里出了問題// view.loadUrl(url);return false;}// Otherwise, the link is not for a page on my site, so launch// another Activity that handles URLsIntent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));startActivity(intent);return true;}}/*** 按鍵響應(yīng)，在WebView中查看網(wǎng)頁時(shí)，按返回鍵的時(shí)候按瀏覽歷史退回,如果不做此項(xiàng)處理則整個(gè)WebView返回退出*/@Overridepublic boolean onKeyDown(int keyCode, KeyEvent event){// Check if the key event was the Back button and if there's historyif ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()){// 返回鍵退回myWebView.goBack();return true;}// If it wasn't the Back key or there's no web page history, bubble up// to the default// system behavior (probably exit the activity)return super.onKeyDown(keyCode, event);}
}

綁定JavaScript與Android代碼

　　當(dāng)你為你的Android應(yīng)用中的WebView專門開發(fā)一個(gè)網(wǎng)頁應(yīng)用時(shí)，你可以創(chuàng)建你的JavaScript代碼和你的客戶端的Android代碼之間的接口。

　　比如，你可以用JavaScript代碼調(diào)用Android代碼中的方法，來展現(xiàn)一個(gè)對(duì)話框之類，而不是使用alert()方法（JS中的對(duì)話框方法）。

　　在JS和Android代碼間綁定一個(gè)新的接口，需要調(diào)用?addJavascriptInterface()方法。

　　方法參數(shù)傳入一個(gè)Java對(duì)象實(shí)例和一個(gè)字符串，該字符串是一個(gè)名字（interface name，注意此接口不是通常所說的那個(gè)用來實(shí)現(xiàn)的接口，而是傳入的這個(gè)對(duì)象在JS中的別名），在JS代碼中用此名字調(diào)用該Java對(duì)象的方法。

　　注意這個(gè)方法可以讓JS代碼控制宿主程序，這是一個(gè)非常有力的特性，但是同時(shí)也存在一些安全問題，因?yàn)檫M(jìn)一步JS代碼可以通過反射訪問到注入對(duì)象的公有域。攻擊者可能會(huì)在HTML和JavaScript中包含了有威脅性的代碼。

　　所以Android 4.1，API 17，也就是JELLY_BEAN?開始，只有被JavascriptInterface?注解標(biāo)識(shí)的公有方法可以被JS代碼訪問。

　　另外，因?yàn)镴S代碼和Java對(duì)象在這個(gè)WebView所私有的后臺(tái)線程交互，所以還需要注意線程安全性問題。

　　注意，與JS代碼綁定的的這個(gè)Java對(duì)象運(yùn)行在另一個(gè)線程中，與創(chuàng)建它的線程不是一個(gè)線程。

　　注意，這個(gè)Java對(duì)象的域是不可訪問的。

綁定JavaScript與Android代碼的例子

　　比如可以定義這么一個(gè)類：

    /*** 自定義的Android代碼和JavaScript代碼之間的橋梁類* * @author 1* */public class WebAppInterface{Context mContext;/** Instantiate the interface and set the context */WebAppInterface(Context c){mContext = c;}/** Show a toast from the web page */// 如果target 大于等于API 17，則需要加上如下注解// @JavascriptInterfacepublic void showToast(String toast){// Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show();}}

　　然后將這個(gè)類和你的WebView中的JS代碼綁定：

WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");

　　給這個(gè)對(duì)象起的別名叫“Android”。

　　這個(gè)就創(chuàng)立了一個(gè)接口名，叫“Android”，運(yùn)行在WebView中的JS代碼可以通過這個(gè)名字調(diào)用WebAppInterface類中的showToast()方法：

<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" /><script type="text/javascript">function showAndroidToast(toast) {Android.showToast(toast);}
</script>

?

特別注意：需要設(shè)置chrome handler

　　這個(gè)問題讓我納悶了好久，因?yàn)殚_始的時(shí)候我寫的程序，JS代碼中的按鈕會(huì)出現(xiàn)在WebView中，但是點(diǎn)擊下去后，不會(huì)彈出相應(yīng)的對(duì)話框之類。

　　也就是說JS代碼調(diào)用自己也沒有執(zhí)行？

　　同樣的代碼在別的地方執(zhí)行可以正常彈出啊。所以我還提問來著：http://q.cnblogs.com/q/47060/

　　后來找了半天原因，才發(fā)現(xiàn)兩個(gè)問題：

　　1.網(wǎng)頁按鈕按下后不出現(xiàn)JS對(duì)話框是因?yàn)闆]有設(shè)置chrome handler，需要設(shè)置如下：　

        // 如果不設(shè)置這個(gè)，JS代碼中的按鈕會(huì)顯示，但是按下去卻不彈出對(duì)話框// Sets the chrome handler. This is an implementation of WebChromeClient// for use in handling JavaScript dialogs, favicons, titles, and the// progress. This will replace the current handler.myWebView.setWebChromeClient(new WebChromeClient(){@Overridepublic boolean onJsAlert(WebView view, String url, String message,JsResult result){// TODO Auto-generated method stubreturn super.onJsAlert(view, url, message, result);}});

　　2.調(diào)用Android代碼的那個(gè)按鈕也沒有出現(xiàn)Toast是因?yàn)槲野褎e名寫錯(cuò)了（大小寫沒有注意）。（這個(gè)錯(cuò)誤可以忽略，但是大家也要引以為戒。。Orz。。。）

Android調(diào)用JavaScript代碼

?　　這個(gè)還比較簡(jiǎn)單，需要調(diào)用的時(shí)候只需要一行代碼：　　

myWebView.loadUrl("javascript:myFunction()");

　　其中myFunction()是JS函數(shù)。

　　這里要補(bǔ)充一下，如果JavaScript函數(shù)是帶參數(shù)的，那么調(diào)用時(shí)要特別注意。

　　比如下面這個(gè)JS函數(shù)，在原來內(nèi)容上加入一行：

    function writeLine(string){console.log("Write a new Line");//調(diào)試信息document.getElementById("content").innerHTML += string + "<br />";//在content標(biāo)簽段落加入新行}

　　注：其中content是自定義的標(biāo)簽，html中有一個(gè)段落是：

    <p id="content"></p>

　　那么在Android代碼中調(diào)用這個(gè)writeLine()函數(shù)時(shí)，需要傳入一個(gè)字符串參數(shù)，比如，想要傳入一個(gè)叫name的String：

myWebView.loadUrl("javascript:writeLine('"+name+"')");//JS代碼要是帶參數(shù)

　　還有就是要注意雙引號(hào)中的函數(shù)名一定不要寫錯(cuò)。
?

程序?qū)嵗?/h2>

　　做了一個(gè)程序：

　　界面中包含一個(gè)TextView，旁邊一個(gè)Button，下面整個(gè)是一個(gè)WebView。

　　在WebView中載入了一個(gè)本地html文件，本地文件存放在assets文件夾中。

　　網(wǎng)頁中前四個(gè)按鈕調(diào)用的是JavaScript函數(shù)，顯示各種對(duì)話框。

　　SayHello按鈕調(diào)用Android代碼中的一個(gè)方法，顯示一個(gè)Toast，如圖中所示。

　　為了證明Android也可以調(diào)用JS代碼，最上方的Android Button按下后和“點(diǎn)擊這里”那個(gè)按鈕的效果一致，都是出現(xiàn)JS的對(duì)話框。

Activity代碼：

package com.example.hellowebjs;import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;
import android.widget.Button;
import android.widget.Toast;public class WebJSActivity extends Activity
{private WebView myWebView = null;private Button myButton = null;@SuppressLint("SetJavaScriptEnabled")@Overridepublic void onCreate(Bundle savedInstanceState){super.onCreate(savedInstanceState);setContentView(R.layout.activity_web_js);myWebView = (WebView) findViewById(R.id.myWebView);// 得到設(shè)置屬性的對(duì)象WebSettings webSettings = myWebView.getSettings();// 使能JavaScriptwebSettings.setJavaScriptEnabled(true);// 支持中文，否則頁面中中文顯示亂碼webSettings.setDefaultTextEncodingName("GBK");// 限制在WebView中打開網(wǎng)頁，而不用默認(rèn)瀏覽器myWebView.setWebViewClient(new WebViewClient());// 如果不設(shè)置這個(gè)，JS代碼中的按鈕會(huì)顯示，但是按下去卻不彈出對(duì)話框// Sets the chrome handler. This is an implementation of WebChromeClient// for use in handling JavaScript dialogs, favicons, titles, and the// progress. This will replace the current handler.myWebView.setWebChromeClient(new WebChromeClient(){@Overridepublic boolean onJsAlert(WebView view, String url, String message,JsResult result){// TODO Auto-generated method stubreturn super.onJsAlert(view, url, message, result);}});// 用JavaScript調(diào)用Android函數(shù)：// 先建立橋梁類，將要調(diào)用的Android代碼寫入橋梁類的public函數(shù)// 綁定橋梁類和WebView中運(yùn)行的JavaScript代碼// 將一個(gè)對(duì)象起一個(gè)別名傳入，在JS代碼中用這個(gè)別名代替這個(gè)對(duì)象，可以調(diào)用這個(gè)對(duì)象的一些方法myWebView.addJavascriptInterface(new WebAppInterface(this),"myInterfaceName");// 載入頁面：本地html資源文件myWebView.loadUrl("file:///android_asset/sample.html");// 這里用一個(gè)Android按鈕按下后調(diào)用JS中的代碼myButton = (Button) findViewById(R.id.button1);myButton.setOnClickListener(new View.OnClickListener(){@Overridepublic void onClick(View v){// 用Android代碼調(diào)用JavaScript函數(shù)：myWebView.loadUrl("javascript:myFunction()");// 這里實(shí)現(xiàn)的效果和在網(wǎng)頁中點(diǎn)擊第一個(gè)按鈕的效果一致}});}/*** 自定義的Android代碼和JavaScript代碼之間的橋梁類* * @author 1* */public class WebAppInterface{Context mContext;/** Instantiate the interface and set the context */WebAppInterface(Context c){mContext = c;}/** Show a toast from the web page */// 如果target 大于等于API 17，則需要加上如下注解// @JavascriptInterfacepublic void showToast(String toast){// Toast.makeText(mContext, toast, Toast.LENGTH_SHORT).show();Toast.makeText(mContext, toast, Toast.LENGTH_LONG).show();}}}

　　HTML文件：

<html>
<head>
<h1>
This is a HTML Page
</h1>
<!-- JavaScript腳本，主要包括了按鈕要執(zhí)行的函數(shù)，顯示對(duì)話框等 -->
<script type="text/javascript">//JavaScript方法，彈出對(duì)話框顯示信息function myFunction(){alert("Hello World!");}function onAlert(){console.log("onAlert method");//顯示調(diào)試信息alert("This is a alert sample from html");}function onConfirm(){console.log("onConfirm method");var b = confirm("are you sure to login?");alert("your choice is " + b);}function onPrompt(){console.log("onPrompt method");var b = prompt("please input your password", "aaa");alert("your input is " + b);}//調(diào)用綁定的Java對(duì)象的方法，即調(diào)用Android代碼顯示對(duì)話框function showAndroidToast(toast){console.log("showAndroidToast method");myInterfaceName.showToast(toast);//注意此處的myInterfaceName要和外部傳入的名字一致，大小寫正確}
</script>
</head>
<body><p><!-- 前四個(gè)按鈕調(diào)用JS函數(shù) -->JavaScript函數(shù)調(diào)用 <br /><button οnclick="myFunction()">點(diǎn)擊這里!</button><br /> <input type="button" value="alert" οnclick="onAlert()" /> <br /><input type="button" value="confirm" οnclick="onConfirm()" /> <br /><input type="button" value="prompt" οnclick="onPrompt()" /><br /><!-- 上面用了兩種定義按鈕的方式，效果一樣的 --></p><p><!-- 這個(gè)Say hello 按鈕調(diào)用Android代碼中的方法 -->用JavaScript按鈕調(diào)用Android代碼 <br /> <input type="button"value="Say hello" onClick="showAndroidToast('Hello Android!')" /></p><a href="http://www.google.com" />Google</a></body>
</html>

　　Activity布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/myRelativeLayout"android:layout_width="match_parent"android:layout_height="match_parent" ><TextViewandroid:id="@+id/textView1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="@dimen/padding_medium"android:text="@string/hello_world"tools:context=".WebJSActivity" /><Buttonandroid:id="@+id/button1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toRightOf="@id/textView1"android:text="@string/btn1_text" /><WebViewandroid:id="@+id/myWebView"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_below="@id/textView1" /></RelativeLayout>

轉(zhuǎn)載于:https://www.cnblogs.com/chenxibobo/p/6136664.html

總結(jié)

以上是生活随笔為你收集整理的Android WebView使用与JavaScript使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：周易中好听的名字
下一篇：利用java多线程向MongoDB中批量