Android webview加載三種不同位置html的方式

天在調試android webview加載本地html文件時，對三種不同位置html的加載方式總結如下：

1.//打開本包內asset目錄下的index.html文件

wView.loadUrl(" file:///android_asset/index.html ");

2.//打開本地sd卡內的index.html文件

wView.loadUrl("content://com.android.htmlfileprovider/sdcard/index.html");

3.//打開指定URL的html文件

wView.loadUrl(" http://m.oschina.net");

今天就分享這一個知識點，祝大家好運！

言

現在很多App里都內置了Web網頁（Hybrid App），比如說很多電商平臺，淘寶、京東、聚劃算等等，如下圖

上述功能是由Android的WebView實現的，其中涉及到Android客戶端與Web網頁交互的實現
今天我將全面介紹Android通過WebView與JS交互的全面方式

閱讀本文前請先閱讀：Android開發：最全面、最易懂的Webview詳解

1. 交互方式總結

Android與JS通過WebView互相調用方法，實際上是：

Android去調用JS的代碼
JS去調用Android的代碼

二者溝通的橋梁是WebView

對于Android調用JS代碼的方法有2種：

1. 通過WebView的loadUrl（）

2. 通過WebView的evaluateJavascript（）

對于JS調用Android代碼的方法有3種：

1. 通過WebView的addJavascriptInterface（）進行對象映射

2. 通過 WebViewClient 的shouldOverrideUrlLoading ()方法回調攔截 url

3. 通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調攔截JS對話框alert()、confirm()、prompt（）消息

2. 具體分析

2.1 Android通過WebView調用 JS 代碼

對于Android調用JS代碼的方法有2種：

1. 通過WebView的loadUrl（）

2. 通過WebView的evaluateJavascript（）

方式1：通過WebView的loadUrl（）

實例介紹：點擊Android按鈕，即調用WebView JS（文本名為javascript）中callJS（）
具體使用：

步驟1：將需要調用的JS代碼以.html格式放到src/main/assets文件夾里

為了方便展示，本文是采用Andorid調用本地JS代碼說明；
實際情況時，Android更多的是調用遠程JS代碼，即將加載的JS代碼路徑改成url即可

需要加載JS代碼：javascript.html

// 文本名：javascript

<!DOCTYPE html>

<html>

<head>

<title>Carson_Ho</title>

// JS代碼

// Android需要調用的方法

function callJS(){

alert("Android調用了JS的callJS方法");

}

</script>

</head>

</html>

步驟2：在Android里通過WebView設置調用JS代碼

Android代碼：MainActivity.java

注釋已經非常清楚

public class MainActivity extends AppCompatActivity {

WebView mWebView;

Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView =(WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 設置與Js交互的權限

webSettings.setJavaScriptEnabled(true);

// 設置允許JS彈窗

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 先載入JS代碼

// 格式規定為:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

button = (Button) findViewById(R.id.button);

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// 通過Handler發送消息

mWebView.post(new Runnable() {

@Override

public void run() {

// 注意調用的JS方法名要對應上

// 調用javascript的callJS()方法

mWebView.loadUrl("javascript：callJS()");

}

});

}

});

// 由于設置了彈窗檢驗調用結果,所以需要支持js對話框

// webview只是載體，內容的渲染需要使用webviewChromClient類去實現

// 通過設置WebChromeClient對象處理JavaScript的對話框

//設置響應js 的Alert()函數

mWebView.setWebChromeClient(new WebChromeClient() {

@Override

public boolean onJsAlert(WebView view, String url, String message, final JsResult result) {

AlertDialog.Builder b = new AlertDialog.Builder(MainActivity.this);

b.setTitle("Alert");

b.setMessage(message);

b.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {

@Override

public void onClick(DialogInterface dialog, int which) {

result.confirm();

}

});

b.setCancelable(false);

b.create().show();

return true;

}

});

}

特別注意：JS代碼調用一定要在 onPageFinished（）回調之后才能調用，否則不會調用。

onPageFinished()屬于WebViewClient類的方法，主要在頁面加載結束時調用

方式2：通過WebView的evaluateJavascript（）

優點：該方法比第一種方法效率更高、使用更簡潔。
因為該方法的執行不會使頁面刷新，而第一種方法（loadUrl ）的執行則會。
Android 4.4 后才可使用
具體使用

