【网络编程】WebView的使用笔记(一)
2015-12-11 15:48
531 查看
一、概述
WebView,几乎是每个开发环境都具备的,WP的webbrowser,Android和IOS的WebView。WebView是android中用来显示页面的视图控件,它的功能相当强大,通过它可以加载显示网页,并具备一般浏览器所具有的功能,具有高度可定制性,因此WebView控件也用来开发浏览器,同时也是android中js与java互调的桥梁,有了这个控件,web前端人员也可以通过js,css3,h5写android UI界面。
webView的使用是建立在网络上的,使用必须添加网络权限:
[code]<uses-permission android:name="android.permission.INTERNET" />
二、加载本地和远程的html页面
WebView提供下面三个方法来加载页面:loadUrl(String url):通过url加载页面
loadData (String data, String mimeType, String encoding) :通过解析html格式的字符串显示相应的页面
data:html语法字符串
mimeType:资源的媒体类型,加载页面通常设置为 “text/html”
encoding:编码
loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl) :
baseUrl:基本的url
data:html字符串
mimeType:资源的媒体类型,加载页面通常设置为 “text/html”
encoding:编码
historyUrl:历史url
关于loadData()和loadDataWithBaseURL的区别,网上说:
loadData()中的html data中不能包含’#’, ‘%’, ‘\’, ‘?’四中特殊字符,出现这种字符就会出现解析错误,显示找不到网页还有部分html代码。需要如何处理呢?我们需要用UrlEncoder编码为%23, %25, %27, %3f ,或者使用loadDataWithBaseURL加载页面。
加载本地页面示例:
加载本地asset下面的html页面(通常我们自己写的html页面都放到这个目录下):
[code]webView.loadUrl("file:///android_asset/html/main.html");
加载远程页面
[code]webView.loadUrl("http://www.baidu.com");
加载html字符串(用html的标签语法写字符串,可以被解析成html显示)
[code]String html = "<font size='6' color='red'>我是html格式的字符串,可以被WebView解析</font>"; webView.loadData(html,"text/html","UTF-8");
也可以通过loadDataWithBaseURL()
[code]String html = "<font size='6' color='red'>我是html格式的字符串,可以被WebView解析</font>"; webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null);
三、浏览器操作,控制WebView
浏览器常见的操作如:前进,后退,缩小,放大,清空历史:前进:webView.getForward();
后退:webView.getBack();
缩小:webView.zoomOut();
放大:webView.zoomIn();
清空历史记录:webView.clearHistory();
注意: 前进和后退的前提是可以前进和后退,即:
如果有上一个浏览的历史,那么可以后退
如果有下一个前进的历史(之前在这里回退了),那么可以前进
可以通过webView.canGoBack()和webView.canGoForward()分别判断一下是否可以后退和前进
四、java与js交互
必须打开js支持:[code]// 开启js支持 settings.setJavaScriptEnabled(true);
java调用js代码,通过webView.loadUrl(“javascript:jsMethod”):
如:
[code]webView.loadUrl("javascript:test('调用js成功!')");
js调用java代码,通过webView. addJavascriptInterface (Object object, String name) :
object:要暴露给js调用的java类
name:暴露的java对象在js中的名称
如:
[code]webView.addJavascriptInterface(new ToastInterface(this), "android");
暴露的对象:ToastInterface.java
[code]package com.example.webviewtest; import android.content.Context; import android.util.Log; import android.webkit.JavascriptInterface; import android.widget.Toast; /** * 暴露的方法上门必须有@JavascriptInterface注释 * 不然js无法调用该方法 * @author lt * */ public class ToastInterface { private Context context; public ToastInterface(Context context){ this.context = context; } /** Show a toast from the web page */ @JavascriptInterface public void showToast(String content){ Toast.makeText(context, content, 0).show(); } }
注意类上面的注释
js调用暴露对象:
[code]方式一: <input type="button" value="显示土司" onclick="javascript:android.showToast('方式一:调用android代码成功!')" /> 方式二: <input type="button" value="显示土司" onclick="window.android.showToast('方式二:调用android代码成功!')" /> 方式三: <input type="button" value="显示土司" onclick="showToast('方式三:调用android代码成功!')" />
其中:showToast()
[code]function showToast(toast){ //window.android.showToast(toast); javascript:android.showToast(toast); }
注意:window和javascript:是可以省略的包括直接写在onclick事件中的,android就是暴露对象在js中的名称。
js的三种弹窗在替换成android中的对话框
可以通过给WebView设置WebChromeClient对象重写相应的事件实现我们自己处理相应的js弹窗,如果没自己处理,系统默认替换成相应的对话框
如:
[code]webView.setWebChromeClient(new WebChromeClient(){ /** * 响应js的alert对话框 * @param url : 当前页面的url地址 * @param message 显示提示输入框的信息. * @parm result : js窗口响应的结果,通过它可以实现js窗口的确认和取消操作 */ @Override public boolean onJsAlert(WebView view, String url, String message, final JsResult result) { Dialog dialog = new AlertDialog.Builder(MainActivity.this) .setIcon(R.drawable.ic_launcher) .setTitle("温馨提示") .setMessage(message) .setPositiveButton("确定", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Toast.makeText(MainActivity.this, "关闭对话框", 0).show(); result.cancel(); // 关闭对话框 } }) .create(); dialog.show(); return true; } /** * 输入对话框 * @url 当前页面的url地址 * @param message 显示提示输入框的信息. * @param defaultValue js的prompt输入对话框的默认显示的文本 * @parm result : js窗口响应的结果,通过它可以实现js窗口的确认和取消操作 */ @Override public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { return super.onJsPrompt(view, url, message, defaultValue, result); } /** * 响应js的confirm对话框 * @param url : 当前页面的url地址 * @param message 显示提示输入框的信息. * @parm result : js窗口响应的结果,通过它可以实现js窗口的确认和取消操作 */ @Override public boolean onJsConfirm(WebView view, String url, String message, final JsResult result) { Dialog dialog = new AlertDialog.Builder(MainActivity.this) .setIcon(R.drawable.ic_launcher) .setTitle("确定要删除?") .setPositiveButton("确定", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { Toast.makeText(MainActivity.this, "删除成功!", 0).show(); result.confirm(); } }) .setNegativeButton("取消", new OnClickListener() { @Override public void onClick(DialogInterface dialog, int which) { result.cancel(); } }) .setMessage(message) .create(); dialog.show(); return true; } /** * @param: title WebView加载页面的<title></title>标签的值 */ @Override public void onReceivedTitle(WebView view, String title) { MainActivity.this.setTitle(title); super.onReceivedTitle(view, title); } });
注意:
上面我们自己重写了相应的方法后,js弹出的窗口就是我们自己设置的了
注释说明
onReceivedTitle()的title是html头部的title标签的值,及html页面的标题,默认情况下系统会将WebView加载的html页面的标题替换成我们Activity的标题。
五、切换显示的页面
如果我们不做任何的处理,那么在html页面执行了加载url页面的时候,系统会打开浏览器访问url地址,而我们可以通过下面的代码实现就用当前的webView来加载要打开的网页:[code]webView.setWebViewClient(new WebViewClient() { //当点击链接时,希望覆盖而不是打开新窗口 @Override public boolean shouldOverrideUrlLoading(WebView webView, String url) { webView.loadUrl(url); //加载新的url return true; //返回true,代表事件已处理,事件流到此终止 } });
给webView设置WebViewClient,并重写WebViewClient的shouldOverrideUrlLoading来自己拦截打开url地址的请求,实现用当前的webView加载url。
六、加载资源
如果我们要在html的页面加载asset目录下的一张图片,那么图片的路径可以是绝对路径和相对路径:绝对路径,比如:
[code]file:///android_asset/images/test.jpg
相当路径,比如:
[code]../images/test.jpg
images和html为同一级目录,..表示上一级目录
注意:因为我们的项目是打包成apk(也是一种压缩格式的)形式运行在手机或者模拟器上的,所以asset目录下面的资源除了webView这个控件,其他的不能直接以这种方式引用资源。WebView的这种使用asset资源的方式是一种特例
相关文章推荐
- JavaWeb学习(八)---HttpServletResponse对象(二)
- C#获取网络图片
- Firefox访问https出现 ssl_error_weak_server_ephemeral_dh_key错误
- 札记:计算机网络篇:物理层
- libcurl使用认证证书 https认证
- Android Asynchronous Http Client-Android异步网络请求客户端接口
- Linux 下curl模拟Http 的get or post请求
- 如何解决XMLHttpRequest cannot load file~~~~~~~Origin 'null' is therefore not allowed access
- 黑马程序员——网络编程
- 使用xutils请求网络参数为json字符串时报错IOException
- TCP 和 UDP 能否使用相同的端口号?
- http://www.iconfont.cn/
- 网络应用的编程模型
- Android Asynchronous Http Client
- PHP漏洞全解(七)-HTTP响应拆分
- iOS开源项目大全(一)(整理自网络)
- 简单的网络协议介绍
- iOS开源项目大全(二)(整理自网络)
- Android网络编程---HttpURLConnection
- 处理TCP连包的一小段代码