WebView的用法

基本用法

布局文件配置WebView

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

WebView加载网页

 　　　　//加载网页链接
        mWebView.loadUrl("http://www.itheima.com");
        //加载本地assets目录下的网页
        mWebView.loadUrl("file:///android_asset/demo.html");

WebView基本设置

        WebSettings settings = mWebView.getSettings();
        settings.setBuiltInZoomControls(true);// 显示缩放按钮(wap网页不支持)
        settings.setUseWideViewPort(true);// 支持双击缩放(wap网页不支持)
        settings.setJavaScriptEnabled(true);// 支持js功能

设置WebViewClient

  mWebView.setWebViewClient(new WebViewClient() {
            // 开始加载网页
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                System.out.println("开始加载网页了");
            }

            // 网页加载结束
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                System.out.println("网页加载结束");
            }

            // 所有链接跳转会走此方法
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                System.out.println("跳转链接:" + url);
                view.loadUrl(url);// 在跳转链接时强制在当前webview中加载

                //此方法还有其他应用场景, 比如写一个超链接<a href="tel:110">联系我们</a>, 当点击该超链接时,可以在此方法中获取链接地址tel:110,
           　　 //解析该地址,获取电话号码, 然后跳转到本地打电话页面, 而不是加载网页, 从而实现了webView和本地代码的交互
                return true;
            }
        });

设置WebChromeClient

 mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                // 进度发生变化
                System.out.println("进度:" + newProgress);
            }

            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                // 网页标题
                System.out.println("网页标题:" + title);
            }
        });

WebView加载上一页和下一页

mWebView.goBack();//跳到上个页面
mWebView.goForward();//跳到下个页面
mWebView.canGoBack();//是否可以跳到上一页(如果返回false,说明已经是第一页)
mWebView.canGoForward();//是否可以跳到下一页(如果返回false,说明已经是最后一页)

WebView高级用法

缓存设置

　　　　WebSettings settings = mWebView.getSettings();
        //只要本地有，无论是否过期，或者no-cache，都使用缓存中的数据
        settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
        //只加载缓存
        settings.setCacheMode(WebSettings.LOAD_CACHE_ONLY);
        //根据cache-control决定是否从网络上取数据
        settings.setCacheMode(WebSettings.LOAD_DEFAULT);
        //不加载缓存
        settings.setCacheMode(WebSettings.LOAD_NO_CACHE);

什么是cache-control?

cache-control是在请求网页时服务器的响应头,此响应头用于决定网页的缓存策略.

　　 常见的取值有public(所有内容都将被缓存), private(内容只缓存到私有缓存中),no-cache(所有内容都不会被缓存),max-age=xxx(缓存的内容将在 xxx 秒后失效)等等

如图所示:

清理缓存

   最简便的方式:
        mWebView.clearCache(true);

        另外一种方式:
        //删除缓存文件夹
        File file = CacheManager.getCacheFileBaseDir(); 

           if (file != null && file.exists() && file.isDirectory()) {
            for (File item : file.listFiles()) {
             item.delete();
            }
            file.delete();
           }
        //删除缓存数据库
        context.deleteDatabase("webview.db");
        context.deleteDatabase("webviewCache.db");

Cookie设置

        CookieSyncManager.createInstance(this);
        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.setAcceptCookie(true);
        String cookie = "name=xxx;age=18";
        cookieManager.setCookie(URL, cookie);
        CookieSyncManager.getInstance().sync();

获取Cookie

        CookieManager cookieManager = CookieManager.getInstance();
        String cookie = cookieManager.getCookie(URL);

清除Cookie

        CookieSyncManager.createInstance(context);
        CookieManager cookieManager = CookieManager.getInstance();
        cookieManager.removeAllCookie();
        CookieSyncManager.getInstance().sync();

Demo演示:

package com.loaderman.webviewdemo;

import android.graphics.Bitmap;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        WebView mWebView = (WebView) findViewById(R.id.wv_test);
        //加载网页链接
        mWebView.loadUrl("http://www.baidu.com");
        //加载本地assets目录下的网页
        //mWebView.loadUrl("file:///android_asset/demo.html");
        WebSettings settings = mWebView.getSettings();
        settings.setBuiltInZoomControls(true);// 显示缩放按钮(wap网页不支持)
        settings.setUseWideViewPort(true);// 支持双击缩放(wap网页不支持)
        settings.setJavaScriptEnabled(true);// 支持js功能
        mWebView.setWebChromeClient(new WebChromeClient() {
            @Override
            public void onProgressChanged(WebView view, int newProgress) {
                super.onProgressChanged(view, newProgress);
                // 进度发生变化
                System.out.println("进度:" + newProgress);
            }

            @Override
            public void onReceivedTitle(WebView view, String title) {
                super.onReceivedTitle(view, title);
                // 网页标题
                System.out.println("网页标题:" + title);
            }
        });
        mWebView.setWebViewClient(new WebViewClient() {
            // 开始加载网页
            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
                super.onPageStarted(view, url, favicon);
                System.out.println("开始加载网页了");
            }

            // 网页加载结束
            @Override
            public void onPageFinished(WebView view, String url) {
                super.onPageFinished(view, url);
                System.out.println("网页加载结束");
            }
            // 所有链接跳转会走此方法
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                System.out.println("跳转链接:" + url);
                view.loadUrl(url);// 在跳转链接时强制在当前webview中加载
                //此方法还有其他应用场景, 比如写一个超链接<a href="tel:110">联系我们</a>, 当点击该超链接时,可以在此方法中获取链接地址tel:110,
　　　　　　　　　　//解析该地址,获取电话号码, 然后跳转到本地打电话页面, 而不是加载网页, 从而实现了webView和本地代码的交互
                return true;
            }
        });
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.loaderman.webviewdemo.MainActivity">

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

