android webview 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@Overridepublic 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() {@Overridepublic 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;}});// 启用JavaScriptmWebView.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 {@Overridepublic boolean shouldOverrideUrlLoading(WebView view, String url) {// 在webview加载下一页，而不会打开浏览器view.loadUrl(url);return true;}@Overridepublic void onPageStarted(WebView view, String url, Bitmap favicon) {super.onPageStarted(view, url, favicon);}@Overridepublic void onPageFinished(WebView view, String url) {super.onPageFinished(view, url);}@Overridepublic 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 {@JavascriptInterfacepublic void errorReload() {//方法1/*new Handler().post(new Runnable() {  //此方法最好不用，因为在webview中最好不要在工作线程中声明handler@Overridepublic 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() {@Overridepublic void run() {if (mFailingUrl != null) {mWebView.loadUrl(mFailingUrl);}}});/*//方法2handler1.post(new Runnable() {@Overridepublic 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);}}});*/}}@Overridepublic void onConfigurationChanged(Configuration newConfig) {super.onConfigurationChanged(newConfig);}public void onResume() {super.onResume();if (mWebView != null) {mWebView.onResume();mWebView.resumeTimers();}}@Overridepublic void onPause() {if (mWebView != null) {mWebView.onPause();mWebView.pauseTimers();}super.onPause();}@Overridepublic 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() {// 启用JavaScriptmWebView.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() {@Overridepublic void onClick(View v) {// 注：传的参数NAME一定要加''，否则不能调用mWebView.loadUrl("javascript:sayhello(" + "'" + NAME + "')");}});}public void onResume() {super.onResume();if (mWebView != null) {mWebView.onResume();mWebView.resumeTimers();}}@Overridepublic 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），谢谢！

更多相关文章

随机推荐