原来你是这样的WebView(一)

最新推荐文章于 2023-09-18 14:38:36 发布
最新推荐文章于 2023-09-18 14:38:36 发布
阅读量1.3k 收藏
点赞数 2
分类专栏： Android经验教程 文章标签： webkit html5 webview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SmallCheric/article/details/52338322
版权

随着Html5的快速发展,越来越多的App对WebView的使用越来越频繁,不再像以前一样只需要调用webview.loadurl(url)就可以满足基本的使用,本文就对目前WebView的常用用法进行总结介绍,希望能帮到一些小伙伴…

1. WebView是个什么鬼

一个用来展示web界面的View, WebView可以在自己的浏览器或者Activity中进行内容展示,采用了WebKit渲染引擎来显示网页,包括历史导航,前一页,后一页,放大,缩小,执行搜索文本等功能;如果你想在项目中使用WebView,需要添加一个访问网络的权限:

uses-permission android:name=”android.permission.INTERNET”

2. WebView的基本使用

2.1 发送Intent调用系统浏览器打开加载页

WebView在默认情况下,不支持浏览器中例如widget插件,默认关闭Js交互,并忽略网页上将被忽略;如果你只想展示一个页面,但是并不需要交互,那使用webview是比较合适的; 如果你想实现一个全面的web页面,那么你可以开启一个URL意图来使用浏览器打开当前URL,但一般为了用户体验,这种用法的使用还是比较少的;示例如下

Uri uri = Uri.parse("http://www.baidu.com");
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);

2.2 调用webview.loadUrl(url)来加载

2.2.1 webview.loadUrl(url)加载网络地址

当然,多数情况下,我们会在layout文件中定义一个webview控件,然后在Activity中的onCreate里面加载我们想要看到的url界面,使用如下:

    //第一种写法,常用格式
    WebView webView = (WebView) findViewById(R.id.webview);
    webView.loadUrl("http://www.baidu.com");
    //注意:如果不想弹出系统浏览器进行界面显示,需要重写该方法
    webView.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            //返回值没有关系
            return super.shouldOverrideUrlLoading(view,url);
        }
    });

    //第二种写法,直接在setContentView中传入webview
    WebView webView = new WebView(this);
    webView.loadUrl("http://www.baidu.com");
    setContentView(webView);
    webView.setWebViewClient(new WebViewClient(){
        @Override
        public boolean shouldOverrideUrlLoading(WebView view, String url) {
            view.loadUrl(url);
            //返回值没有关系
            return super.shouldOverrideUrlLoading(view,url);
        }
    });

注意:如果不想弹出系统浏览器进行界面显示,需要重写shouldOverrideUrlLoading方法

2.2.2 webview.loadUrl(url)加载apk包内html文件

webview不但可以加载网络页面,也可以加载apk包下的html文件,将html文件放在项目assets资源目录下,然后调用以下代码即可

webView.loadUrl("file:///android_asset/test.html");
2.2.3 webview.loadUrl(url)加载SD卡下的html文件

webview加载SD卡根目录下test.html文件代码如下:

webView.loadUrl("content://com.android.htmlfileprovider/sdcard/test.html");

2.3 webview加载HTML格式字符串

除了可以加载网页之外,webview也可以加载HTML格式的字符串;主要是两个方法,一个webView.loadData(data,mimeType,encoding);来展示,一个是webView.loadDataWithBaseURL(baseUrl,data,mimeType,encoding,historyUrl);. 如果是带有中文的数据,默认显示会展示乱码,可以有两种方式来解决乱码;我们先来看一下如果都是英文数据该如何展示:

String data = "<html><body>You scored <b>Egglish</b> points.</body></html>";
webView.loadData(summary, "text/html", null);

展示效果如图所示:

如果包含了中文,会显示乱码:

第一种修改方式,可以在loadData中更改第二个参数,注意:如果将第三个参数更改为”UTF-8”,依然会是乱码;正确修改如下:

String data = "<html><body>You scored <b>中文测试</b> points.</body></html>";
webView.loadData(data, "text/html; charset=UTF-8", null);

显示效果如下:

原因如下:

