Android通过使用webview实现和js的交互

时间:2023-02-10 15:00:16

通过webview可以加载本地文本数据或者网络数据,实现类似于浏览器的功能 public class MainActivity extends Activity{     @Override     protected void onCreate(Bundle savedInstanceState){         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         WebView wv_browser = (WebView)findViewById(R.id.wv_brouse);         //wv_browser.loadUrl("http://www.zdc.net");//加载网络数据         wv_browser.loadUrl("file:///android_asset/index.html");//加载assert目录下的html文件         WebSettings settings = wv_browser.getSettings();         settings.setUseWideViewPort(true);         settings.setSupportZoom(true);//支持缩放         settings.setJavaScriptEnabled(true);//支持javascript         wv_browser.setWebViewClient(new WebViewClient() {              @Override              public boolean shouldOverrideUrlLoading(WebView view, String url) {                   view.loadUrl(url);                   return true;//如果返回false就会通过本机浏览器加载              }          });     }}补充:android调用js方法:wv_browser.loadUrl("javascript:changeFont('min')");//字体变小wv_browser.loadUrl("javascript:changeFont('norm')");// 正常wv_browser.loadUrl("javascript:changeFont('max')");// 变大

WebView控件的其他方法:

// 触摸焦点起作用(如果不设置,则在点击网页文本输入框时,不能弹出软键盘及不响应其他的一些事件)mWebView.requestFocus();// 取消滚动条mWebView.setScrollBarStyle(WebView.SCROLLBARS_OUTSIDE_OVERLAY);// 允许网页缩放settings().setSupportZoom(true);// 把图片加载放在最后来加载渲染mWebView.getSettings().setBlockNetworkImage(true);回退WebView的加载层级,而不是退出Activity@Overridepublicboolean onKeyDown(int keyCode,KeyEvent event){// 是否按下返回键,且WebView现在的层级,可以返回if((keyCode ==KeyEvent.KEYCODE_BACK)&& mWebView.canGoBack()){// 返回WebView的上一页面 mWebView.goBack();returntrue;}returnfalse;}mWebView.setWebViewClient(newWebViewClient(){/** * 给WebView加一个事件监听对象(WebViewClient)并重写shouldOverrideUrlLoading, * 当按下某个连接时WebViewClient会调用这个方法并传递参数 */@Overridepublicboolean shouldOverrideUrlLoading(WebView view,String url){// 此处可添加一些逻辑:是否拦截此url,自行处理// 下方2行代码是指在当前的webview中跳转到新的url view.loadUrl(url);returntrue;}});//在WebView开始加载时,显示进度框;加载完毕时,隐藏进度框mWebView.setWebViewClient(newWebViewClient(){/** * WebView加载url完成时,会回调此api,可在这个api中隐藏加载进度框 */@Overridepublicvoid onPageFinished(WebView view,String url){// 此处可添加一些逻辑:隐藏加载进度框}/** * WebView开始加载url时,会回调此api,可在这个api中显示加载进度框 */@Overridepublicvoid onPageStarted(WebView view,String url,Bitmap favicon){// 此处可添加一些逻辑:显示加载进度框}});

WebSettings常用API:

方法

说明

setAllowFileAccess

启用或禁用WebView访问文件数据

setBlockNetworkImage

是否显示网络图像

setBuiltInZoomControls

设置是否支持缩放

setCacheMode

设置缓冲的模式

setDefaultFontSize

设置默认的字体大小

setDefaultTextEncodingName

设置在解码时时候用的默认编码

setFixedFontFamily

设置固定使用的字体

setJavaScriptEnabled

设置是否支持Javascript

setLayoutAlgorithm

设置布局方式

setLightTouchEnabled

设置用鼠标激活被选项

setSupportZoom

设置是否支持变焦

WebViewClient 常用API:

方法

说明

doUpdateVisitedHistory

更新历史记录

onFormResubmission

应用程序重新请求网页数据

onLoadResource

加载指定地址提供的资源

onPageFinished

网页加载完毕

onPageStarted

网页开始加载

onReceivedError

报告错误信息

onScaleChanged

WebView发生改变

shouldOverrideUrlLoading

控制新的连接在当前WebView中打开

WebChromeClient常用API

方法

说明

onCloseWindow

关闭WebView

onCreateWindow

创建WebView

onJsAlert

处理Javascript中的Alert对话框

onJsConfirm

处理Javascript中的Confirm对话框

onJsPrompt

处理Javascript中的Prompt对话框

onProgressChanged

加载进度条改变

onReceivedlcon

网页图标更改

onReceivedTitle

网页Title更改

onRequestFocus WebView

显示焦点

实现Android代码和JS互调

1、Android代码与JS交互的大前提:
// 启用WebView对JavaScript的支持mWebView.getSettings().setJavaScriptEnabled(true);
2、Android代码调用JS
// WebView调用JS代码非常简单,直接调用loadUrl,加载JS方法即可:mWebView.loadUrl("javascript:javacalljs()");
// Java调用JS并传递参数String content ="hello js, form Android code!";mWebView.loadUrl("javascript:javacalljswithargs('"+ content +"')");
HTML页面中的JS代码:
<head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"><scripttype="text/javascript">function javacalljs(){document.getElementById("content").innerHTML +="<br\>java调用了js函数";}function javacalljswithargs(arg){document.getElementById("content").innerHTML +=("<br\>"+arg);}</script></head>
3、JS调用Android代码①实现一个class,并在其中添加对应的方法,供JS调用:
//Js调用的JavascriptInterfacepublicclassTestInterface{/** * 因为安全问题,在Android4.2以后(如果应用的android:targetSdkVersion数值为17+) * JS只能访问带有 @JavascriptInterface注解的Java函数。 */@JavascriptInterfacepublicvoid startCall(){Intent intent =newIntent();intent.setAction(Intent.ACTION_DIAL);intent.setData(Uri.parse("tel:"+10086));startActivity(intent);}@JavascriptInterfacepublicvoid showToast(String msg){Toast.makeText(mContent,"js调用了java函数并传递了参数:"+ msg,0).show();}}
②调用WebView的addJavascriptInterface()方法,设置JS回调的对象:
mWebView.addJavascriptInterface(newTestInterface(),"testInterface");// 第二个参数是一个别名
③HTML页面中的JS代码,回调Android代码的方式为:window.别名.方法名
<aonClick="window.testInterface.startCall()">点击拨打10086</a><br/><aonClick="window.testInterface.showToast('我弹了一个Toast')">点击弹出Toast</a>