// 只需要將第一種方法的loadUrl()換成下面該方法即可

mWebView.evaluateJavascript（"javascript：callJS()", new ValueCallback<String>() {

@Override

public void onReceiveValue(String value) {

//此處為 js 返回的結果

}

});

}

2.1.2 方法對比

2.1.3 使用建議

兩種方法混合使用，即Android 4.4以下使用方法1，Android 4.4以上方法2

// Android版本變量

final int version = Build.VERSION.SDK_INT;

// 因為該方法在 Android 4.4 版本才可使用，所以使用時需進行版本判斷

if (version < 18) {

mWebView.loadUrl("javascript：callJS()");

} else {

mWebView.evaluateJavascript（"javascript：callJS()", new ValueCallback<String>() {

@Override

public void onReceiveValue(String value) {

//此處為 js 返回的結果

}

});

}

2.2 JS通過WebView調用 Android 代碼

對于JS調用Android代碼的方法有3種：

1. 通過WebView的addJavascriptInterface（）進行對象映射

2. 通過 WebViewClient 的shouldOverrideUrlLoading ()方法回調攔截 url

3. 通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調攔截JS對話框alert()、confirm()、prompt（）消息

2.2.1 方法分析

方式1：通過 WebView的addJavascriptInterface（）進行對象映射

步驟1：定義一個與JS對象映射關系的Android類：AndroidtoJs

AndroidtoJs.java（注釋已經非常清楚）

// 繼承自Object類