如果用 loadDataWithBaseURL时,如果不传入URL时,刷新会造成白屏,因为刷新时调用的的是reload方法,reload是根据传入的URL进行一次重新加载即再次loadUrl(url),不传入URL时,默认的的URL是about:blank;使用loadData,刷新只是从缓存里面取，但是在4.0以上的,如果按照API里所写的loadData(data, “UTF-8”, null);时会乱码,如果写成loadData(data, "text/html; charset=UTF-8", null);loadData最终的机制是会把传入的三个参数拼接在一起,然后再进行loadUrl操作,参数就是data, "text/html; charset=UTF-8", null这三个进行拼装,加入text/html; charset=UTF-8就相当于限定了页面的字符

上面的一种修改方式可以适配大多数机型,但依然有少部分机型会显示乱码,可能与系统底层文件修改有关,所以就有了另一种修改方式,调用loadDataWithBaseURL方法,修改如下:

String data = "<html><body>You scored <b>中文测试</b> points.</body></html>";
webView.loadDataWithBaseURL(null,summary,"text/html","UTF-8",null);

3. 自定义你的webview

WebView除了基本的用法以外,还可以进行自定义来达到你想要的效果,比如创建一个匿名WebChromeClient来辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等;也可以创建一个匿名WebViewClient ,来帮助WebView处理各种通知、请求事件等;当然,也可以启用 WebSettings,来开启Js交互等等,下面我们就来逐一介绍.

3.1 WebChromeClient

方法中的代码均有Android端自行处理,实现方式可以写一个匿名内部类,或者写一个WebChromeClient类,然后调用webview.setWebChromeClient(mWebChromeClient);代码示例如下:

webView.setWebChromeClient(new WebChromeClient() {
    //获取网页的加载进度,因有的网页是采用分模块加载,所以进度值并非只是一次1~100;可以为: 29~100;30~100;
    @Override
    public void onProgressChanged(WebView view, int progress) {
        Log.e(TAG,"progress="+progress);
    }

    //获取当前网页中的Title值来设置给自己的title
    //注意:如果无网,获取的 title= 找不到网页
    //所以开发者可以在接受到onReceiveError的回调后,不要在使用当前获取的title值了
    @Override
    public void onReceivedTitle(WebView view, String title) {
        Log.e(TAG,"title="+title);
    }
    //获取当前网页的icon,拿到后,会获取一个Bitmap对象,你想干嘛就干嘛
    @Override
    public void onReceivedIcon(WebView view, Bitmap icon) {
        super.onReceivedIcon(view, icon);
    }

});

以上为简单用法,下面我们对 onJsAlert(), onJsPrompt(),onJsConfirm()进行逐一分析;在WebChromeClient类里可以重写这三个方法，此时WebView中加载的html中如果执行alert("alert...."); , confirm("confirm..."); , prompt("prompt...", "defaultValue");这三个方法，该类就会监听到执行对应的三个方法。我们可以让这三个方法的返回值为true ，即自定义此方法。在里面写入自己定义的Dialog，便可实现html与Activity交互。

注意 JsResult 此类需要在操作时，如果操作则 result.cofirm(). 取消则 result.cancel(); 还必须这每一个方法中写入 dialog.setOnkeyListener(); 方法来监听Back键，listener中 　　 要写 result.cancel(); 否则系统没有消费这个事件，会出错。

3.1.1 自定义onJsAlert

什么是Javascript Alert?

Alert是一种提示信息或者警告信息的对话框,一旦显示到用户面前,只能点击OK才能关闭.

通常一般的实现类似:

<html>
   <SCRIPT type="text/javascript">
       alert('This is alert dialog !')
   </SCRIPT>
</html>

效果图如下:

onJsAlert API 介绍:

public boolean onJsAlert (WebView view, String url, String message, JsResult result)

Tell the client to display a javascript alert dialog. If the client returns true, WebView will assume that the client will handle the dialog. If the client returns false, it will continue execution.

告知客户端将显示一个alert dialog; 如果方法返回了true, 那么webview就会来自行处理这个dialog; 如果返回了false,则会继续执行下去,webview不进行处理;

在Android中,我们一般重写onJsAlert方法,会将参数中的message信息用Toast的形式弹出以告知用户,代码如下;

@Override
   public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
       Toast.makeText(getApplicationContext(), message, Toast.LENGTH_LONG).show();
       因为没有绑定事件，需要强行confirm,否则页面会变黑显示不了内容。
       result.confirm();
       return true;
   }

