Android WebView加载html5页面实例教程
实例一：WebView加载html5实现炫酷引导页面大多数人都知道，一个APP的引导页面还是挺重要的，不过要想通过原生的Android代码做出一个非常炫酷的引导页相对还是比较复杂的，正巧html5在制作炫酷动画网页方面比较给力，我们不妨先利用html5做出手机引导页面，然后将其嵌入APP中。　　首先我们分析一下，都需要做哪些工作？　　1、制作html5引导页面。　　2、把做好的页面放入Android工程中assets文件夹下。　　3、利用WebView加载asset文件夹下的html文件。　　4、在引导页最后一页的按钮上捕捉点击事件，结束引导页，进入程序。　　简单的讲，整个工作就分以上四步，其中涉及到了Android中一个自带的浏览器控件--WebView，在介绍引导页之前，先来大体说一下WebView的基本用法。一、使用WebView浏览网页　　用WebView浏览网页，这是最常用也是最简单的用法，与普通的ImageView组件的用法基本相似，它也提供了大量方法来执行浏览器操作，常用的几个如下：　　·void goBack()：后退。　　·void goForward()：前进。　　·void loadUrl(String url)：加载url网页。　　·boolean zoomIn()：放大网页。　　·boolean zoomOut()：缩小网页。　　……　　下面看一个例子，通过WebView浏览百度首页，效果图如下。
　　首先不要忘了在AndroidMainfest.xml加入访问网络的权限：
&uses-permission android:name="android.permission.INTERNET"/&
　　布局文件如下：
&LinearLayout xmlns:android="/apk/res/android"
xmlns:tools="/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" &
android:id="@+id/wv_webview"
android:layout_width="fill_parent"
android:layout_height="fill_parent" /&
&/LinearLayout&
　　java代码如下：
public class WebViewLoadWeb extends Activity {
WebView webV
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.webview);
webView = (WebView)findViewById(R.id.wv_webview);
loadWeb();
public void loadWeb(){
String url = "/";
//此方法可以在webview中打开链接而不会跳转到外部浏览器
webView.setWebViewClient(new WebViewClient());
webView.loadUrl(url);
public boolean onKeyDown(int keyCode, KeyEvent event) {
//重写onKeyDown，当浏览网页，WebView可以后退时执行后退操作。
if(keyCode == KeyEvent.KEYCODE_BACK && webView.canGoBack()){
webView.goBack();
return super.onKeyDown(keyCode, event);
　　上面代码首先加载布局文件中WebView视图，然后通过setWebViewClient()方法设置了打开新连接不会跳转到外部浏览器。最后通过loadUrl()方法加载了网址。至于该WebView如何发送请求，如何解析服务器，这些细节对我们来说是完全透明的，我们不需要关心。　　另外需要一提的是，当使用WebView浏览网页时，不做处理的话，按下手机的返回键会直接结束WebView所在的Activity，通过重写onKeyDown()方法，当WebView可以返回时，让其执行返回操作。二、使用WebView加载HTML代码。　　WebView提供了一个loadData(String data, String mimeType, String encoding)方法，该方法可用于加载并显示HTML代码，不过这个方法在加载html代码时很可能会出现乱码的现象。建议用WebView的另一个方法loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)。可以把这个方法认为是loadData()的增强版，它不会产生乱码。以下是他的几个参数说明：　　·data：指定需要加载的html代码。　　·mimeType：指定html代码的MIME类型，对于HTML代码可指定为text/html。　　·encoding：指定html代码编码所用的字符集。　　下面看一个使用WebView加载html代码的简单实例，效果图如下：
java代码如下：
public void loadHtmlData(){
String data = "&html&"
+ "&head&"
+ "&title&欢迎您&/title&"
+ "&/head&"
+ "&body&"
+ "&p&我是一段html代码&/p&"
+ "&/body&"
+ "&/html&";
webView.setWebViewClient(new WebViewClient());
//使用简单的loadData()方法总会导致乱码，有可能是Android API的Bug
//webView.loadData(data, "text/html", "GBK");
webView.loadDataWithBaseURL(null, data, "text/html", "utf-8", null);
　　上面代码很简单，就是用loadDataWithBaseURL()方法加载html代码，在这里就不过多介绍了。　　下面进入本篇介绍的重点，通过加载本地html文件实现炫酷引导页。三、加载本地HTML文件实现炫酷引导页。接下来为本篇重点，通过加载H5的方式可以很轻松做出炫酷的引导页，当然前提时你得先做出或者找到一个很好H5引导页文件。需要说明的都已经在开头说过了，就不废话了，先上效果图：
相信不用我解释大家就能看懂，最左边的是第一张页面，中间的是过度动画效果，最右边的是最后一张，其中在最后一张上面有个按钮，捕捉到这个按钮的跳转链接是关键。下面先来看代码（html文件在assets文件夹下）：
public class WebViewLoadHtml extends Activity {
WebView webV
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//将屏幕设置为全屏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
//去掉标题栏
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.webview);
webView = (WebView)findViewById(R.id.wv_webview);
url = "file:///android_asset/guide/index.html";
loadLocalHtml(url);
@SuppressLint({ "JavascriptInterface", "SetJavaScriptEnabled" })
public void loadLocalHtml(String url){
WebSettings ws = webView.getSettings();
ws.setJavaScriptEnabled(true);//开启JavaScript支持
webView.setWebViewClient(new WebViewClient(){
public boolean shouldOverrideUrlLoading(WebView view, String url) {
//重写此方法，用于捕捉页面上的跳转链接
if ("http://start/".equals(url)){
//在html代码中的按钮跳转地址需要同此地址一致
Toast.makeText(getApplicationContext(), "开始体验", Toast.LENGTH_SHORT).show();
webView.loadUrl(url);
　　上面代码首先将程序设为全屏无标题栏，这样才更像引导页（注：截图中没有全屏是应为使用截图工具时唤出了状态栏）。需要注意的是当加载具有js的文件时需通过WebSettings的setJavaScriptEnabed()方法开启对js的支持。然后通过setWebViewClient()重写shouldOverrideUrlLoading()方法，具体用法源码注释中已给出。　　其中用到html文件的按钮跳转链接的源码如下：
&div class="swiper-slide"&
&span&第三页&/span&
&span class="subtitle"&这是第三页&/span&
&a href="javascript:" onClick="window.open('http:start')" class="swiper_read_more"&开启APP之旅&/a&
实例二：WebView从assets中加载html5页面，实现地理位置定位今天调研一个html5页面的定位问题，发现在手机浏览器上html5是可以实现定位的，但是在webview中就无法定位了。而我居然以为html5的地理定位在webview中不可行。html5页面内容如下：
&!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&
&meta http-equiv="Content-Type" content="text/ charset=UTF-8"&
&p id="demo"&点击这个按钮，获得您的坐标：&/p&
&button onclick="getLocation()"&试一下&/button&
var x=document.getElementById("demo");
function getLocation()
if (navigator.geolocation)
navigator.geolocation.watchPosition(showPosition);
else{x.innerHTML="Geolocation is not supported by this browser.";}
function showPosition(position)
x.innerHTML="Latitude: " + position.coords.latitude +
"&br /&Longitude: " + position.coords.
后来又在网上查了查，发现，需要设置一些东西。设置websetting的属性：
webView.setWebViewClient(new WebViewClient());
//webView.loadUrl("/");
webView.loadUrl("file:///android_asset/index.html");
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
* 以下部分可以不要
// //启用数据库
// webSettings.setDatabaseEnabled(true);
// String dir = this.getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
// //启用地理定位
// webSettings.setGeolocationEnabled(true);
// //设置定位的数据库路径
// webSettings.setGeolocationDatabasePath(dir);
* 此处很重要，必须要
//***最重要的方法，一定要设置，这就是出不来的主要原因
webSettings.setDomStorageEnabled(true);
webView.setWebChromeClient(new WebChromeClient(){
//配置权限（同样在WebChromeClient中实现）
public void onGeolocationPermissionsShowPrompt(String origin,
Callback callback) {
callback.invoke(origin, true, false);
super.onGeolocationPermissionsShowPrompt(origin, callback);
问题解决！特别试了试：同时打开网络和GPS可以定位，获得的是经纬度信息。只打开网络可以定位，只打开GPS也可以定位。关闭网络和GPS也可以定位。由此可见，是由地理位置定位所得，只能获得经纬度信息。若要获得详细的地址信息，需要调用地图API实现。如下所示：纬度：116.，经度：39. 详细地址：北京市天安门Pages: 1/3
主题 : webview可运行，但是不能加载网页只是一片空白（新手急求）
级别: 新手上路
可可豆: 160 CB
威望: 160 点
在线时间: 42(时)
发自: Web Page
来源于&&分类
webview可运行，但是不能加载网页只是一片空白（新手急求）&&&
我做了一个webview的例子，运行代码是成功的，但是模拟器只出现了空白，空白啊空白 ～～～我已搜了类似的帖子，看来看去也看不出我是哪里出错了，求指教。UsingViews3ViewController.m文件代码如下：[font=] #import &UsingViews3ViewController.h&@implementation UsingViews3ViewController@synthesizewebV-(void)viewDidload{NSString*urlAddress=@&&; NSURL *url=[NSURL URLWithString:urlAddress];NSURLRequest*req=[NSURLRequestrequestWithURL:url];[webViewloadRequest:req]; [webViewrelease]; [superviewDidload];}-(void)dealloc{// [webViewrelease];[superdealloc]; }[font=]另我是新手学iphone，并且需要尽快学会，努力学的过程中遇到很多问题，因为周围没有人弄这个的，无法及时交流，求助：qq，，感激不尽！！！[ 此帖被liy974在 16:15重新编辑 ]
级别: 新手上路
可可豆: 160 CB
威望: 160 点
在线时间: 42(时)
发自: Web Page
另外有一个问题，我做了个应用segmented control切换页面的例子，tag为2，我运行初始页面是1，切换到2后，再点击1又回不到页面1了。该怎么回去呢？代码如下：#import &UsingViews2ViewController.h&@implementation UsingViews2ViewController@synthesize segmentedC@synthesize view1,view2;-(void)viewDidload{&&&&[segmentedControl addTarget:self action:@selector(segmentChanged:)&&&&&&&&&&&&&& forControlEvents:UIControlEventValueChanged];&&&&[super viewDidload];}-(IBAction)segmentChanged:(id)sender{&&&&NSInteger selectedSegment = segmentedControl.selectedSegmentI&&&&if (selectedSegment == 0 ) {&&&&&&&&[self.view1 setHidden:NO];&&&&&&&&[self.view2 setHidden:YES];&&&&}&&&&else&&&&{&&&&[self.view1 setHidden:YES];&&&&[self.view2 setHidden:NO];}}-(void) dealloc{&&&&&&&&[segmentedControl release];&&&&&&&&[view1 release];&&&&&&&&[view2 release];&&&&&&&&[super dealloc];&&&&}&&&&@end
级别: 侠客
可可豆: 548 CB
威望: 548 点
在线时间: 76(时)
发自: Web Page
回 楼主(liy974) 的帖子
在viewDidload方法里你怎么把webView&&&&release了？
级别: 新手上路
可可豆: 160 CB
威望: 160 点
在线时间: 42(时)
发自: Web Page
回 2楼(blacksun1017) 的帖子
我实验将[webViewrelease];注释掉还是空白，本来没有写这行的，后来看网上的帖子看看看才加上去。求解？
级别: 侠客
可可豆: 548 CB
威望: 548 点
在线时间: 76(时)
发自: Web Page
回 3楼(liy974) 的帖子
你webView在哪初始化的？IB里？关联上了吗？
级别: 新手上路
可可豆: 95 CB
威望: 95 点
在线时间: 37(时)
发自: Web Page
回 楼主(liy974) 的帖子
webview变量没有在xib文件中与控件关联。
级别: 新手上路
可可豆: 95 CB
威望: 95 点
在线时间: 37(时)
发自: Web Page
回 1楼(liy974) 的帖子
view1与控件相关联了吗？
级别: 新手上路
可可豆: 160 CB
威望: 160 点
在线时间: 42(时)
发自: Web Page
回 4楼(blacksun1017) 的帖子
是的关联关系是这样的：file‘s owner&&outletsview－viewwebview－webview
级别: 新手上路
可可豆: 160 CB
威望: 160 点
在线时间: 42(时)
发自: Web Page
回 6楼(xpsuperman) 的帖子
view与view关联了，webview也与webview关联了，在file's owner中
级别: 新手上路
可可豆: 160 CB
威望: 160 点
在线时间: 42(时)
发自: Web Page
依然空白～～～～～～～～～～～
Pages: 1/3
关注本帖(如果有新回复会站内信通知您)
发帖、回帖都会得到可观的积分奖励。
按"Ctrl+Enter"直接提交
关注CocoaChina
关注微信 每日推荐
扫一扫 关注CVP公众号
扫一扫 浏览移动版用户名：jiyue
访问量：7545
注册日期：
阅读量：1297
阅读量：3317
阅读量：581510
阅读量：466044
51CTO推荐博文
公司最近使用android打包html5的app应用，直接解决了浏览器打开的问题protected&void&onCreate(Bundle&savedInstanceState)&{&&&&&&&&super.onCreate(savedInstanceState);&&&&&&&&&WebView&webView=new&WebView(this);
&&&&&&&&webView.loadUrl("/); //多加上这句话就可以了
&&&&&&&&webView.setWebViewClient(new&MyWebViewClient());
&&&&&}使用时发现所有的js都无法使用来，找来半天终于知道问题在哪里了，使用webview默认是吧js关闭的，因此是不会执行js代码的，这个时候只需要加上一句话就够了webView.getSettings().setJavaScriptEnabled(true);//支持js是的，这句话就够了，true表示支持js false表示不支持js，默认是不支持的，图样啊完整代码如下：package&activity.ysmall.cc.import&android.support.v7.app.ActionBarAimport&android.os.Bimport&android.view.Mimport&android.view.MenuIimport&android.webkit.WebVpublic&class&MainActivity&extends&ActionBarActivity&{&&&&@Override&&&&protected&void&onCreate(Bundle&savedInstanceState)&{&&&&&&&&super.onCreate(savedInstanceState);
&&&&&&&&&WebView&webView=new&WebView(this);
&&&&&&&&webView.getSettings().setJavaScriptEnabled(true);//支持js&&&&&&&&webView.loadUrl("http://www.ysmall.cc/mobile");
&&&&&&&&webView.setWebViewClient(new&MyWebViewClient());
&&&&}&&&&@Override&&&&public&boolean&onCreateOptionsMenu(Menu&menu)&{&&&&&&&&//&Inflate&the&&this&adds&items&to&the&action&bar&if&it&is&present.&&&&&&&&getMenuInflater().inflate(R.menu.menu_main,&menu);&&&&&&&&return&
&&&&}&&&&@Override&&&&public&boolean&onOptionsItemSelected(MenuItem&item)&{&&&&&&&&//&Handle&action&bar&item&clicks&here.&The&action&bar&will&&&&&&&&//&automatically&handle&clicks&on&the&Home/Up&button,&so&long&&&&&&&&//&as&you&specify&a&parent&activity&in&AndroidManifest.xml.&&&&&&&&int&id&=&item.getItemId();&&&&&&&&//noinspection&SimplifiableIfStatement&&&&&&&&if&(id&==&R.id.action_settings)&{&&&&&&&&&&&&return&
&&&&&&&&}&&&&&&&&return&super.onOptionsItemSelected(item);
}bingo，看来还有好多要学的本文出自 “” 博客，请务必保留此出处
了这篇文章
类别：┆阅读(0)┆评论(0)老师，使用WebView加载不了本地静态网页
找不到网页
file:///android_assets/example.html 处的网页不能载入为：
net::ERR_FILE_NOT_FOUND我的网页代码:&html&
&title&百度&/title&
&a href=""&打开百度&/a&
我也是这个问题，你怎么解决的。
写下你的评论...
写下你的评论...
写下你的评论...
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2博客分类：
Android的webView很强大，其实就是一个浏览器，你可以把它嵌入到你想要的位置，我这里遇到两个问题，就是怎么知道网页的加载进度和加载网页时，点击网页里面的链接还是在当前的webview里跳转，不想跳到浏览器那边，解决办法如下：
public class MyWebViewClient extends WebViewClient{
public boolean shouldOverrideUrlLoading(WebView view, String url) {
view.loadUrl(url);
public class MyWebChromeClient extends WebChromeClient{
public void onProgressChanged(WebView view, int newProgress) {
if(newProgress==100){
view.setVisibility(View.VISIBLE);
progressBar.setVisibility(View.INVISIBLE);
public MyWebViewClient webViewClient=new MyWebViewClient();
public MyWebChromeClient webChromeClient=new MyWebChromeClient();
webView.setWebChromeClient(webChromeClient);
webView.setWebViewClient(webViewClient);
实际上就是继承两个浏览器的类，重写里面的方法就可以实现了。
zhujianjia
浏览: 332123 次
来自: 北京
Irrlicht 3d Engine is full open ...
BigDecimal怎么初始化全局变量呢
这是一个程序员应该用的方法吗？求靠谱一点
楼主是天才 真牛逼
记住：显示本地文件时 必须使用APK'&file:/// ...
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'