Android WebView与js交互通信

来源：互联网发布：淘宝交易指数查询编辑：程序博客网时间：2024/04/30 01:30

事出有因，那天我看到手厅的客户端里，在网页webview中点击网络设置后，跳转到了手机的网络设置界面，然后就搜了一下，原来是html中js与androidApp之间的交互。这么说的太费劲了，还是上截图吧，如下：

手机没网的时候，会弹出上面这个网页，然后我们通过快捷按钮“网络设置”后，界面跳转到如下

这个是通过js和webview共同完成的一个交互效果。

首先，在js中如下：

[javascript] view plain copy
 
<script type="text/javascript">  
window.onload=function(){  
    var btn_net=document.getElementById("btn_net");  
    btn_net.onclick=function(){  
       window.js_invoke.goNetSetting();  
    }  
    var btn_err=document.getElementById("btn_err");  
    btn_err.onclick=function(){  
       window.js_invoke.reload();  
    }  
};  
  
</script>  

其中window后面的"js_invoke"这个别名是和app中webview设置的对象别名一致的，下面会写到，而后面的goNetSetting()和reload()方法是那个对象的里的方法。

然后，在activity对webview做一个关键的设置如下：

[java] view plain copy
 
this.mainView.addJavascriptInterface(new RemoteInvokeService(this, this.mainView, this.url, null), "js_invoke");  

RemoteInvokeService(……)这个对象就是上面提到的对象，这里面我们定义了网络设置和重新加载的方法，例如下：

[java] view plain copy
 
public void goNetSetting()  
{  
  this.context.startActivityForResult(new Intent("android.settings.WIRELESS_SETTINGS"), 0);  
}  
  
  public void reload()  
{  
  this.webView.loadUrl(this.url);  
}  

当然了，这个对象的构造函数不一样要传这几个参数，根据需求传就可以了。这里的构造函数是这样：

[java] view plain copy
 
public RemoteInvokeService(Activity paramActivity, WebView paramWebView, String paramString1, String paramString2)  
 {  
   this.context = paramActivity;  
   this.webView = paramWebView;  
   this.url = paramString1;  
   this.returnIntent = paramString2;  
 }  

error.html:

[html] view plain copy
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>无标题文档</title>  
<link href="css/style_Ning.css" rel="stylesheet" type="text/css" />  
<style type="text/css">  
body{background:#0F2030;}  
#page{  
    border:1px solid #223442; background:#223442;  
    border-radius:8px;  
    -webkit-border-radius:8px;  
    -moz-border-radius:8px;  
    -o-border-radius:8px;  
    margin-top:20px;  
    color:#fff;  
}  
</style>  
<script type="text/javascript">  
window.onload=function(){  
    var btn_net=document.getElementById("btn_net");  
    btn_net.onclick=function(){  
       window.js_invoke.goNetSetting();  
    }  
    var btn_err=document.getElementById("btn_err");  
    btn_err.onclick=function(){  
       window.js_invoke.reload();  
    }  
};  
  
</script>  
</head>  
<body>  
<div id="page">  
    <div class="section">  
        <p class="bg_err">网络出错</p>  
    </div>  
    <div class="section">  
        <ul>  
            <p>可能的原因有：</p>  
            <li>无手机信号或信号太弱</li>  
            <li>当前接入点已失效或过期</li>  
            <li>为正确开通手机上网服务</li>  
        </ul>  
    </div>  
    <div class="section">  
        <p style="text-align: center;"><a  id="btn_err" class="btn_err" href="#"></a><a id="btn_net" class="btn_net" href="#"></a></p>  
    </div>  
</div>  
</body>  
</html>  

RemoteInvokeService.java

[java] view plain copy
 
package cn.com.web;  
  
import android.app.Activity;  
import android.content.Intent;  
import android.webkit.WebView;  
  
public class RemoteInvokeService {  
    private Activity context;  
    private String url;  
    private WebView webView;  
  
    public RemoteInvokeService(Activity paramActivity, WebView paramWebView,  
            String paramString1) {  
        this.context = paramActivity;  
        this.webView = paramWebView;  
        this.url = paramString1;  
    }  
  
    public void goNetSetting() {  
        this.context.startActivityForResult(new Intent(  
                "android.settings.WIRELESS_SETTINGS"), 0);  
    }  
  