或者我们可以自行弹出一个Dialog,覆盖默认的显示界面,代码如下:

@Override
   public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
       final AlertDialog.Builder builder = new AlertDialog.Builder(view
               .getContext());
       builder.setTitle("测试自定义对话框").setMessage(message)
               .setPositiveButton("确定", null);
       //这里不需要绑定按键事件
       //可自行屏蔽keycode按键
       builder.setOnKeyListener(new DialogInterface.OnKeyListener() {
           @Override
           public boolean onKey(DialogInterface dialog, int keyCode,
                                KeyEvent event) {
               Log.e(TAG,"keyCode==" + keyCode + "event=" + event);
               return true;
           }
       });
       //禁止响应按back键的事件
       builder.setCancelable(false);
       AlertDialog dialog = builder.create();
       dialog.show();
       result.confirm();//因为没有绑定事件，需要强行confirm,否则页面会变黑显示不了内容。
       return true;
   }
3.1.2 自定义onJsConfirm

用法与onJsAlert基本一样,直接上代码:

@Override
   public boolean onJsConfirm(WebView view, String url, String message,
                              final JsResult result) {
       final AlertDialog.Builder builder = new AlertDialog.Builder(view
               .getContext());
       builder.setTitle("webview测试confirm对话框")
               .setMessage(message)
               .setPositiveButton("确定", new DialogInterface.OnClickListener() {
                   @Override
                   public void onClick(DialogInterface dialog, int which) {
                       result.confirm();
                   }
               })
               .setNeutralButton("取消", new DialogInterface.OnClickListener() {
                   @Override
                   public void onClick(DialogInterface dialog, int which) {
                       result.cancel();
                   }
       });
       builder.setOnCancelListener(new DialogInterface.OnCancelListener() {
           @Override
           public void onCancel(DialogInterface dialog) {
               result.cancel();
           }
       });

       //屏蔽keycode的按键，避免按键后导致对话框消息而页面无法再弹出对话框的问题
       builder.setOnKeyListener(new DialogInterface.OnKeyListener() {
           @Override
           public boolean onKey(DialogInterface dialog, int keyCode,
                                KeyEvent event) {
               Log.e(TAG, "keyCode==" + keyCode + "event=" + event);
               return true;
           }
       });
       //禁止响应按back键的事件
       builder.setCancelable(false);
       AlertDialog dialog = builder.create();
       dialog.show();
       return true;
   }
3.1.3 自定义 onJsPrompt

直接上代码,大致用法一样,只不过个别参数不同:

@Override
   public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, final JsPromptResult result) {
       final AlertDialog.Builder builder = new AlertDialog.Builder(view
               .getContext());
       builder.setTitle("webview测试prompt对话框").setMessage(message);

       final EditText et = new EditText(view.getContext());
       et.setSingleLine();
       et.setText(defaultValue);
       builder.setView(et);
       builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
               result.confirm(et.getText().toString());
           }
       }).setNeutralButton("取消", new DialogInterface.OnClickListener() {
           @Override
           public void onClick(DialogInterface dialog, int which) {
               result.cancel();
           }
       });

       //屏蔽keycode按键，避免按键后导致对话框消息而页面无法再弹出对话框的问题
       builder.setOnKeyListener(new DialogInterface.OnKeyListener() {
           @Override
           public boolean onKey(DialogInterface dialog, int keyCode,
                                KeyEvent event) {
               Log.e(TAG, "keyCode==" + keyCode + "event=" + event);
               return true;
           }
       });

       //禁止响应按back键的事件
       builder.setCancelable(false);
       AlertDialog dialog = builder.create();
       dialog.show();
       return true;
   }

4. 使用websettings让你的webview更加强大

webview获取到websettings之后,可以对当前的webview进行各种设置,如 Js交互开启,缩放,支持插件等等,我们直接以代码为例,代码中对每个功能点都进行了详细说明,请小伙伴参阅;

