android webview js交互之自定义错误加载界面（重新刷新）

最新推荐文章于 2026-06-21 16:39:54 发布

原创最新推荐文章于 2026-06-21 16:39:54 发布 · 9.6k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

android学习之路

本文介绍了在Android WebView开发中如何处理js交互，包括自定义错误加载界面并在点击后重新加载，以及点击拨号、发送短信和图片放大等功能。详细讲述了js调用Java方法和Java调用js的四种情况，并提供了代码示例。

在开发android webview的过程中经常会碰到这样的需求

1、点击webview上的数字手机跳到电话页面或自动播打电话

2、无网络出错，出现自定义本地出错页面，点击页面按钮重新加载

3、点击页面的某段话，自动发送短信

4、点击图片能放大显示

、、、

要完成上面的功能，基本上都要涉及webview 和 js 的交互，下面简单举几个小例子

涉及的过程：

1、html的js脚本调用本地android中的java方法-->无参

2、android中的java代码调用html的js脚本-->无参

3、html的js脚本调用本地android中的java方法-->有参

4、android中的java代码调用html的js脚本-->有参

例1、自定义本地出错页面，点击页面按钮重新加载（使用过程1）

效果图（本人比较懒，就不搞gif了）：

具体代码实现：

package com.xwj.webviewjstest;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.res.Configuration;
import android.graphics.Bitmap;
import android.os.Build;
import android.os.Bundle;
import android.os.Handler;
import android.os.Looper;
import android.view.KeyEvent;
import android.view.MotionEvent;
import android.view.View;
import android.webkit.JavascriptInterface;
import android.webkit.WebSettings.PluginState;
import android.webkit.WebView;
import android.webkit.WebViewClient;

import com.xwj.webviewjsdemo.R;

@SuppressLint("SetJavaScriptEnabled")
public class Test1Activity extends Activity {
	private WebView mWebView;
	private static final String URL = "http://bbs.66u.com";
	// 用于记录出错页面的url 方便重新加载
	private String mFailingUrl = null;
	/*private Handler handler = new Handler(){  //对应方法3
		@Override
		public void handleMessage(Message msg) {
			if (msg.what == 1) {
				if (mFailingUrl != null) {
					mWebView.loadUrl(mFailingUrl);
				}
			}
			super.handleMessage(msg);
		}
	};*/
	private Handler handler1 = new Handler();

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_test1);
		mWebView = (WebView) findViewById(R.id.wv_test1);
		initWebViewSettings();
		initWebview();
	}

	private void initWebViewSettings() {
		mWebView.setWebViewClient(new MyWebViewClient());
		mWebView.setOnTouchListener(new View.OnTouchListener() {
			@Override
			public boolean onTouch(View v, MotionEvent event) {
				switch (event.getAction()) {
				case MotionEvent.ACTION_DOWN:
				case MotionEvent.ACTION_UP:
					if (!v.hasFocus()) {
						v.requestFocus();
						v.requestFocusFromTouch();
					}
					break;
				}
				return false;
			}
		});
		// 启用JavaScript
		mWebView.getSettings().setJavaScriptEnabled(true);
		mWebView.getSettings().setSupportZoom(true);
		mWebView.getSettings().setUseWideViewPort(true);
		mWebView.getSettings().setLoadWithOverviewMode(true);
		mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
		
		if (Build.VERSION.SDK_INT < 19) {
			if (Build.VERSION.SDK_INT >8) {
	        	mWebView.getSettings().setPluginState(PluginState.ON);
	        } 
		}
	}

	private void initWebview() {
		mWebView.addJavascriptInterface(new JsInterface(), "jsinterface");
		mWebView.loadUrl(URL);
	}

	class MyWebViewClient extends WebViewClient {
		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			// 在webview加载下一页，而不会打开浏览器
			view.loadUrl(url);
			return true;
		}

		@Override
		public void onPageStarted(WebView view, String url, Bitmap favicon) {
			super.onPageStarted(view, url, favicon);
		}
		
		@Override
		public void onPageFinished(WebView view, String url) {
			super.onPageFinished(view, url);
		}
		
		@Override
		public void onReceivedError(WebView view, int errorCode,
				String description, String failingUrl) {
			super.onReceivedError(view, errorCode, description, failingUrl);
			mFailingUrl = failingUrl;
			//加载出错的自定义界面
			view.loadUrl("file:///android_asset/error.html");
		}
	}

	class JsInterface {
		@JavascriptInterface
		public void errorReload() {
			//方法1
			/*new Handler().post(new Runnable() {  //此方法最好不用，因为在webview中最好不要在工作线程中声明handler

				@Override
				public void run() {
					if (mFailingUrl != null) {
						mWebView.loadUrl(mFailingUrl);
					}
				}
			});
			
			可将方法1修改成如下：Returns the application's main looper, which lives in the main thread of the application.
			参考blog：http://blog.csdn.net/mylzc/article/details/6771331
			*/

			new Handler(Looper.getMainLooper()).post(new Runnable() {

				@Override
				public void run() {
					if (mFailingUrl != null) {
						mWebView.loadUrl(mFailingUrl);
					}
				}
			});
			
			/*//方法2
			handler1.post(new Runnable() {

				@Override
				public void run() {
					if (mFailingUrl != null) {
						 //当点击出错界面的按钮时，重新加载
						mWebView.loadUrl(mFailingUrl);
					}
				}
			});*/
			//方法3
			/*new Thread(){
				public void run() {
					Message msg = Message.obtain();
					msg.what = 1;
					handler.sendMessage(msg);
				};
			}.start();*/
			//方法4
			/*
			 * runOnUiThread(new Runnable() {
				public void run() {
					if (mFailingUrl != null) {
						mWebView.loadUrl(mFailingUrl);
					}
				}
			});*/
		}
	}
	
	@Override
	public void onConfigurationChanged(Configuration newConfig) {
		super.onConfigurationChanged(newConfig);
	}
	
	public void onResume() {
		super.onResume();
		if (mWebView != null) {
			mWebView.onResume();
			mWebView.resumeTimers();
		}
	}

	@Override
	public void onPause() {
		if (mWebView != null) {
			mWebView.onPause();
			mWebView.pauseTimers();
		}
		super.onPause();
	}

	@Override
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		// 返回键监听 点击返回如果有上一页面不会马上退出
		if (keyCode == KeyEvent.KEYCODE_BACK && mWebView.canGoBack()) {
			mWebView.goBack();
			return true;
		}
		return super.onKeyDown(keyCode, event);
	}
}

