android webview 和 js交互

简介:

事出有因,那天我看到手厅的客户端里,在网页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



相关文章
|
4月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
51 5
|
19天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
29 5
|
22天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
31 4
|
1月前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
46 4
|
2月前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
28 1
【JavaScript】网页交互的灵魂舞者
|
2月前
|
程序员 开发工具 Android开发
Android|WebView 禁止长按,限制非白名单域名的跳转层级
如何限制 WebView 仅域名白名单网址能随意跳转,并禁用长按选择文字。
42 2
|
3月前
|
JavaScript 前端开发
JavaScript 与 DOM 交互
【9月更文挑战第01天】
39 2
|
4月前
|
JavaScript 前端开发 UED
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
【8月更文挑战第30天】在Vue.js中,动画与过渡效果不仅是视觉点缀,更是提升用户体验的关键。通过流畅的动态效果,应用的互动性和吸引力得以增强,从而提高用户满意度和参与度。`&lt;transition&gt;`和`&lt;transition-group&gt;`组件结合CSS过渡,可轻松实现元素的进入、离开及列表变化动画。合理的性能优化,如使用硬件加速,能避免页面卡顿,确保动画既美观又高效。下面是一个简单的淡入淡出效果示例,展示了如何利用Vue.js实现平滑的动画过渡。总之,恰当的动画设计能显著提升应用的用户体验。
60 0
Vue.js动画魔法:解锁流畅过渡,让每一次交互都成为用户心中的小确幸!
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
43 0
|
4月前
|
JavaScript 前端开发 API
从零开始学表单操作,jQuery 与原生 JavaScript 完全指南,带你轻松掌握网页交互关键!
【8月更文挑战第31天】在网页开发中,表单是实现用户互动的关键元素。无论是收集信息、提交数据还是验证输入,都需要对表单进行有效操作。本文档介绍了如何使用原生 JavaScript 和 jQuery 操作表单,包括获取表单元素、读写表单值、处理表单提交及验证等核心功能。jQuery 提供了更简洁的语法和更好的兼容性,但原生 JavaScript 在性能上有优势。选择合适的方法取决于项目需求和个人偏好。下面通过具体示例展示了两种方式的操作方法。
41 0