WebSettings webSettings = webView.getSettings();

   //支持获取手势焦点，输入用户名、密码或其他
   webView.requestFocusFromTouch();
   //支持js交互
   webSettings.setJavaScriptEnabled(true);
   webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口

   //设置自适应屏幕，需要与setLoadWithOverviewMode合用
   webSettings.setUseWideViewPort(true);  //可以将图片调整到适合webview的大小
   webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小

   //支持缩放，默认为true。是setBuiltInZoomControls的前提。
   //若setSupportZoom是false，则该WebView不可缩放，这个不管setBuiltInZoomControls设置什么都不能缩放。
   webSettings.setSupportZoom(true);
   webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件

   webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件

   //提高渲染的优先级
   webSettings.setRenderPriority(WebSettings.RenderPriority.HIGH);

   webSettings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN); //支持内容重新布局
   webSettings.supportMultipleWindows();  //支持多窗口
   webSettings.setAllowFileAccess(true);  //设置可以访问文件
   webSettings.setLoadsImagesAutomatically(true);  //支持自动加载图片
   webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式

好了,上面就是webview的一些简单用法,后面我们将对webview的缓存机制,前进回退操作,与js互调,避免webview内存泄露等问题进行逐一分析,希望我的文字能在你需要的时候帮到你, 愿大家有美好的一天…..

