Android中WebView的基本配置与填坑记录大全

Android中WebView的基本配置与填坑记录大全

本文将详细介绍Android中WebView的基本配置和一些坑点记录。WebView是Android中经常用到的控件,它能够方便地显示Web页面或者本地HTML页面,同时也支持JavaScript交互。

1. 添加依赖

build.gradle的dependencies中添加如下依赖:

implementation 'androidx.webkit:webkit:1.4.0'

2. 添加网络权限

AndroidManifest.xml中添加如下权限:

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

3. 布局文件中添加WebView

在布局文件中添加WebView:

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

4. 初始化WebView

在Activity的onCreate方法中,获取WebView实例并进行一些基本配置:

WebView webView = findViewById(R.id.web_view);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true); // 开启JavaScript支持
settings.setCacheMode(WebSettings.LOAD_NO_CACHE); // 不使用缓存

5. 加载Web页面

可以通过loadUrl方法加载Web页面:

webView.loadUrl("https://www.example.com");

也可以通过loadData方法加载HTML页面:

String html = "<html><h1>Hello world</h1></html>";
webView.loadData(html, "text/html", "UTF-8");

6. WebView与JavaScript交互

6.1 WebView调用JavaScript方法

通过evaluateJavascript方法调用JavaScript方法:

webView.evaluateJavascript("javascript:alert('hello')", null);

6.2 JavaScript调用WebView方法

在WebView中添加JavaScript接口:

public class WebViewJavaScriptInterface {
    @JavascriptInterface
    public void showMessage(String message) {
        Toast.makeText(MainActivity.this, message, Toast.LENGTH_SHORT).show();
    }
}

webView.addJavascriptInterface(new WebViewJavaScriptInterface(), "android");

在JavaScript代码中调用:

android.showMessage("hello");

填坑记录

1. WebView加载页面时如何统一携带请求头

在WebView加载页面时,可以通过WebViewClient的onPageStarted方法来统一携带请求头:

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        Map<String, String> headers = new HashMap<>();
        headers.put("User-Agent", "Mozilla/5.0");
        view.loadUrl(url, headers);
    }
});

2. WebView页面缓存问题

在WebSettings中设置CacheMode为LOAD_NO_CACHE可以禁用WebView缓存。如果需要缓存,则需要设置缓存路径和缓存模式:

String cacheDirPath = getFilesDir().getAbsolutePath() + "/webcache";
settings.setAppCachePath(cacheDirPath);
settings.setAllowFileAccess(true);
settings.setAppCacheEnabled(true);
settings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);

同时,在WebViewClient中处理缓存:

webView.setWebViewClient(new WebViewClient() {
    @Override
    public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) {
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) {
            return super.shouldInterceptRequest(view, request);
        }
        String url = request.getUrl().toString();
        WebResourceResponse response = null;
        try {
            URLConnection connection = new URL(url).openConnection();
            InputStream inputStream = connection.getInputStream();
            Map<String, List<String>> headers = connection.getHeaderFields();
            String mimeType = connection.getContentType();
            String encoding = connection.getContentEncoding();
            response = new WebResourceResponse(mimeType, encoding, inputStream);
            response.setResponseHeaders(headers);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return response;
    }
});

示例说明

示例1:WebView加载百度页面

在Activity中添加如下代码:

WebView webView = findViewById(R.id.web_view);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        super.onPageStarted(view, url, favicon);
        Map<String, String> headers = new HashMap<>();
        headers.put("User-Agent", "Mozilla/5.0");
        view.loadUrl(url, headers);
    }
});
webView.loadUrl("https://www.baidu.com");

示例2:WebView加载本地HTML页面

在Activity中添加如下代码:

WebView webView = findViewById(R.id.web_view);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
String html = "<html><h1>Hello world</h1></html>";
webView.loadData(html, "text/html", "UTF-8");

总结

