Android与Javascript交互示例(一)

最新推荐文章于 2024-07-28 18:50:05 发布

转载最新推荐文章于 2024-07-28 18:50:05 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/snake-hand/archive/2013/06/05/3119940.html

本文介绍如何在Android应用中让JavaScript调用原生方法。通过WebView加载本地HTML文件，并使用addJavascriptInterface创建桥梁，使HTML页面能触发Android端逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/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>

转载于:https://www.cnblogs.com/snake-hand/archive/2013/06/05/3119940.html