    public void reload() {  
        this.webView.loadUrl(this.url);  
    }  
}  

主要代码：

[java] view plain copy
 
package cn.com.web;  
  
import cn.com.web.R;  
import android.app.Activity;  
import android.app.AlertDialog;  
import android.content.DialogInterface;  
import android.graphics.Bitmap;  
import android.os.Bundle;  
import android.view.KeyEvent;  
import android.view.MotionEvent;  
import android.view.View;  
import android.view.Window;  
import android.view.View.OnTouchListener;  
import android.webkit.WebChromeClient;  
import android.webkit.WebView;  
import android.webkit.WebViewClient;  
import android.widget.EditText;  
import android.widget.ImageView;  
import android.widget.LinearLayout;  
import android.widget.TextView;  
import android.widget.Toast;  
  
/** 
 * 浏览器 
 *  
 */  
public class WebViewApp extends Activity {  
  
    /** webview控件 */  
    private WebView webView;  
  
    /** 当前url地址 */  
    private String browserUrl = "file:///android_asset/error.html";  
  
    @Override  
    protected void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        // getWindow().requestFeature(Window.FEATURE_PROGRESS);// 用title bar做进度条  
        // requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);// 用title  
        setContentView(R.layout.browser_layout);  
        initWebView();  
    }  
  
    /** 
     * 初始化webview 
     */  
    private void initWebView() {  
        // 得到webView的引用  
        webView = (WebView) findViewById(R.id.browser_layout_webview);  
        // 支持JavaScript  
        webView.getSettings().setJavaScriptEnabled(true);  
        // 支持缩放  
        webView.getSettings().setBuiltInZoomControls(true);  
        // 支持保存数据  
        webView.getSettings().setSaveFormData(false);  
  
        // 清除缓存  
        webView.clearCache(true);  
        // 清除历史记录  
        webView.clearHistory();  
        // 联网载入  
        webView.loadUrl(browserUrl);  
        // String baseUrl = "file:///android_asset";  
        // webView.loadDataWithBaseURL(baseUrl, browserUrl, "text/html",  
        // "utf-8", null);  
        // 设置  
        webView.setWebViewClient(new WebViewClient() {  
  
            /** 开始载入页面 */  
            @Override  
            public void onPageStarted(WebView view, String url, Bitmap favicon) {  
                setProgressBarIndeterminateVisibility(true);// 设置标题栏的滚动条开始  
                browserUrl = url;  
                super.onPageStarted(view, url, favicon);  
            }  
  
            /** 捕获点击事件 */  
            public boolean shouldOverrideUrlLoading(WebView view, String url) {  
                webView.loadUrl(url);  
                return true;  
            }  
  
            /** 错误返回 */  
            @Override  
            public void onReceivedError(WebView view, int errorCode,  
                    String description, String failingUrl) {  
                super.onReceivedError(view, errorCode, description, failingUrl);  
            }  
  
            /** 页面载入完毕 */  
            @Override  
            public void onPageFinished(WebView view, String url) {  
                setProgressBarIndeterminateVisibility(false);// 设置标题栏的滚动条停止  
                super.onPageFinished(view, url);  
            }  
  
        });  
  
        webView.setWebChromeClient(new WebChromeClient() {  
            /** 设置进度条 */  
            public void onProgressChanged(WebView view, int newProgress) {  
                // 设置标题栏的进度条的百分比  
                WebViewApp.this.getWindow().setFeatureInt(  
                        Window.FEATURE_PROGRESS, newProgress * 100);  
                super.onProgressChanged(view, newProgress);  
            }  
  
            /** 设置标题 */  
            public void onReceivedTitle(WebView view, String title) {  
                WebViewApp.this.setTitle(title);  
                super.onReceivedTitle(view, title);  
            }  
        });  
        webView.addJavascriptInterface(new RemoteInvokeService(WebViewApp.this,  
                webView, "http://www.baidu.com/"), "js_invoke");  
    }  
  
    /** 
     * 捕获返回键 
     */  
    public boolean onKeyDown(int keyCode, KeyEvent event) {  
        if ((keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack())) {  
            webView.goBack();  
            return true;  
        }  
        return super.onKeyDown(keyCode, event);  
    }  
  
}  

代码下载

0 0