public class AndroidtoJs extends Object {

// 定義JS需要調用的方法

// 被JS調用的方法必須加入@JavascriptInterface注解

@JavascriptInterface

public void hello(String msg) {

System.out.println("JS調用了Android的hello方法");

}

步驟2：將需要調用的JS代碼以.html格式放到src/main/assets文件夾里

需要加載JS代碼：javascript.html

<!DOCTYPE html>

<html>

<head>

<title>Carson</title>

function callAndroid(){

// 由于對象映射，所以調用test對象等于調用Android映射的對象

test.hello("js調用了android中的hello方法");

}

</script>

</head>

<body>

//點擊按鈕則調用callAndroid函數

</body>

</html>

步驟3：在Android里通過WebView設置Android類與JS代碼的映射

詳細請看注釋

public class MainActivity extends AppCompatActivity {

WebView mWebView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 設置與Js交互的權限

webSettings.setJavaScriptEnabled(true);

// 通過addJavascriptInterface()將Java對象映射到JS對象

//參數1：Javascript對象名

//參數2：Java對象名

mWebView.addJavascriptInterface(new AndroidtoJs(), "test");//AndroidtoJS類對象映射到js的test對象

// 加載JS代碼

// 格式規定為:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

特點

優點：使用簡單

僅將Android對象和JS對象映射即可

缺點：存在嚴重的漏洞問題，具體請看文章：你不知道的 Android WebView 使用漏洞

方式2：通過 WebViewClient 的方法shouldOverrideUrlLoading ()回調攔截 url

具體原理：

Android通過 WebViewClient 的回調方法shouldOverrideUrlLoading ()攔截 url
解析該 url 的協議
如果檢測到是預先約定好的協議，就調用相應方法

即JS需要調用Android的方法

具體使用：
步驟1：在JS約定所需要的Url協議
JS代碼：javascript.html

以.html格式放到src/main/assets文件夾里

<!DOCTYPE html>

<html>

<head>

<title>Carson_Ho</title>

function callAndroid(){

/*約定的url協議為：js://webview?arg1=111&arg2=222*/

document.location = "js://webview?arg1=111&arg2=222";

}

</script>

</head>

<body>

<button type="button" id="button1" onclick="callAndroid()">點擊調用Android代碼</button>

</body>

</html>

當該JS通過Android的mWebView.loadUrl("file:///android_asset/javascript.html")加載后，就會回調shouldOverrideUrlLoading （），接下來繼續看步驟2：

步驟2：在Android通過WebViewClient復寫shouldOverrideUrlLoading （）

MainActivity.java

public class MainActivity extends AppCompatActivity {

WebView mWebView;

// Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 設置與Js交互的權限

webSettings.setJavaScriptEnabled(true);

// 設置允許JS彈窗

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 步驟1：加載JS代碼

// 格式規定為:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

// 復寫WebViewClient類的shouldOverrideUrlLoading方法

mWebView.setWebViewClient(new WebViewClient() {

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

// 步驟2：根據協議的參數，判斷是否是所需要的url

// 一般根據scheme（協議格式） & authority（協議名）判斷（前兩個參數）

//假定傳入進來的 url = "js://webview?arg1=111&arg2=222"（同時也是約定好的需要攔截的）

Uri uri = Uri.parse(url);

// 如果url的協議 = 預先約定的 js 協議

// 就解析往下解析參數

if ( uri.getScheme().equals("js")) {

// 如果 authority = 預先約定協議里的 webview，即代表都符合約定的協議

// 所以攔截url,下面JS開始調用Android需要的方法

if (uri.getAuthority().equals("webview")) {

// 步驟3：

// 執行JS所需要調用的邏輯

System.out.println("js調用了Android的方法");

// 可以在協議上帶有參數并傳遞到Android上

HashMap<String, String> params = new HashMap<>();

Set<String> collection = uri.getQueryParameterNames();

}

return true;

}

return super.shouldOverrideUrlLoading(view, url);

}

);

}

特點

優點：不存在方式1的漏洞；
缺點：JS獲取Android方法的返回值復雜。

如果JS想要得到Android方法的返回值，只能通過 WebView 的 loadUrl （）去執行 JS 方法把返回值傳遞回去，相關的代碼如下：

// Android：MainActivity.java

mWebView.loadUrl("javascript：returnResult(" + result + ")");

// JS：javascript.html

function returnResult(result){

alert("result is" + result);

}

方式3：通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調攔截JS對話框alert()、confirm()、prompt（）消息

在JS中，有三個常用的對話框方法：

方式3的原理：Android通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調分別攔截JS對話框

（即上述三個方法），得到他們的消息內容，然后解析即可。

下面的例子將用攔截 JS的輸入框（即prompt（）方法）說明：

常用的攔截是：攔截 JS的輸入框（即prompt（）方法）
因為只有prompt（）可以返回任意類型的值，操作最全面方便、更加靈活；而alert（）對話框沒有返回值；confirm（）對話框只能返回兩種狀態（確定 / 取消）兩個值

步驟1：加載JS代碼，如下：

javascript.html

以.html格式放到src/main/assets文件夾里

<!DOCTYPE html>

<html>

<head>

<title>Carson_Ho</title>

function clickprompt(){

// 調用prompt（）

var result=prompt("js://demo?arg1=111&arg2=222");

alert("demo " + result);

}

</script>

</head>

<body>

<button type="button" id="button1" onclick="clickprompt()">點擊調用Android代碼</button>

</body>

</html>

當使用mWebView.loadUrl("file:///android_asset/javascript.html")加載了上述JS代碼后，就會觸發回調onJsPrompt（），具體如下：

如果是攔截警告框（即alert()），則觸發回調onJsAlert（）；
如果是攔截確認框（即confirm()），則觸發回調onJsConfirm（）；

步驟2：在Android通過WebChromeClient復寫onJsPrompt（）

public class MainActivity extends AppCompatActivity {

WebView mWebView;

// Button button;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();

// 設置與Js交互的權限

webSettings.setJavaScriptEnabled(true);

// 設置允許JS彈窗

webSettings.setJavaScriptCanOpenWindowsAutomatically(true);

// 先加載JS代碼

// 格式規定為:file:///android_asset/文件名.html

mWebView.loadUrl("file:///android_asset/javascript.html");

mWebView.setWebChromeClient(new WebChromeClient() {

// 攔截輸入框(原理同方式2)

// 參數message:代表promt（）的內容（不是url）

// 參數result:代表輸入框的返回值

@Override

public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

// 根據協議的參數，判斷是否是所需要的url(原理同方式2)

// 一般根據scheme（協議格式） & authority（協議名）判斷（前兩個參數）

//假定傳入進來的 url = "js://webview?arg1=111&arg2=222"（同時也是約定好的需要攔截的）

Uri uri = Uri.parse(message);

// 如果url的協議 = 預先約定的 js 協議

// 就解析往下解析參數

if ( uri.getScheme().equals("js")) {

// 如果 authority = 預先約定協議里的 webview，即代表都符合約定的協議

// 所以攔截url,下面JS開始調用Android需要的方法

if (uri.getAuthority().equals("webview")) {

// 執行JS所需要調用的邏輯

System.out.println("js調用了Android的方法");

// 可以在協議上帶有參數并傳遞到Android上

HashMap<String, String> params = new HashMap<>();

Set<String> collection = uri.getQueryParameterNames();

//參數result:代表消息框的返回值(輸入值)

result.confirm("js調用了Android的方法成功啦");

}

return true;

}

return super.onJsPrompt(view, url, message, defaultValue, result);

}

// 通過alert()和confirm()攔截的原理相同，此處不作過多講述

// 攔截JS的警告框

@Override

public boolean onJsAlert(WebView view, String url, String message, JsResult result) {

return super.onJsAlert(view, url, message, result);

}

// 攔截JS的確認框

@Override

public boolean onJsConfirm(WebView view, String url, String message, JsResult result) {

return super.onJsConfirm(view, url, message, result);

}

);

}

Demo地址
上述所有代碼均存放在：Carson_Ho的Github地址： WebView Demo

2.2.2 三種方式的對比 & 使用場景

3. 總結

本文主要對Android通過WebView與JS的交互方式進行了全面介紹

關于WebView的系列文章對你有所幫助
Android開發：最全面、最易懂的Webview詳解
Android：你不知道的 WebView 使用漏洞
手把手教你構建 Android WebView 的緩存機制 & 資源預加載方案
接下來我會繼續講解其他安卓開發的知識，有興趣可以繼續關注Carson_Ho的安卓開發筆記！！！！

請評論點贊！因為你們的贊同/鼓勵是我寫作的最大動力！

ebView 加載判斷和加載動畫的簡單實現

WebView 在加載網頁時候，在網絡不好的情況下，如果不做處理會出現一段時間的等待空白，用戶體驗差。所以有必要加上一個簡單的加載進度提示。本編簡單的運用了ProgressDialog 這個控件來實現。

下面是簡單的代碼片段

<span style="color:#ff6666;"><</span>?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v7.widget.Toolbar
android:background="@color/colorPrimaryDark"
android:popupTheme="@style/AppTheme.PopupOverlay"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="?attr/actionBarSize"
>
<ImageView
android:id="@+id/faq_activity_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/back"/>
<TextView
android:id="@+id/faq_activity_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:textColor="@color/white"
android:textSize="22sp"
android:text="常見問題"
/>
</android.support.v7.widget.Toolbar>
<WebView
android:id="@+id/faq_webview"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

下面貼上部分代碼
public class FAQActivity extends BaseActivity {
private final String TAG = FAQActivity.class.getName();
@BindView(R.id.activity_fap_back)
ImageView activityFapBack;
@BindView(R.id.activity_faq_webview)
WebView webView;
private String FAQ_BASE_URL = "";
/***
*
* @param savedInstanceState
*/
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_faq);
ButterKnife.bind(this);
init();
}
private void init() {
webView.loadUrl("你的請求地址");
WebSettings mWebSettings = webView.getSettings();
mWebSettings.setSupportZoom(true);
mWebSettings.setLoadWithOverviewMode(true);
mWebSettings.setUseWideViewPort(true);
mWebSettings.setDefaultTextEncodingName("GBK");//設置解碼格式
mWebSettings.setLoadsImagesAutomatically(true);
mWebSettings.setJavaScriptEnabled(true);//支持js 特效
//覆蓋WebView默認使用第三方或系統默認瀏覽器打開網頁的行為，使網頁用WebView打開
webView.setWebViewClient(new WebViewClient() {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
// TODO Auto-generated method stub
//返回值是true的時候控制去WebView打開，為false調用系統瀏覽器或第三方瀏覽器
view.loadUrl(url);
return true;
}
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
super.onPageStarted(view, url, favicon);
showProgress("頁面加載中");//開始加載動畫
}
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
removeProgress();//當加載結束時移除動畫
}
});
}
/**
* 點擊事件
*/
@OnClick(R.id.activity_fap_back)
public void onClick() {
Log.d(TAG, "onClick: ");
jumpToActivity(FAQActivity.this,MenuActivity.class);
}
/**
* 返回鍵的監聽事件
*
* @param keyCode
* @param event
* @return
*/
public boolean onKeyDown(int keyCode, KeyEvent event) {
if (keyCode == KeyEvent.KEYCODE_BACK) {
jumpToActivity(FAQActivity.this,MenuActivity.class);
}
return false;
}
}

