js与webView的交互

最新推荐文章于 2023-06-11 20:22:20 发布

巴黎的街道

最新推荐文章于 2023-06-11 20:22:20 发布

阅读量390

点赞数

本文链接：https://blog.csdn.net/u014451709/article/details/41010327

版权

主页面：

package com.sihuaTech.webview;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;

import android.app.Activity;
import android.os.Bundle;
import android.view.KeyEvent;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends Activity {
	/** Called when the activity is first created. */
	private WebView myWebView;

	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.main);

		myWebView = (WebView) findViewById(R.id.myWebView);
		myWebView.getSettings().setJavaScriptEnabled(true);
		// 与js交互，JavaScriptinterface 是个接口，与js交互时用到的，这个接口实现了从网页跳到app中的activity 的
		// 方法，特别重要
		myWebView.addJavascriptInterface(new JavaScriptinterface(this),
				"android");
		// html里的内容，test1就是本地的html,在项目assets文件夹下
		String htmlText = getFromAssets("test1.html");
		// 将html里的内容加载到webview中
		myWebView.loadData(htmlText, "text/html", "utf-8");
		myWebView.setWebViewClient(new myWebViewClient());

	}

	// 此按键监听的是返回键，能够返回到上一个网页（通过网页的hostlistery）
	public boolean onKeyDown(int keyCode, KeyEvent event) {
		if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
			myWebView.goBack();
			return true;
		}
		return super.onKeyDown(keyCode, event);
	}

	// 获取网页具体内容
	public String getFromAssets(String fileName) {
		try {
			InputStreamReader inputReader = new InputStreamReader(
					getResources().getAssets().open(fileName));

			BufferedReader bufReader = new BufferedReader(inputReader);

			String line = "";
			String Result = "";

			while ((line = bufReader.readLine()) != null)
				Result += line;
			if (bufReader != null)
				bufReader.close();
			if (inputReader != null)
				inputReader.close();
			return Result;
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;
	}

	class myWebViewClient extends WebViewClient {

		@Override
		public boolean shouldOverrideUrlLoading(WebView view, String url) {
			// TODO Auto-generated method stub
			view.loadUrl(url);
			return true;
		}

	}
}

布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<WebView  android:layout_height="fill_parent" android:layout_width="fill_parent"
          android:id="@+id/myWebView" android:clickable="false"
          android:focusableInTouchMode="false"/>
</LinearLayout>

让js调用的方法类：

与js交互时用到的方法类类名叫JavaScriptinterface
或在方法前加 @JavascriptInterface 否则不能调用到该方法的

package com.sihuaTech.webview;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;

/**
 * 与js交互时用到的方法类 类名叫JavaScriptinterface
 * 或在方法前加 @JavascriptInterface   否则不能调用到该方法的
 */
public class JavaScriptinterface {

	private Context mContext;
	//这个一定要定义，要不在showToast()方法里没办法启动intent
	Activity activity;

	/** Instantiate the interface and set the context */
	public JavaScriptinterface(Context c) {
		mContext = c;
		activity = (Activity) c;
	}

	/** 与js交互时用到的方法，在js里直接调用的 */

	public void showToast() {

		Intent intent = new Intent();
		intent.setClass(mContext, testactvity.class);
		activity.startActivity(intent);
	}
}

调用的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" xml:lang="zh-CN" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript">   
function showAndroidToast() {       
	android.showToast();   
	 }
</script>

</head>
<body>
<a href="#" id="a1" name="a1" onClick="showAndroidToast()">button</a>
<input type="button" value="Say hello"
	 onClick="showAndroidToast()"/>
	 
</body>

</html>

①android如何调用js。

调用形式：

mWebView.loadUrl("javascript:wave()");

其中wave（）是js中的一个方法，当然你可以把这个方法改成其他的方法，也就是android调用其他的方法。

②js如何调用android。

调用形式：

可以用这种直接事件

<a onClick="window.demo.clickOnAndroid()">

或调用js方法在方法里调用如上HTML中的那样

代码中的“demo”是在android中指定的调用名称，即

 mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

代码中的clickOnAndroid()是“demo”对应的对象：new DemoJavaScriptInterface() 中的一个方法。

③双向交互。

当然是把前面的两种方式组合一下就可以了。

本文借鉴：http://www.cnblogs.com/vanezkw/archive/2012/07/02/2572799.html

巴黎的街道

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