WebView使用详解

一、用WebView处理页面导航

可以加载本地资源也可以加载web资源,区别是我们要加载本地资源要实现在assets文件夹里添加一个.html资源。调取网页的时候可以用loadUrl方法把网址添加进去也可以用Intent意图,把Uri地址添加进去就好了,在这里我就不写不来了。但是在打开的时候总是默认通过第三方浏览器或者系统自带浏览器打开网页,下面这段代码就是解决这个问题的,使得网页在webView中打开。

webView.setWebViewClient(new WebViewClient(){

@Override

public boolean shouldOverrideUrlLoading(WebView view, String url) {

// 返回true的时候控制网页在WebView中打开

//返回false的时候是调用系统浏览器或者第三方浏览器打开

view.loadUrl(url);

return true;

}

});

二、在WebView中使用JavaScript

如果想要在加载WebView中的web页面使用JavaScript,需要在WebView中启用JavaScript。启用JavaScript可以通过WebView中带有WebSettings来启用它,可以通过getSettings()来获取WebSettings的值,然后通过setJavaScriptEnabled()来启用JavaScript。代码如下:

WebSettings webSettings=webView.getSettings();

webSettings.setJavaScriptEnabled(true);

三、解决WebView前进与后退的问题

       当我们一级一级的打开网页的时候,我们按Back键的时候并不是一级一级返回的,而是整个WebView都退出来了,这样的用户体验是非常差的。为了解决这个问题,我们需要自动生成历史访问记录,生成历史返回记录的前提是要WebView覆盖Url的加载,覆盖之后就可以通过 goBack()或者goForward()向前或向后访问已经访问过的站点。代码如下:

@Override

public boolean onKeyDown(int keyCode, KeyEvent event) {

if (keyCode==KeyEvent.KEYCODE_BACK) {

//判断网页是否能返回

if (webView.canGoBack()) {

webView.goBack();

return true;

}else {

System.exit(0);

}

}

return super.onKeyDown(keyCode, event);

}

四、判断页面的加载过程

      我们在打开一个网页的时候,由于有些网页加载的缓慢,在加载出来网页之前,界面的一片空白的,影响用户体验。所以我们需要去判断页面的加载过程,制作进度条给用户良好的体验效果。代码实现如下:

webView.setWebChromeClient(new WebChromeClient() {

@Override

// newProgress是1-100之间的整数

public void onProgressChanged(WebView view, int newProgress) {

super.onProgressChanged(view, newProgress);

// 网页加载完成

if (newProgress == 100) {

// 关闭加载完毕,关闭ProgressDialog

closeDialog();

} else {

// 网页正在加载,打开ProgressDialog

openDialog(newProgress);

}

}

private void openDialog(int newProgress) {

if (dialog == null) {

dialog = new ProgressDialog(Test.this);

dialog.setTitle("正在加载");

dialog.setProgressStyle(ProgressDialog.STYLE_HORIZONTAL);

dialog.setProgress(newProgress);

dialog.show();

} else {

dialog.setProgress(newProgress);

}

}

protected void closeDialog() {

if (dialog != null && dialog.isShowing()) {

dialog.dismiss();

dialog = null;

}

}

});

五、WebView缓存的应用

      上边的方法是给用户一种错觉,网页正在加载要耐心的等一会儿,这并不是最好的解决办法,所以需要给WebView添加缓存,WebView默认情况是没有带缓存的。代码实现如下:

WebSettings settings=webView.getSettings();

settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

缓存资源在File Explorer——>data——>data——>当前项目文件夹——>cache目录下

六、WebView一些基本设置

1、是否支持JavaScript

webView.getSettings().setJavaScriptEnabled(false);

2、是否支持缩放,默认为true

webView.getSettings().setSupportZoom(false);

3、设置是否显示缩放工具,默认为false

webView.getSettings().setBuiltInZoomControls(false);

4、一般很少会用到这个,用WebView组件显示普通网页时一般会出现横向滚动条,这样会导致页面查看起来非常不方便。LayoutAlgorithm是一个枚举,用来控制html的布局,总共有三种类型:NORMAL:正常显示,没有渲染变化。SINGLE_COLUMN:把所有内容放到WebView组件等宽的一列中。NARROW_COLUMNS:可能的话,使所有列的宽度不超过屏幕宽度。

          webView.getSettings().setLayoutAlgorithm(LayoutAlgorithm.SINGLE_COLUMN);

5、设置默认的字体大小,默认为16,有效值区间在1-72之间

webView.setDefaultFontSize(20);

七、加载内容的三种方式

       除了上面提到的可以加载assets目录下的本地网页和远程网页,还可以使用 LoadData 或者 loadDataWithBaseURL方法加载内容,在这里我说一说第三种。

有时候我们的webview可能只是html片段,而不是一个完整的网页,事实上绝大多数时候都是这样的。这种情况我们使用 LoadData 或者 loadDataWithBaseURL方法。

void loadDataWithBaseURL (String baseUrl, String data, String mimeType, String encoding, String historyUrl)