需要注意的地方:ProgressDIalog 控件為了不寫重復代碼，我進行了簡單的封裝。下面是我簡單封裝的BaseActivity代碼

public class BaseActivity extends AppCompatActivity {
private final String TAG = BaseActivity.class.getName();
private Toast toast = null;
private ProgressDialog progressDialog;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
}
/**
* @param context 上下文對象
* @param start 其實activity
* @param target 目標activity
*/
public void jumpToActivity(Context context, Class start, Class target) {
Intent intent = new Intent(context, target);
//------用戶返回上一級activity
if (target == CarFindingActivity.class) {
intent.putExtra("activity", start);
}
context.startActivity(intent);
finish();
}
public void jumpToActivity(Context context, Class target) {
Intent intent = new Intent(context, target);
//------用戶返回上一級activity
context.startActivity(intent);
finish();
}
/**
* @param context
* @param text
*/
public void showToastLong(Context context, String text) {
if (toast == null) {
toast = Toast.makeText(context, text, Toast.LENGTH_LONG);
} else {
toast.setText(text);
}
toast.show();
}
public void showToastLong(String text) {
if (toast == null) {
toast = Toast.makeText(BaseActivity.this, text, Toast.LENGTH_LONG);
} else {
toast.setText(text);
}
toast.show();
}
/**
* @param context
* @param text
*/
public void showToastShort(Context context, String text) {
if (toast == null) {
toast = Toast.makeText(context, text, Toast.LENGTH_SHORT);
} else {
toast.setText(text);
}
toast.show();
}
public void showToastShort(String text) {
if (toast == null) {
toast = Toast.makeText(BaseActivity.this, text, Toast.LENGTH_SHORT);
} else {
toast.setText(text);
}
toast.show();
}
//-----顯示ProgressDialog
public void showProgress(String message) {
if (progressDialog == null) {
progressDialog = new ProgressDialog(BaseActivity.this, ProgressDialog.STYLE_SPINNER);
progressDialog.setCancelable(false);//設置點擊不消失
}
if (progressDialog.isShowing()) {
progressDialog.setMessage(message);
} else {
progressDialog.setMessage(message);
progressDialog.show();
}
}
//------取消ProgressDialog
public void removeProgress(){
if (progressDialog==null){
return;
}
if (progressDialog.isShowing()){
progressDialog.dismiss();
}
}
/**
*
*/
@Override
protected void onStart() {
super.onStart();
Log.d(TAG, "onStart: ");
}
@Override
protected void onResume() {
super.onResume();
Log.d(TAG, "onResume: ");
}
@Override
protected void onPause() {
super.onPause();
Log.d(TAG, "onPause: ");
}
@Override
protected void onStop() {
removeProgress();//讓progressdialog 消失
super.onStop();
Log.d(TAG, "onStop: ");
}
@Override
protected void onRestart() {
super.onRestart();
Log.d(TAG, "onRestart: ");
}
@Override
protected void onDestroy() {
super.onDestroy();
Log.d(TAG, "onDestroy: ");
}
}

然后繼承BaseActivtiy 直接調用里面

showProgress(String message)

顯示ProgressDialogremoveProgress()

移除ProgressDialog以上就這么多，如有錯誤或者不嚴謹的地方懇請指正,謝謝

在線咨詢

上一篇：零基礎網頁設計教程：快速入門指南
下一篇：關于CENT百分瀏覽器mhtml html文件圖標變白的bug解決辦法

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

Android webview加載三種不同位置html的方式

言

目錄

1. 交互方式總結

2. 具體分析

方式2：通過WebView的evaluateJavascript（）

2.2 JS通過WebView調用 Android 代碼

特點

方式2：通過 WebViewClient 的方法shouldOverrideUrlLoading ()回調攔截 url

特點

方式3：通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調攔截JS對話框alert()、confirm()、prompt（） 消息

3. 總結

請評論點贊！因為你們的贊同/鼓勵是我寫作的最大動力！

ebView 加載判斷 和 加載動畫的簡單實現

您的項目需求

方式3：通過 WebChromeClient 的onJsAlert()、onJsConfirm()、onJsPrompt（）方法回調攔截JS對話框alert()、confirm()、prompt（）消息

ebView 加載判斷和加載動畫的簡單實現