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

时间: 2024-12-03 08:02:47

android webview 和 js交互的相关文章

界面-android webview和JS的交互

问题描述 android webview和JS的交互 代码的主要实现是这样的: 用h5写的一个登陆界面,关于登录界面的逻辑操作是用android的webview来实现的. 在不同的手机上出现不同的问题: 1.红米1s: 在第一次进入该页面的时候,所有webView图片的点击都能响应,此时如果用户点击返回,finish当前页面,再次进入该页面后,所有图片点击事件失效, 2.LG的一个手机 关于用户名和密码的输入框(input标签),两个输入框不能够连续交替地输入,这样程序会崩溃,以下输入则没有问题

Android五分钟轻松教会你掌握WebView与JS交互

背景:Android API中提供了WebView组件来实现对html的渲染.现在HTML5.CSS3.jS的相关开发技术,以及数据交换格式json/XML.Web开发工程师的技能.为了减少对android的过度依赖,通常会在原生的Android 嵌入部分的html了. 这样一来就避免不了为js数据交互. 我们新建一个简单的布局,只有一个webview控件 <android:id="@+id/webView"  android:layout_width="fill_pa

Android中WebView与Js交互的实现方法_Android

获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js可用,参数:布尔值 在判断是否支持js的时候,不要用alert(),默认不起作用,可以先用document.write()测试 调用WebView对象的addJavascriptInterface(obj, interfaceName)方法,添加js接口,参数:Object对象,String接口名

Android webview与js的数据交互

项目要用到Webview和js交互,查了查以前的项目感觉还是有必要整理下的. 简单描述下项目中用到的地方,比如说在web页需要用到登录的地方点击登录跳转到APP原生登录界面去登录,点击web页的拨打电话弹出原生dialog询问是否拨打,点击web页里面的图片进行放大处理.针对于上述的需求我们通用的方式大概有两种,一是监听a标签,在shouldOverrideUrlLoading根据URL进行判断,二是js代码注入,找到我们想要处理的元素进行js代码注入.下面就这两种方式简单的进行描述 首先需要初

Android中WebView与Js交互的实现方法

获取WebView对象 调用WebView对象的getSettings()方法,获取WebSettings对象 调用WebSettings对象的setJavaScriptEnabled()方法,设置js可用,参数:布尔值 在判断是否支持js的时候,不要用alert(),默认不起作用,可以先用document.write()测试 调用WebView对象的addJavascriptInterface(obj, interfaceName)方法,添加js接口,参数:Object对象,String接口名

webview和js交互

今天主要总结两点:一是使用Js去调用客户端公有方法,二是从客户端调用Js中的方法 一.JS调用客户端公有方法 上例子:(PS:不会写JS,就网上找了一段js代码) 新建项目,在项目的assets文件夹下创建一个test.html: [HTML] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 <body> <a>Web与Js交互:点击我,来调用客户端的show方法吧</a> <scri

javascript-安卓开发webview与js交互

问题描述 安卓开发webview与js交互 关于安卓webview与js交互的问题,我这里的附件是网上下载的一抽奖网页,我想把它加载在webview里,然后在webview里运行后能够弹出来相应的提示(Toast弹出),比如抽到苹果,就弹出来个Toast,提示苹果可能网页需要稍微修改一下,无奈自己做不出来啊,请大神帮助,最好上个成品,我这里实在是没有C币,上不了分了 附件地址 http://pan.baidu.com/share/link?shareid=3352172372&uk=406603

配置-android webview debuggap js 远程调试

问题描述 android webview debuggap js 远程调试 我电脑系统是win8 64位 手机是android 4.4.4版本的.我用debuggap无法进行远程调试.提示如下信息: Sorry,this remote client doesn't support single-step debugging Maybe there is something wrong with your setting and configuration 但是我可以操作页面元素.不知道哪里配置错

webview与js交互跳转-webView与js交互跳转到另一个activity会自动关闭

问题描述 webView与js交互跳转到另一个activity会自动关闭 自定义webView与js交互跳转到另一个activity会自动关闭,并且没走destroy()方法?求大神解释?