Android与Javascript交互示例(一)

简介: MainActivity如下: package cn.testjavascript;import android.os.Bundle;import android.

MainActivity如下:

package cn.testjavascript;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
import android.app.Activity;
/**
 * Demo描述:
 * JavaScript调用Android中的方法
 * 即点击Html中按钮,调用Android中的方法
 * 
 * 参考资料:
 * http://blog.csdn.net/r8hzgemq/article/details/8480390
 */
public class MainActivity extends Activity {
   private WebView mWebView;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);
		init();
	}
	private void init(){
		mWebView=(WebView) findViewById(R.id.webView);
		initWebViewSettings();
		//加载本地Html文件
		mWebView.loadUrl("file:///android_asset/error.html");
		//实现Android与Javascript的交互
		//注意addJavascriptInterface方法中第二参数
		//它表示我们的java对象javaClass的别名.这样js就可以通过该别名来调用Android中的方法
		//即js代码中的:
		//window.js_invoke.goNetSetting();
		//window.js_invoke.reload();
		JavaClass javaClass=new JavaClass(MainActivity.this,mWebView, "http://www.ifeng.com/");
		mWebView.addJavascriptInterface(javaClass, "js_invoke");
	}
	private void initWebViewSettings(){
		mWebView.setVerticalScrollBarEnabled(false);
		mWebView.setHorizontalScrollBarEnabled(false);
		mWebView.getSettings().setJavaScriptEnabled(true);
		mWebView.getSettings().setSupportZoom(true);
		mWebView.getSettings().setDomStorageEnabled(true);
		mWebView.getSettings().setPluginsEnabled(true);
		mWebView.requestFocus();
		mWebView.getSettings().setUseWideViewPort(true);
		mWebView.getSettings().setLoadWithOverviewMode(true);
		mWebView.getSettings().setSupportZoom(true);
		mWebView.getSettings().setBuiltInZoomControls(true);
	}
	private class TestJSWebChromeClient extends WebChromeClient{
		@Override
		public void onProgressChanged(WebView view, int newProgress) {
			super.onProgressChanged(view, newProgress);
			System.out.println("加载中  newProgress="+newProgress);
		}
	}
	
}


 

JavaClass如下:

package cn.testjavascript;
import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.webkit.WebView;
public class JavaClass {
	private Context context;
	private String url;
	private WebView webView;

	public JavaClass(Context context, WebView webView,String url) {
		this.context = context;
		this.webView = webView;
		this.url = url;
	}

	public void goNetSetting() {
		((Activity) this.context).startActivityForResult
		(new Intent("android.settings.WIRELESS_SETTINGS"), 0);
	}

	public void reload() {
		this.webView.loadUrl(this.url);
	}
}

 

main.xml如下:

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <WebView
        android:id="@+id/webView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true"
     />

</RelativeLayout>


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>



 

相关文章
|
6月前
|
前端开发 JavaScript API
js实现promise常用场景使用示例
本文介绍JavaScript中Promise的6种常用场景:异步请求、定时器封装、并行执行、竞速操作、任务队列及与async/await结合使用,通过实用示例展示如何优雅处理异步逻辑,避免回调地狱,提升代码可读性与维护性。
348 10
|
Java Linux Android开发
移动应用开发与操作系统的交互:深入理解Android和iOS
在数字时代,移动应用成为我们日常生活的一部分。本文将深入探讨移动应用开发的核心概念、移动操作系统的工作原理以及它们如何相互作用。我们将通过实际代码示例,展示如何在Android和iOS平台上创建一个简单的“Hello World”应用,并解释其背后的技术原理。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和知识。
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
596 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
数据采集 人工智能 自然语言处理
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
Midscene.js 是一款基于 AI 技术的 UI 自动化测试框架,通过自然语言交互简化测试流程,支持动作执行、数据查询和页面断言,提供可视化报告,适用于多种应用场景。
3988 1
Midscene.js:AI 驱动的 UI 自动化测试框架,支持自然语言交互,生成可视化报告
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
199 1
【JavaScript】网页交互的灵魂舞者
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
822 5
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
441 4
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
394 4
|
存储 前端开发 测试技术
Android kotlin MVVM 架构简单示例入门
Android kotlin MVVM 架构简单示例入门
427 1
|
JSON JavaScript 关系型数据库
node.js连接GBase 8a 数据库 并进行查询代码示例
node.js连接GBase 8a 数据库 并进行查询代码示例