Android中WebView和js之间的交互

WebView基本用法

如下，可做一个简单的浏览器。

wvSelSrc = (WebView) findViewById(R.id.webViewSelectSrcUrl);

//用ProgressBar显示WebView加载进度
final static int PROGRESS_MAX=100;
pbWebView = (ProgressBar)findViewById(R.id.progressBarWebView);
pbWebView.setMax(PROGRESS_MAX);

wvSelSrc.setWebChromeClient(new WebChromeClient()
{
	public void onProgressChanged(WebView view, int newProgress)
	{
		//加载完成，隐藏进度条
		if (newProgress == PROGRESS_MAX)
		{
			pbWebView.setVisibility(View.GONE);
		}
		//设置进度
		else
		{
			pbWebView.setProgress(newProgress);
		}
	}
});


wvSelSrc.setWebViewClient(new WebViewClient()
{
	//在WebView中点击链接，重载此函数直接在WebView中打开此链接.
	//否则会弹出对话框，提示选择其他浏览器软件打开。
	public boolean shouldOverrideUrlLoading(WebView view, String url)
	{
		Log.i(LOG_TAG, "UrlLoading " + url);
		return false;
	}
	
	//页面加载完成
	public void onPageFinished(WebView view, String url)
	{
		Log.i(LOG_TAG, "onPageFinished " + url);
	}
	
	//页面开始加载
	public void onPageStarted(WebView view, String url, Bitmap favicon) 
	{
		pbWebView.setVisibility(View.VISIBLE);
		actionbar.setTitle(url);
	}
});

//获取WebView设置接口
wsParaConfig = wvParaConfig.getSettings();

//使能Javascript
wsParaConfig.setJavaScriptEnabled(true);

//页面自适应屏幕
wsParaConfig.setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);
wsParaConfig.setLoadWithOverviewMode(true);

//打开网页
wvParaConfig.loadUrl("http://www.gk969.com");

WebView Javascript接口

随着处理器和操作系统性能的不断提高，使用HTML5也能构建出媲美原生方法的UI。原生方法需要一大堆Java和XML代码才能做出来的，用HTML5往往能很简洁地搞定。更重要的是HTML5的跨平台特性，使得我们不必为每个平台都重头到尾搞一套。另外HTML5学习成本相较原生方法也小得多，是快速开发中的利器。在App中使用HTML5构建UI，底层逻辑方面比如数据存储就需要与原生方法交互。下面是Android中WebView与Javascript交互的方法和注意事项。1.使能Javascript

wsParaConfig.setJavaScriptEnabled(true);

2.添加Javascript接口。此处使用Activity作为目标对象，所以Activity类中必须有public属性的接口函数供Javascript调用。

wvParaConfig.getSettings().addJavascriptInterface(this, "paraConfig");

3.添加接口函数。如果App的targetSdkVersion大于等于API19(Android4.4.X)的话，代码中暴露给Javascript的接口函数必须添加@JavascriptInterface标记，同时要import android.webkit.JavascriptInterface包。否则Javascript中不能调用此接口函数。据说这是为了修复一个有关安全性的BUG。因为之前版本的SDK中没有这个接口标记，接口类中的所有public成员都暴露给了Javascript，现在就只暴露那些添加了接口标记的函数。另外由于Javascript调用Java接口时运行在非UI线程，所以此接口函数内不能直接操作UI控件。需要通过Handler向UI线程发消息，然后UI线程响应并做相关操作。

private Handler	mHandler = new Handler();

@JavascriptInterface
public void setHomeUrl(String url)
{
	mHandler.post(new Runnable()
	{
		public void run()
		{
			wvParaConfig.goBack();
			Log.i(LOG_TAG, "setHomeUrl");
		}
	});
	
	if(!url.isEmpty())
	{
		Editor editor = getSharedPreferences(SelSrcActivity.SPMAIN_NAME, 0).edit();
		editor.putString(SelSrcActivity.HOME_URL_KEY, url);
		editor.commit();
		
		Toast.makeText(this, "已设置主页:" + url, Toast.LENGTH_SHORT).show();
	}
}

4.Javascript调用Java接口函数

  
  

   
   百度
  
  

5.Java调用Javascript接口函数

wvParaConfig.loadUrl("javascript:test('aa')");

6.WebView调用本地HTML调用工程assets目录下的HTML文档，如果HTML中调用了其他的本地JS或者CSS文件，WebView会以assets作为根目录自动加载相应文件。

wvParaConfig.loadUrl("file:///android_asset/paraConfig.html");

其他注意事项

1.在WebView中长按会出现选择复制文字界面，像下面这样重载长按事件后不会再出现此界面。

wvParaConfig.setOnLongClickListener(new WebView.OnLongClickListener()
{
	public boolean onLongClick(View v)
	{
		return true;
	}
});

2.HTML中可点击的元素，比如a或者设置了onclick的div，点击时元素背景色会自动变为淡蓝色，并且点击后元素的四周会出现一个橙色的框用于指示元素已获取焦点。如不需要这两种效果，可添加如下的CSS代码。取消点击元素时的淡蓝背景色

body
{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

取消点击后的橙色框。此处只设置了input、a、div，也可继续添加其他标签。

input:focus,a:focus,div:focus
{
	outline:none;
}

  

原文链接:http://gk969.com/android-webview/