SmallCheric
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webview最全面详解（一）了解官方文档，Android攒了一个月的面试题及解答
m0_64383736的博客
12-09 403
Uri uri = Uri.parse(“https://www.example.com”); Intent intent = new Intent(Intent.ACTION_VIEW, uri); startActivity(intent); See Intent for more information. To provide a WebView in your own Activity, include a in your layout, or set the entire Activity win
【基础】WebView浏览器组件
weixin_43526787的博客
06-27 5388
ad
关于安卓webview的loadUrl和reload方法缓存策略的区别发现记录
HAPP NEW JAVA
08-26 1万+
现象记录: loadUrl是会带上Etag，走浏览器的缓存策略 reloadurl是不会带上Etag,不会走浏览器的缓存策略
webview详解
zzz_zlp的博客
12-08 8014
一、基础知识 1、webview入门知识 1.我们通常是用浏览器来浏览网页，你很清楚的知道你正在使用浏览器，要么是PC客户端，要么是手机上的app。但是webview是一个嵌入式的浏览器，是嵌入在原生应用中的，你可能都意识不到你在用浏览器。 2.传统浏览器分为两个部分，UI(地址栏、导航栏)和浏览器引擎。webview就是原生应用中的浏览器引擎。 3.webview只是一个可视化的组件，是作为原生APP的视觉部分。 4.用webview展示的内容是不需要存储在本地的，可以直接从服务器获取。 5.这种灵活性打
什么是webview ？
暖暖的博客
02-02 2万+
Andoid 平台，SDK 中有一个控件叫 WebView；
WebView功能详解
weixin_43004856的博客
04-10 2191
Android WebView在Android平台上是一个特殊的View，它能用来显示网页，这个WebView类可以被用来在app中仅仅显示一张在线的网页，当然还可以用来开发浏览器。WebView内部实现是采用渲染引擎(WebKit)来展示view的内容，提供网页前进后退、网页放大、缩小、搜索等功能。WebView是一个基于WebKit引擎、展现Web页面的控件，Android的WebView在低版本和高版本采用了不同的WebKit版本内核。回到顶部。
这是一份全面&详细的Webview使用攻略
04-17
这是一份全面&详细的Webview使用攻略
Android WebView打开网页一片空白的解决方法
08-26
主要介绍了Android WebView打开网页一片空白的解决方法，试了很多方法，最后记录一下，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
WebView2Samples
05-17
WebView2Samples.sln - 一个集体解决方案，包括WebView2APISample.vcxproj、WebView2SampleWinComp.vcxproj、WebView2WpfBrowser.csproj、WebView2WindowsFormsBrowser.csproj、WV2DeploymentWiXCustomActionSample...
Android中WebView返回到上一个网页
04-26
最近写项目，有个功能是webView中的网页返回到上个页面，我在网上找了一下，总结了一下，把demo上传到这，和大家分享学习
一个简单的 webview
01-18
这是一 个加载weburl， 自定义加载的网页， 然后打包发客户， 图像自行修改
Android：这是一份全面 & 详细的Webview使用攻略
liuno0的博客
09-13 4275
前言 现在很多App里都内置了Web网页（Hybrid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图 京东首页 那么这种该如何实现呢？其实这是Android里一个叫WebView组件实现 今天，我将献上一份全面介绍 WebView的常见用法。 目录 示意图 1. 简介 WebView是一个基于webkit引擎、展现web页面的控件。 Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了.
webview是什么，给小白的简单介绍
weixin_38415876的博客
03-14 2万+
最近在学习uni-app，也会一直更新关于uni-app学习中自己遇到的问题和心得。 从uni-app的介绍看起，碰到了 ‘webview’ 一词，有必要搜罗一番。 webview是什么，给小白的简单介绍 百度知道 Webview含义：WebView也就是我们熟悉的“网络视图”，能加载并显示网页，可以将其视为一个浏览器。主要用于展示网络请求后的内容，就是将网络地址请求的内容展示在里面。 使用...
WebView的使用详解
最新发布
LJQDMY的博客
09-18 1825
WebView是一个基于webkit引擎、展现web页面的控件。Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4后直接使用了Chrome。一般来说Webview可单独使用，可联合其子类一起使用，下面会介绍几种:1.Webview自身的常见方法；2.Webview的最常用的子类3.（WebSettings类、WebViewClient类、WebChromeClient类)Android和Js的交互3.1 Webview常用方法3.1.1 加载URL。
Webview是什么？
Lele_MM的博客
10-10 1万+
1.webview是什么？作用是什么？和浏览器有什么关系？ Webview 是一个基于webkit引擎，可以解析DOM 元素，展示html页面的控件，它和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。（chrome浏览器也是基于webkit引擎开发的，Mozilla浏览器是基于Gecko引擎开发的） Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4...
Carson带你学Android：最全面的Webview使用详解
热门推荐
Carson带你学Android
09-28 27万+
前言 现在很多App里都内置了Web网页（Hyprid App），比如说很多电商平台，淘宝、京东、聚划算等等，如下图 那么这种该如何实现呢？其实这是Android里一个叫WebView的组件实现的。今天我将全面介绍WebView的常用用法。 目录1. 简介WebView是一个基于webkit引擎、展现web页面的控件。 Android的Webview在低版本和高版本采用了不同的webkit版本内
Android 之 WebView (网页视图)基本用法
leyang0910的博客
07-08 5976
答：Android内置webkit内核的高性能浏览器,而WebView则是在这个基础上进行封装后的一个 控件,WebView直译网页视图,我们可以简单的看作一个可以嵌套到界面上的一个浏览器控件！
WebView使用loadUrl和loadData的区别造成的问题
時を越える笑顔
12-26 2994
在使用WebView时我们比较熟悉的加载html的两个方法，一个是loadUrl，另一个是loadData，这两个方法的函数签名分别是： public void loadUrl(String url) public void loadData(String data, String mimeType, String encoding) 这两个WebView函数由于加载时loadData方法实现存在一些问题，它无法支持一些特殊的标点符号进行判断处理，其实现和loadUrl差别巨大，因此会有一些很奇怪的问
初步理解 WebView
油墨香^-^的博客
09-07 2569
详细了解这些 bridge 的内容超出了本文的范围，但要点如下：为 Web 编写的相同 JavaScript 不仅可以在 WebView 中运行，还可以调用原生 API 并帮助你的应用更深入地集成酷炫的系统级功能，如传感器，存储，日历/联系人等。事实上，这些应用所做的唯一原生操作就是托管 WebView，而 WebView 又加载 Web 内容和用户交互的所有 UI。如果你必须使用纯原生应用，不仅需要为构建应用的每个平台更新项目，你可能必须经历耗时的应用审核过程才能使你的更新在所有的应用商店获取到。
webView是什么东西
07-22
WebView是一种用于在应用程序中显示Web内容的组件。它是Android平台提供的一个类，可以嵌入到应用程序的布局中，并加载和显示网页内容。WebView允许开发人员在应用程序中显示网页、执行JavaScript代码、处理用户交互，并与网页内容进行交互。 WebView提供了一些常见的功能，如加载网页、后退和前进导航、加载本地HTML文件、处理网页表单、拦截URL请求等。开发人员可以使用WebView来创建内置的浏览器功能、展示动态内容、集成第三方Web应用等。 在Android开发中，可以通过编写Java代码或使用布局文件来创建和配置WebView。然后，可以使用WebView的方法和回调来控制和处理加载的网页内容。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值