void loadData (String data, String mimeType, String encoding)

   String body ="<img src=‘/uploads/allimg/130923/1FP02V7-0.png‘ />";

   webView.loadDataWithBaseURL("http://www.jcodecraeer.com", body, "text/html", "utf-8",null);

六、WevView访问网络权限

<uses-permission android:name="android.permission.INTERNET"/>

时间: 2024-10-29 13:15:05

WebView使用详解的相关文章

WebView使用详解(三)——WebChromeClient与LoadData补充

前言: 我不会忘了我 忘了我曾说过一定会得到的梦想 --<老大>小柯 相关文章 1.<WebView使用详解(一)--Native与JS相互调用(附JadX反编译)> 2.<WebView使用详解(二)--WebViewClient与常用事件监听> 一.WebChromeClient 1.概述 (1). 与WebViewClient的区别 很多同学一看到这里有Chrome,立马就会想到google 的Chrome浏览器:这里并不是指Chrome浏览器的意思,而是泛指浏览

WebView使用详解(二)——WebViewClient与常用事件监听

登录|注册     关闭 启舰 当乌龟有了梦想-- 目录视图 摘要视图 订阅 异步赠书:Kotlin领衔10本好书      免费直播:AI时代,机器学习如何入门?      程序员8月书讯      每周荐书:Java Web.Python极客编程(评论送书) WebView使用详解(二)--WebViewClient与常用事件监听 2016-05-28 11:24 20083人阅读 评论(13) 收藏 举报  分类: 5.andriod开发(148)  版权声明:本文为博主原创文章,未经博主

Android WebView 开发详解

Android WebView 开发详解 1.概览: Android WebView 做为承载网页的载体控件,他在网页显示的过程中会产生一些事件,并回调给我们的应用程序,以便我们在网页加载过程中做应用程序想处理的事情.比如说客户端需要显示网页加载的进度.网页加载发生错误等等事件. WebView提供两个事件回调类给应用层,分别为WebViewClient,WebChromeClient开发者可以继承这两个类,接手相应事件处理.WebViewClient 主要提供网页加载各个阶段的通知,比如网页开

Android WebView 开发详解(一)

转载请注明出处  http://blog.csdn.net/typename/article/details/39030091 powered by meichal zhao 概览: Android WebView在Android平台上是一个特殊的View, 他能用来显示网页,这个类可以被用来在你的app中仅仅显示一张在线的网页,还可以用来开发浏览器.WebView内部实现是采用渲染引擎来展示view的内容,提供网页前进后退,网页放大,缩小,搜索,前端开发者可以使用web inspector(A

Android WebView 开发详解(二)

转载请注明出处  http://blog.csdn.net/typename/article/details/39495409 powered by meichal zhao 概览: Android WebView 做为承载网页的载体控件,他在网页显示的过程中会产生一些事件,并回调给我们的应用程序,以便我们在网页加载过程中做应用程序想处理的事情.比如说客户端需要显示网页加载的进度.网页加载发生错误等等事件. WebView提供两个事件回调类给应用层,分别为WebViewClient,WebChr

Android WebView 开发详解(三)

转载请注明出处   http://blog.csdn.net/typename/article/details/40302351 powered by miechal zhao 概览 Android WebView提供展示网页,也提供我们应用程序对网页加载的一些定制,比如我们为了减少网络数据可以设置当前加载的页面不能显示图片,如果是pc网址在pad上访问我们可以提供用户一种概览模式的浏览方式,可以提供放大网页字体等定制功能.Android 提供管理WebView的一些setting的类WebSe

Android webview使用详解

1. 打开网页时不调用系统浏览器, 而是在本WebView中显示: mWebView.setWebViewClient(new WebViewClient(){ @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { view.loadUrl(url); return true; } }); 2. 通过java代码调用javascript WebSettings webSettings = mWe

Android WebView使用详解包括js互调

目前很多android app都内置了可以显示web页面的界面,会发现这个界面一般都是由一个叫做WebView的组件渲染出来的,学习该组件可以为你的app开发提升扩展性. 先说下WebView的一些优点: 可以直接显示和渲染web页面,直接显示网页 webview可以直接用html文件(网络上或本地assets中)作布局 和JavaScript交互调用 一.基本使用 首先layout中即为一个基本的简单控件: <WebView android:id="@+id/webView1"

WebView使用详解(一)——Native与JS相互调用(附JadX反编译)

前言:念念不忘,必有回响,永远坚持你所坚持的! 一直在用WebView,还没有系统的总结过它的用法,下面就系统的总结下,分享给大家 一.基本用法 1.加载在线URL void loadUrl(String url) 这个函数主要加载url所对应的网页地址,或者用于调用网页中的指定的JS方法(调用js方法的用法,后面会讲),但有一点必须注意的是:loadUrl()必须在主线程中执行!!!否则就会报错!!!.注意:加载在线网页地址是会用到联网permission权限的,所以需要在AndroidMan

【React Native开发】React Native控件之WebView组件详解以及实例使用(22)

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50676379 本文出自:[江清清的博客] (一)前言 [好消息]个人网站已经上线运行,后面博客以及技术干货等精彩文章会同步更新,请大家关注收藏:http://www.lcode.org 今天我们一起来看一下WebView组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同