本文介绍了Android中WebView的基本配置和一些坑点记录。希望本文能够帮助你更好地使用WebView。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:Android中WebView的基本配置与填坑记录大全 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript 中级笔记 第一章

    JavaScript 中级笔记 第一章攻略 简介 本章节主要介绍了一些 JavaScript 的高级概念。其中包括了 JavaScript 中的函数,作用域,闭包与 this 等高级特性。本章给出了这些高级特性在 JavaScript 中的实现方法,加深了读者对 JavaScript 中这些概念的理解。 JavaScript 函数 JavaScript中的函…

    JavaScript 2023年5月18日
    00
  • 手机开发必备技巧:javascript及CSS功能代码分享

    手机开发必备技巧:javascript及CSS功能代码分享 前言 在移动互联网领域,手机端Web开发已经成为开发者不可或缺的技能之一。本文将分享一些Javascript及CSS的必备技巧,以及相应的功能代码,帮助开发者更好地处理各种手机端开发问题。 一、CSS技巧 1. 移动端1px边框问题 在移动端,Retina屏幕下的1px边框一般会出现虚化、扁平化等问…

    JavaScript 2023年5月19日
    00
  • layui原生表单验证的实例

    下面我来详细讲解一下“layui原生表单验证的实例”的完整攻略。 简介 layui是一款经典的前端UI框架,提供了丰富的组件和插件,其中包括表单验证组件。通过layui原生的表单验证可实现表单的实时验证、提交前的总体验证等功能。 示例1 假设我们有一个简单的表单,包含了姓名(name)、年龄(age)、邮箱(email)、密码(password)这四个输入项…

    JavaScript 2023年6月10日
    00
  • JS中switch的四种写法示例

    下面我将详细讲解JS中switch的四种写法示例。 简述 switch是一个条件语句,用于测试变量是否等于多个值中的某一个值。在JS中,switch有四种使用方式,分别是: 没有 break 关键字; 有 break 关键字; 每个 case 都使用 return; 使用对象的方法进行判断。 没有 break 关键字 示例代码如下: var myAnswer…

    JavaScript 2023年5月28日
    00
  • JS添加或删除HTML dom元素的方法实例分析

    关于“JS添加或删除HTML dom元素的方法实例分析”的攻略,我将会为您提供一些详尽的说明。 添加HTML DOM元素 使用 JavaScript 来动态添加 HTML DOM 元素,对于网站交互性、用户体验以及动画效果的实现是非常有帮助的。 1. 使用 createElement 方法添加元素 createElement 方法可以创建一个指定的 HTML…

    JavaScript 2023年6月10日
    00
  • JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法

    JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法 JS作为一门基于面向对象的语言,其语法中包含了许多与对象有关的特性。本文将介绍JS中Object类、静态属性、闭包、私有属性、call和apply的使用、继承的三种实现方法。 Object类 在JS中,所有对象都是由Object类派生而来,因此也可…

    JavaScript 2023年5月27日
    00
  • JavaScript自定义数组排序方法

    接下来我会详细讲解如何使用 JavaScript 自定义数组排序方法。 步骤一:了解数组排序方法 在 JavaScript 中,Array 对象自带 sort() 方法,可以对数组进行排序。默认情况下,sort() 方法将按照字符串的 Unicode 位点值进行排序。但是,如果数组中存储的是数字、日期或其他对象,那么这个排序方式可能并不适用。此时,我们可以使…

    JavaScript 2023年5月27日
    00
  • 对js eval()函数的一些见解

    下面就是“对js eval()函数的一些见解”的完整攻略。 1. eval()函数的介绍 eval() 函数是 JavaScript 中的一个内置函数,它接收一个字符串作为参数,然后将这个字符串解析为 JavaScript 代码并执行。eval() 函数可以用来动态地生成代码、动态地加载脚本以及实现其他一些动态脚本的功能。 2. eval()函数的使用 2.…

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部