Android--webView嵌套网页

webView嵌套网页

因为某种原因,我们总是需要展示一些复杂的文本,Html.fromHtml()已经不能满足我们的需求,比如后台可编辑的文本在前端显示起来比较吃力,所以为了解决一些复杂的文本显示就需要用到WebView。

通过phongGap或者extjs jquery mobile等等的移动开发平台开发
其原理就是将一个用HTML5开发的程序通过各种平台打包成apk ios winPhone等等的平台的应用

WebView 主要调用三个方法:LoadUrl、LoadData、LoadDataWithBaseURL.
  1、LoadUrl            直接加载网页、图片并显示.(本地或是网络上的网页、图片、gif)
  2、LoadData           显示文字与图片内容 (模拟器1.5、1.6)
  3、LoadDataWithBase  显示文字与图片内容(支持多个模拟器版本)

1.WebView

  在使用WebView控件时,首先需要在xml布局文件中定义一个WebView控件,定义的方法如下:

这里是要有网络权限的

<WebView
   android:id="@+id/webView"
   android:layout_width="match_parent"
   android:layout_height="match_parent"/>

(1)anGoBack()                   判断是否能够从该网页返回上一个打开的网页

(2)getTitle()、getUrl()        获得当前网页的标题和URL路径

(3)loadUrl(String url)         加载所要打开的网页等等。如下的代码通过使用loadUrl()方法在WebView控件中打开了百度主页。

    private WebView mWebView;
    mWebView = (WebView)this.findViewById(R.id.webView);
    mWebView.loadUrl("http://www.baidu.com/");

2.WebSettings

  WebSettings用来设置WebView的属性状态。WebSettings和WebView存在于同一个生命周期中,可以使用如下的方法获得WebSettings对象

  WebSettings webSettings = mWebView.getSettings();

在创建WebView时,系统会对WebView进行一些默认设置,当我们通过以上的方法得到WebSettings对象后,便可以从WebSettings对象中取出设置WebView的属性和状态

WebSettings提供的一些常用的设置WebView的属性和状态的方法如下:

  (1)setAllowFileAccess(boolean allow);        //设置启用或禁止访问文件数据

  (2)setBuiltInZoomControls(boolean enabled);   //设置是否支持缩放

  (3)setDefaultFontSize(int size);            //设置默认的字体大小

  (4)setJavaScriptEnabled(boolean flag);       //设置是否支持JavaScript

  (5)setSupportZoom(boolean support);       //设置是否支持变焦

3.WebViewClient

WebViewClient主要用来辅助WebView处理各种通知、请求等事件。实现了让新打开的网页在当前的WebView中进行显示,而不是调用Android系统自带的浏览器进行访问。

        webView.setWebViewClient(new WebViewClient() {
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                //如果返回true用webView去打开,为false调用系统浏览器或第三方浏览器。
                return true;
            }
        });

我们可以通过WebView的setWebViewClient()方法,为WebView对象指定一个WebViewClient

        MyWebViewClient myWebViewClient = new MyWebViewClient();
        mWebView.setWebViewClient(myWebViewClient);
        private class MyWebViewClient extends WebViewClient {
            //重写父类方法,让新打开的网页在当前的WebView中显示
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }
        }

可以看到,在如上的代码中,我们通过在子类MyWebViewClient中重写父类WebViewClient的shouldOverrideUrlLoading()方法,

在WebViewClient中同样提供了很多的方法,比如以下一些:

  (1)doUpdateVisitedHistory(WebView view, String url, boolean isReload);             //更新历史记录

  (2)onFormResubmission(WebView view, Message dontResend, Message resend);        //重新请求网页数据

  (3)onLoadResource(WebView view, String url);                       //加载指定网址提供的资源

  (4)onPageFinished(WebView view, String url);                        //网页加载完毕

  (5)onPageStarted(WebView view, String url, Bitmap favicon);               //网页开始加载

  (6)onReceivedError(WebView view, int errorCode, String description, String failingUrl);  //报告错误信息

4.WebChromeClient

WebChromeClient主要用来辅助WebView处理Javascript的对话框、网站图标、网站标题以及网页加载进度等。

同样地,我们可以通过WebView的setWebChromeClient()方法,为WebView对象指定一个WebChromeClient。

在WebChromeClient中,

当网页的加载进度发生变化时,onProgressChanged(WebView view, int newProgress)方法会被调用;

当网页的图标发生改变时,onReceivedIcon(WebView view, Bitmap icon)方法会被调用;

当网页的标题发生改变时,onReceivedTitle(WebView view, String title)方法会被调用。

利用这些方法,我们便可以很容易的获得网页的加载进度、网页的标题和图标等信息了,正如下面的代码所示:

        MyWebChromeClient myWebChromeClient = new MyWebChromeClient();
        mWebView.setWebChromeClient(myWebChromeClient);

        private class MyWebChromeClient extends WebChromeClient {

            //获得网页的加载进度,显示在右上角的TextView控件中
            public void onProgressChanged(WebView view, int newProgress) {
                if(newProgress < 100) {
                    String progress = newProgress + "%";
                    mTextView_progress.setText(progress);
                } else {
                    mTextView_progress.setText(" ");
                }
            }

            //获得网页的标题,作为应用程序的标题进行显示
            public void onReceivedTitle(WebView view, String title) {
                MainActivity.this.setTitle(title);
            }
        }