添加网络权限:

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

效果图:

运行就直接打开网页百度首页面

直接看日志:


WebView的应用场景

　　WebView的应用场景我们无需多讲, 此处我只提一点: 随着html5的普及, 很多app都会内嵌webview来加载html5页面, 而且h5做的和app原生控件极其相似, 那么我们如何辨认某个页面使用h5做的还是用原生控件做的呢?

　　打开开发者选项, 你会看到这样一个选项:显示布局边界

勾选之后,所有原生控件布局的边框都会显示出来

我们现在在这种状态下打开一个WebView看一眼(这是微信钱包-滴滴出行的页面)

如果是WebView的话, 只有在WebView边缘才会显示一个边框, WebView内部是没有边框的;如果是原生控件,怎么可能边框这么少呢? 从而我们可以断定,微信的滴滴出行页面一定是用WebView加载网页实现的, 而不是系统原生控件.

时间： 2024-08-08 09:27:55

WebView的用法的相关文章

android开发步步为营之63:webview常用用法

webview是常用的组件,特别是当前h5这么流行的情况下,本文介绍webview在项目中的常规用法.一般是webview加载的过程前会对当前网络做判断,没有网络的情况下给个提示.有网络的情况下配一个progressbar显示当前进度,好的,上代码.       第一步:设计页面 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schem

android学习十九（WebView的用法）

android提供了一个WebView控件,借助它我们就可以在自己的应用程序中嵌入一个浏览器,从而轻松的展示各种各样的网页.下面来学习下简单的用法.新建一个WebViewTest项目,然后修改activity_main.xml中的代码,如下所示: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/

iOS WebView的用法

一.UIWebView 可以加载和显示某个URL的网页,也可以显示基于HTML的本地网页或部分网页: a. 加载 URL WebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 44, 320, 400)]; NSString *path = @"http://www.baidu.com"; NSURL *url = [NSURL URLWithString:path]; [WebView loadRequest:[NSURLR

WebView&#183;开发指南

WebView·开车指南 作者:凌俊琦链接:https://zhuanlan.zhihu.com/p/22247021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. Tips 由于WebView的用法实在太多,如果您只是想查询某个功能的使用——建议Ctrl+F(Commad+F)在本页面搜索关键字查找. 文章给前半部分大多是方法的介绍,若嫌琐碎可直接拖到最后看代码演示. Thanks for reading~! (?ε? ) 前言 喝酒不开车,开车不喝酒. 目录

WebView的使用及实战

这篇博客主要讲解一下问题 - webView 的 基本使用 - webView怎样配置缓存 - webView请求错误时候的处理 - webView cookie的同步与清除 - webView 下载文件的两种方法 - webView的 一些扩展使用 思路图如下 大概的效果图如下 webView的基本使用 大概可以分为以下步骤 - 配置权限 - 创建webView - 配置webView(是否支持js,是否由系统浏览器打开) - 加载数据 第一步,别忘了 在AndroidMainfest中 添加

使用WebView视图显示网页-----迷你浏览器

Android提供了WebView组件,表面上来看,这个组件与普通ImageView差不多,但实际上,这个组件的功能要强大得多,WebView组件本身就是一个浏览器实现,它的内核基于开源WebKit引擎.如果我们对WebView进行一些美化.包装,可以非常轻松地开发出自己的浏览器. WebView的用法与普通ImageView组件的用法基本相似,它提供了大量方法来执行浏览器操作: 1.void  goBack():后退. 2.void  goForward():前进. 3.void  loadU

iOS开发之WebView

做iOS的应用也有一段时间了,在之前的demo中一直没有机会用到WebView,今天就查缺补漏一下,使用一下WebView.最早接触WebView是在Android中接触的,iOS中的WebView的用法也是挺简单的.本篇博客没有什么高深的技术,只是对webView的应用.从字面意思可以看出WebView就是用来加载网页的视图,和手机上的浏览器类似. 1.之前用storyboard拖控件时只是看着WebView在哪里静静的躺着(如下图所示),一直没有用过,如果想使用的话也很简单,就是把web v

Android深入理解WebView——上

摘要 作为Android开发者,我们都知道在手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件.今天就为大家讲讲Android中WebView的详细使用方法 本文原创,转载请注明地址:http://blog.kymjs.com/ 作为Android开发者,我们都知道在手机中内置了一款高性能 webkit 内核浏览器,在 SDK 中封装为一个叫做 WebView 组件. 在开发过程中应该注意几点: 1.这是最基本的 AndroidManifest.

【Flutter学习】基本组件之Webview组件

1.添加依赖 dependencies: flutter_webview_plugin: ^0.2.1+2 2.导入库 import 'import 'package:flutter_webview_plugin/flutter_webview_plugin.dart'; //导入前需要配置 3.属性 const WebviewScaffold({ Key key, this.appBar, @required this.url, this.headers,// this.withJavascr