android webview 和 js交互
程序员文章站
2022-05-23 14:19:53
...
事出有因,那天我看到手厅的客户端里,在网页webview中点击网络设置后,跳转到了手机的网络设置界面,然后就搜了一下,原来是html中js与androidApp之间的交互。这么说的太费劲了,还是上截图吧,如下:
手机没网的时候,会弹出上面这个网页,然后我们通过快捷按钮“网络设置”后,界面跳转到如下
这个是通过js和webview共同完成的一个交互效果。
首先,在js中如下:
<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做一个关键的设置如下:
this.mainView.addJavascriptInterface(new RemoteInvokeService(this, this.mainView, this.url, null), "js_invoke");
RemoteInvokeService(……)这个对象就是上面提到的对象,这里面我们定义了网络设置和重新加载的方法,例如下:
public void goNetSetting()
{
this.context.startActivityForResult(new Intent("android.settings.WIRELESS_SETTINGS"), 0);
}
public void reload()
{
this.webView.loadUrl(this.url);
}
当然了,这个对象的构造函数不一样要传这几个参数,根据需求传就可以了。这里的构造函数是这样:
public RemoteInvokeService(Activity paramActivity, WebView paramWebView, String paramString1, String paramString2)
{
this.context = paramActivity;
this.webView = paramWebView;
this.url = paramString1;
this.returnIntent = paramString2;
}
error.html:
<!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
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);
}
}
主要代码:
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);
}
}
demo:http://download.csdn.net/detail/r8hzgemq/4973170
推荐阅读
-
傲游浏览器下flash和js交互问题
-
Android webview与js交换JSON对象数据示例
-
解析Android中webview和js之间的交互
-
Android WebView的使用方法及与JS 相互调用
-
Android的WebView与H5前端JS代码交互的实例代码
-
详解 WebView 与 JS 交互传值问题
-
HTML5新增属性data-*和js/jquery之间的交互及注意事项
-
Android中webview与JS交互、互调方法实例详解
-
详解android 用webview加载网页(https和http)
-
JS中对日期进行增加以及比较两个日期的Android和iOS都兼容(代码实例)