5.WebView与Javascript

  在WebView中不仅可以运行HTML代码,更重要的是,WebView可以与Javascript互相调用。也就是说,在Javascript中可以获取WebView的内容,与此同时,在WebView中也可以调用Javascript里面的方法。

  下面就来说说如何在WebView中调用Javascript里面的方法。

  这里,我使用了百度地图的API接口(一份内嵌了Javascript的HTML文档),在该接口中提供如下的Javascript方法:

     /*********************************/
     /*           查找地点            */
     /*********************************/
     var city = new BMap.LocalSearch(map,{renderOptions:{map:map,autoViewport:true}});   

     function findPlace(place)
     {
         city.search(place);
   }

  我们要做的就是在WebView中调用findPlace()方法,完成地点的查找。在WebView中调用Javascript里面的方法是通过代码WebView.loadUrl(“javascript:方法名()”)来实现的。如下的代码,从EditText控件中获得用户想要查找的地名,然后调用了Javascript中的findPlace()方法,进行查找。

     public void onClick(View view) {
         switch(view.getId()) {
         case R.id.imagebutton_search:                    //查找地名
             String str = mEditText_input.getText().toString();
             String url = "javascript:findPlace(‘" + str + "‘)";
             mWebView.loadUrl(url);
             break;
         }
     }

  比如,我们对“圆明园”进行查找,可以看到如图2所示的查找结果。

WebView in ScrollView

我们都知道ScrollView和WebView都有滚动的效果,所以我们需要先屏蔽WebView的滚动事件

<ScrollView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:descendantFocusability="blocksDescendants" >

中文乱码

如果出现中文乱码,你可以这样设置

webView.loadData(body, "text/html; charset=utf-8", "utf-8");

Auto Scale

这时候如果后端如果传过来的不是完整的Html,而是只有body部分的内容,那么我们就需要补充并添加一些css样式来达到自适应的效果。

WebView webView = new WebView(this);
webView.setWebViewClient(new SimpleWebViewClient(title));
        webView.getSettings().setDefaultTextEncodingName("utf-8");
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.TEXT_AUTOSIZING);
} else {
     webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
}
webView.loadData(getHtmlData(body), "text/html; charset=utf-8", "utf-8");

别忘了头部的设定:

private String getHtmlData(String bodyHTML) {
    String head = "<head>" +
                "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\"> " +
                "<style>img{max-width: 100%; width:auto; height:auto;}</style>" +
                "</head>";
    return "<html>" + head + "<body>" + bodyHTML + "</body></html>";
}

如何控制WebView的高度,没想到WebView可以自己适应内容最长的高度。

时间: 2024-12-10 05:38:05

Android--webView嵌套网页的相关文章

Android WebView 获取网页数据(html)

1. activity_main.layout <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"       xmlns:tools="http://schemas.android.com/tools"       android:layout_width="match_parent"       android:layout_height=

android WebView 显示网页

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:ori

Android WebView 获取网页的标题

final TextView txtTitle = (TextView) findViewById(R.id.txtTitle); final WebView webView = (WebView)findViewById(R.id.btnWebView); WebChromeClient wvcc = new WebChromeClient() { @Override public void onReceivedTitle(WebView view, String title) { super

Android WebView执行GPU命令的过程分析

Android WebView使用的Chromium引擎,虽然没有自己的GPU进程或者线程,但是却可以执行GPU命令.原来,Android WebView会给它提供一个In-Process Command Buffer GL接口.通过这个接口,Chromium引擎就可以将GPU命令提交给App的Render Thread执行.本文接下来就详细分析Android WebView执行GPU命令的过程. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! 从前面Ch

Android WebView启动Chromium渲染引擎的过程分析

Android WebView加载了Chromium动态库之后,就可以启动Chromium渲染引擎了.Chromium渲染引擎由Browser.Render和GPU三端组成.其中,Browser端负责将网页UI合成在屏幕上,Render端负责加载网页的URL和渲染网页的UI,GPU端负责执行Browser端和Render端请求的GPU命令.本文接下来详细分析Chromium渲染引擎三端的启动过程. 老罗的新浪微博:http://weibo.com/shengyangluo,欢迎关注! Andro

Android使用WebView显示网页

在Android开发过程中,会遇到需要显示网页的需求,或者需要用webview控件来达到某个效果.我这段时间在做CSDN博客的客户端,使用webview来显示博文内容,一是因为解析博文内容再适配比较麻烦,并且效果很不理想,后来想到直接用webview来显示,将博文原汁原味的呈现出来. webview使用起来比较容易,但是想要达到比较理想的效果还需要很多摸索.我做的CSDNBlog客户端,现在基本可以使用,已经在进行版本迭代了,但是博文的webview显示效果依然不太满意,主要是因为图片的缩放问题

Android中WebView获取网页中标题 ,内容, 图片的方法

如题,在Android中WebView获取网页中标题 ,内容, 图片的方法 首先是获取标题,在new WebChromeClient(){}中重写onReceivedTitle()方法 @Override public void onReceivedTitle(WebView view, String title) { super.onReceivedTitle(view, title); // loge.e("__页面标题__"+title); } 获取内容,是参考的这边的 http

Android WebView访问SSL证书网页(onReceivedSslError)

Android WebView访问https SSL证书网页,如淘宝,需要在onReceivedSslError添加SSL支持 webview.setWebViewClient(new WebViewClient() { @Override public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) { // 不要使用super,否则有些手机访问不了,因为包含了一条 handler.c

Android基础入门教程——7.5.6 WebView处理网页返回的错误码信息

Android基础入门教程--7.5.6 WebView处理网页返回的错误码信息 标签(空格分隔): Android基础入门教程 本节引言: 嘿嘿,假如你们公司是做HTML5端的移动APP的,就是通过WebView来显示网页的,假如你访问的网页 不存在,或者其他错误,报404,401,403,30X等错误的状态码,如果直接弹出WebView默认的错误 提示页面,可能显得不那么友好,我们可以重写WebViewClient的onReceivedError()方法来实现我们 想要的效果,一般的做法有两