html端代码：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>无标题文档</title>
        <meta name="viewport" content=					"width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
        <meta content="yes" name="apple-mobile-web-app-capable">
        <meta content="yes" name="apple-touch-fullscreen">
        <meta content="telephone=no" name="format-detection">
        <meta content="black" name="apple-mobile-web-app-status-bar-style">
        <style type="text/css">
        	*{
				margin:0;
				padding:0;
			}
			
			body{
				color: #928B8B;
				min-width:320px;
				text-align:center;
				font-family:'Microsoft YaHei';
			}
			
			.content{
				background:#f8f8f8;
				overflow:hidden;
				width:100%;
				position:relative;
			}
			
			.mainbody{
				width:100%;
				position:absolute;
				top:50%;
				margin-top:-100px;
			}
			
			.mainbody img{
				width:80px;
				height:80px;
			}
			
			.mainbody p{
				width:100%;
				display:block;
				text-align:center;
				font-size:24px;
				margin:15px 0;
			}
			
			.try{
				width:100px;
				text-align:center;
				padding:6px 0;
				border-style:none;
				color:#928B8B;
				border:1px solid #F0EBEB;
				background:#fff;
				font-size:16px;
			}
			
			.try:hover{
				background:#f2f2f2;
			}
        </style>
	</head>
    

	<body>
		<div class="content" id="id">
        	<div class="mainbody">
            	<img src="img/error_icon.png" />
            	<p id="id_wei">网络异常,请检查网络连接</p>
                <button id="btn" class="try" onClick="window.jsinterface.errorReload()">再试一次</button>
            </div>
        </div>
        
        <script type="text/javascript">
			var a = document.documentElement.clientHeight;
			document.getElementById("id").style.height = a+"px";	
		</script>		
    
 
	</body>
</html>

onClick="window.jsinterface.errorReload()"

mWebView.addJavascriptInterface(new JsInterface(), "jsinterface");

通过webview绑定javascriptInterface，js脚本通过这个接口(jsinterface)来调用java代码

例2、

例3、

例4、运用过程4

效果图：

java代码：

package com.xwj.webviewjstest;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.webkit.WebView;
import android.widget.Button;

import com.xwj.webviewjsdemo.R;

public class Test2Activity extends Activity {
	private WebView mWebView;
	private Button mBtn;
	private static final String URL = "file:///android_asset/test2.html";
	private static final String NAME = "HELLO";

	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_test2);
		mWebView = (WebView) findViewById(R.id.wv_test2);
		mBtn = (Button) findViewById(R.id.btn_test2);
		initWebViewSettings();
		initWebview();
	}

	private void initWebViewSettings() {
		// 启用JavaScript
		mWebView.getSettings().setJavaScriptEnabled(true);
		mWebView.getSettings().setSupportZoom(true);
		mWebView.getSettings().setUseWideViewPort(true);
		mWebView.getSettings().setLoadWithOverviewMode(true);
		mWebView.getSettings().setDefaultTextEncodingName("utf-8");
		mWebView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
	}

	private void initWebview() {
		mWebView.loadUrl(URL);
		mBtn.setOnClickListener(new OnClickListener() {

			@Override
			public void onClick(View v) {
				// 注：传的参数NAME一定要加''，否则不能调用
				mWebView.loadUrl("javascript:sayhello(" + "'" + NAME + "')");
			}
		});
	}

	public void onResume() {
		super.onResume();
		if (mWebView != null) {
			mWebView.onResume();
			mWebView.resumeTimers();
		}
	}

	@Override
	public void onPause() {
		if (mWebView != null) {
			mWebView.onPause();
			mWebView.pauseTimers();
		}
		super.onPause();
	}
}

html代码：

<html>  
<head>  
<meta http-equiv="Content-Type"  content="text/html;charset=gb2312">  
 <style type="text/css">
        	*{
				margin:0;
				padding:0;
			}
			
			body{
				color: #928B8B;
				min-width:320px;
				text-align:center;
				font-family:'Microsoft YaHei';
				font-size:42px;
			}
</style>
<script type="text/javascript">  
function sayhello(namejs){  
     document.getElementById("content").innerHTML +=     
         ("<br\>java调用js函数--参数为："+namejs);  
}  
</script>  
</head>  
<body>  
Love me and love you<br/>  
<br/>  
<div id="content">显示内如：</div>  
</body>  
</html>

注：参数类型要注意（如果为String类型，参数一定要有单引号，多个参数则自己拼接）

欢迎大家总结补充，谢谢

转载请标明出处（http://blog.csdn.net/wei18359100306/article/details/42468739），谢谢！

标签

#webview #js #javascript #android #自定义错误加载界面