Android -- WebView之loadData加载html字符串显示网页
目录
- 前言
- 1. loadUrl 加载网页地址
- 2. loadData 加载Html字符来显示网页
- 3. loadDataWithBaseURL
- 4. 总结
前言
最近在给一个老项目做64位so文件的适配,当应用发布到应用市场上后,用户反馈64位手机上的网页加载不出内容,但32位的手机上是正常的。
我的第一反应是:网页加载不出内容,那不是网页没做好适配嘛!(把锅甩出去)
后经多方细细排查,是WebView的锅。。。(锅又回来了。。)
WebView 加载网页的方法有三种:loadUrl、loadData、loadDataWithBaseURL,下面只记录本人在这三个方法上遇到的问题,具体WebView的基础使用请参考:
Android – WebView 与 JS 交互方式总结
Android – WebView 支持文件下载的几种方式
1. loadUrl 加载网页地址
先写个网页用于加载测试,test2.html(路径:assets/webpage/test2.html):
<html><body><h1>Hello, WebView</h1><p style="color: #f00">This is a simple HTML page loaded into a WebView.</p>
</body></html>
loadUrl(String url) 加载网页地址:
....
//这里省略WebView的其他基础设置
mWebView.loadUrl("file:///android_asset/webpage/test2.html");
....
显示的内容:
使用 loadUrl(String url) 加载网页,在32位和64位的手机上显示都没有问题。
我的线上应用不是通过url这种方式加载网页的,是通过加载Html字符来加载网页的。
2. loadData 加载Html字符来显示网页
loadData(String data, String mimeType, String encoding)
官方定义:
Load the given data into the WebView. This will load the data into WebView using the data: scheme. Content loaded through this mechanism does not have the ability to load content from the network.
将给定的数据加载到WebView中。这将使用 data: scheme 将数据加载到WebView中。通过此机制加载的内容无法从网络加载内容。
字面意思就是此方法是通过读取Html字符来显示网页的。
/*** 读取 Html字符* @param fileName 文件名*/
private String readAsset(String fileName) {AssetManager assetManager = getAssets();StringBuilder stringBuilder = new StringBuilder();try (InputStream inputStream = assetManager.open(fileName);BufferedReader reader = new BufferedReader(new InputStreamReader(inputStream))) {String line;while ((line = reader.readLine()) != null) {stringBuilder.append(line);}} catch (IOException e) {e.printStackTrace();return null;}return stringBuilder.toString();
}private void loadUrl() {.......StringBuilder stringBuilder = new StringBuilder();//读取Html字符内容stringBuilder.append(readAsset("webpage/test2.html"));mWebView.loadData(String.valueOf(stringBuilder), "text/html; charset=UTF-8", null);.......
}
在32位的手机上显示正常,64位的个别手机显示如下:
(线上反馈,Android 10 以上的手机出问题的较多)
由图可知,Html中带颜色的标签p的内容未显示出来。
回到官网看下loadData的入参说明:
data
A String of data in the given encoding. The date must be URI-escaped – ‘#’, ‘%’, ‘’, ‘’ should be replaced by %23, %25, %27, %3f respectively.
mimeType
The MIMEType of the data. i.e. text/html, image/jpeg
encoding
The encoding of the data. i.e. utf-8, base64
data:此入参中不能出现特殊字符 ‘#’, ‘%’, ‘’, ‘’ ,需要将其替换成 %23, %25, %27, %3f。
这就为内嵌的css制造了麻烦,因为css中经常使用这4种符号,就如 test2.html 中使用’#'设置了颜色:color: #f00 。
根据官网文档,将 ‘#’ 替换成 ‘%23’:
....StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append(readAsset("webpage/test2.html"));
mWebView.loadData(String.valueOf(stringBuilder).replace("#", "%23"), "text/html; charset=UTF-8", null);....
这样在64位安卓10以上的手机上就能正常显示了,同时也不影响32位的手机。
在正式的应用里,后台返回的Html字符数据结构都是很复杂的,里面包含css,script等内容,里面用到特殊字符的频率都很大,如果每次加载之前都要对Html做特殊字符替换处理的话,难免会出现乱码等其他问题。
所以这里就需要使用 loadDataWithBaseURL
3. loadDataWithBaseURL
loadDataWithBaseURL(String baseUrl, String data, String mimeType, String encoding, String historyUrl)
官网资料:
Load the given data into the WebView, use the provided URL as the base URL for the content. The base URL is the URL that represents the page that is loaded through this interface. As such, it is used to resolve any relative URLs. The historyUrl is used for the history entry.
将给定的数据加载到WebView中,使用提供的URL作为内容的基本URL。基本URL是表示通过此接口加载的页面的URL。因此,它用于解析任何相对URL。historyUrl用于历史条目。
Note for post 1.0. Due to the change in the WebKit, the access to asset files through “file:///android_asset/” for the sub resources is more restricted. If you provide null or empty string as baseUrl, you won’t be able to access asset files. If the baseUrl is anything other than http(s)/ftp(s)/about/javascript as scheme, you can access asset files for sub resources.
1.0 后的注释。由于 WebKit 的更改,通过"file:///android_asset/"这种方式子资源受到更多的限制。如果你提供null 或空字符串作为baseUrl,你将无法访问资产文件;如果baseUrl不是http(s)/ftp(s)/about/javascript 作为 scheme,你可以访问子资源的文件。
入参说明:
baseUrl
Url to resolve relative paths with, if null defaults to “about:blank”
data
A String of data in the given encoding.
mimeType
The MIMEType of the data. i.e. text/html. If null, defaults to “text/html”
encoding
The encoding of the data. i.e. utf-8, us-ascii
historyUrl
URL to use as the history entry. Can be null.
从入参上看,loadDataWithBaseURL中并没有对 data 做特殊字符的限制。
....StringBuilder stringBuilder = new StringBuilder();
stringBuilder.append(readAsset("webpage/test2.html"));
mWebView.loadDataWithBaseURL("", String.valueOf(stringBuilder), "text/html", "UTF-8", "");....
所以,最终使用 loadDataWithBaseURL 完美解决了64位安卓10以上部分手机网页加载不出来的问题。
4. 总结
一开始线上反馈这个问题的时候,我也没有想到是loadData的问题。正式的应用上返回的Html是相当的复杂,里面有Html、css、好几个script,将这些字符内容打印出来在文档上显示时,看着就头疼。(非网页专业的,看着肯定头疼)
想到的最笨的方法,就是将Html、css、script这几个标签拆分开,化复杂为简洁。先将css和script的代码删除,只留下Html,看看 WebView 是否能正常加载出来。结果这一步就不能正常加载,然后我将 Html 中的样式全部去除,只留下文字部分,这样是可以正常显示的,说明问题出在样式上。然后将样式一点点加回到Html中,最终找到是颜色中 ‘#’ 影响了页面的显示。
虽然方法有点儿笨,但好在能排查到问题。
相关文章:
Android -- WebView之loadData加载html字符串显示网页
目录 前言1. loadUrl 加载网页地址2. loadData 加载Html字符来显示网页3. loadDataWithBaseURL4. 总结 前言 最近在给一个老项目做64位so文件的适配,当应用发布到应用市场上后,用户反馈64位手机上的网页加载不出内容,但32位的手机上是正常…...
单片机:实现数码管00盗99显示(附带源码)
单片机实现数码管00到99显示 在嵌入式开发中,数码管是最常用的显示设备之一,特别适合用于显示数字信息。本项目的目标是利用8051单片机控制数码管实现数字显示,从00到99的循环显示。我们将通过按键或定时器来控制数字的增减,并通…...
大厂面试智力题大全(详细解题思路,持续更新)
目录 八个球有一个比较重,问称几次可以把较重的球拎出来,具体称重的方法是怎样的? 64 匹马 8 个赛道,找出前四名,最少赛多少场(腾讯) 一个城市的加油站数量 5L的水桶和3L的水桶怎么量出4L的水 有一堆粗细不均匀的绳子,燃烧完一个绳子需要2小时,如何用这些绳子凑出…...
使用 acme.sh 签发和自动续期 ssl https 证书
acme.sh 是一个热度非常高的签发和自动续期 https 证书的工具,虽然官网上提供了充分的操作说明,但是不够简洁,本文以在 nginx 中签发和配置http 为例,列出必要的几个简单步骤。 安装 因为网络原因,github 大部分人是…...
YOLOv9改进,YOLOv9引入DLKA-Attention可变形大核注意力,WACV2024,二次创新RepNCSPELAN4结构
摘要 作者引入了一种称为可变形大核注意力 (D-LKA Attention) 的新方法来增强医学图像分割。这种方法使用大型卷积内核有效地捕获体积上下文,避免了过多的计算需求。D-LKA Attention 还受益于可变形卷积,以适应不同的数据模式。 理论介绍 大核卷积(Large Kernel Convolu…...
docker安装mysql8
上一篇提到了docker安装mysql5.7和mysql8有所不同,这一篇说一下mysql8的安装 1、宿主机创建映射目录 mkdir -p /data/mysql8/log mkdir -p /data/mysql8/data mkdir -p /data/mysql8/conf这里我放在了/data/mysql8目录下 2、拉取mysql镜像 docker pull mysql:8.…...
【云原生知识】Kubernets实践-前端服务如何访问后端服务
文章目录 概述步骤1:部署后端服务步骤2:配置Nginx步骤3:创建Nginx服务总结 如何确保 Nginx 能持续访问后端服务?相关文献 概述 假设你正在使用Kubernetes作为容器云平台,以下是如何配置Nginx以及相关服务,…...
M3DM的autodl环境构建过程笔记
文章目录 在3D-ADS环境https://blog.csdn.net/tfxzgp/article/details/144259472基础上构建(失败的记录,不用看)更换镜像重来(成功)安装缺少的包修改models.py中的RGB和点云backbone的路径修改main.py路径参数运行 在3D-ADS环境https://blog.…...
jmeter CLI Mode 传参实现动态设置用户数
一.需求 CLI 运行模式下每次运行想要传入不同的用户数,比如寻找瓶颈值的场景,需要运行多次设置不同的用户数。 二.解决思路 查看官方API Apache JMeter - Users Manual: Getting Started api CLI Mode 一节中提到可以使用如下参数做属性的替换&#…...
Mac系统下 jdk和maven 安装教程
一、jdk安装教程 1、先去官网选择对应版本下载 官网网址:Java SE | Oracle Technology Network | Oracle 中国 这里我选择的是jdk8的版本,如果你们想下载更高的版本就选择其他版本,目前大部分公司和教程使用jdk8的版本比较多。 点击macos&a…...
pyfink1.20版本下实现消费kafka中数据并实时计算
1、环境 JDK版本:1.8.0_412python版本:3.10.6apache-flink版本:1.20.0flink版本:1.20kafka版本:kafka_2.12-3.1.1flink-sql-connector-kafka版本:3.3.0-1.202、执行python-flink脚本 从kafka的demo获取消…...
【经验分享】私有云运维的知识点
最近忙于备考没关注,有次点进某小黄鱼发现首页出现了我的笔记还被人收费了 虽然我也卖了一些资源,但我以交流、交换为主,笔记都是免费给别人看的 由于当时刚刚接触写的并不成熟,为了避免更多人花没必要的钱,所以决定公…...
影像组学+病理组学+深度学习人工智能应用
影像组学 基础学习内容: 特征提取:使用pyradiomics进行形状、纹理、小波变换等特征提取。特征筛选:应用ICC、相关系数、mRMR、Lasso等方法。建模:使用LR、SVM、RF、XGBoost、LightGBM等机器学习算法。模型评估:通过A…...
how to write 述职pptx as a tech manager
As a technical manager, crafting an effective 述职 (performance review) PPT requires you to highlight your leadership, team accomplishments, technical contributions, challenges faced, and future plans. Heres a structured approach to design your PPT: 1. Cov…...
用户发送请求后服务端i/o工作过程
华子目录 服务端i/o介绍磁盘i/o机械磁盘的寻道时间、旋转延迟和数据传输时间常见的机械磁盘平均寻道时间值常见磁盘的平均延迟时间每秒最大IOPS的计算方法 网络i/o网络I/O处理过程磁盘和网络i/o 一次完整的请求在内部的执行过程 服务端i/o介绍 i/o在计算机中指Input/Output&am…...
功能篇:springboot实现防盗链功能
防盗链(Hotlink Protection)是一种防止其他网站直接链接到你网站的资源(如图片、视频等),从而节省带宽和保护内容的有效手段。在Spring Boot应用程序中实现防盗链功能,可以通过多种方式来达成,例…...
MySQL迁移SQLite
将 MySQL 的表结构和数据迁移到 SQLite,可以通过以下步骤实现。这个过程主要包括导出 MySQL 数据库到 SQL 文件,然后将其导入到 SQLite 数据库中。 步骤 1: 导出 MySQL 数据库 首先,需要将 MySQL 数据库导出为一个 SQL 文件。可以使用 mysq…...
嵌入式面试知识点总结 -- 面试篇
1、请你做个简单的自我介绍 把所有工作内容,分类整理出和岗位匹配的能力关键字,然后围绕关键字展开讲。每段经历要用数据来支撑。 例如: 面试官你好,我叫XXX,毕业于XXX,很荣幸参加此次面试。 围绕面试岗位…...
华为OD机试真题---观看文艺汇演问题
华为OD机试中的“观看文艺汇演问题”是一道考察算法与数据结构能力的题目。以下是对该题目的详细解析: 一、题目描述 为了庆祝某个重要节日(如中国共产党成立100周年),某公园将举行多场文艺表演。很多演出都是同时进行的&#x…...
类OCSP靶场-Kioptrix系列-Kioptrix Level 2
一、前情提要 二、实战打靶 1. 信息收集 1.1. 主机发现 1.2. 端口扫描 1.3.目录遍历 2.漏洞发现 2.1. 登录框测试 2.2. 发现命令执行 2.3 构造命令执行利用payload 3.提权 3.1. 搜索提权exp 3.2. 查看exp信息 3.3. Privilege Escalation的exp利用 exp_9542 一、前…...
openlane
openlane数据集,lane3d_1000里训练集157807张图片,测试集39981张图,md太多了...
修改vscode设置的原理
转载请标明出处:小帆的帆的专栏 修改vscode设置 首先需要理解的是,vscode的系统设置和插件设置都是通过settings.json文件管理的。 vscode中有三个Settings,三个Settings分别对应三个settings.json文件 Default Settings:默认…...
解决docker环境下aspose-words转换word成pdf后乱码问题
描述 环境:docker 部署工具:Jenkins 需求:本地上传的word文档需要转换成pdf 问题:转换之后的pdf文档出现小框框(乱码) 转换成PDF的操作 pom: <dependency><groupId>org.apach…...
2024年12月16日Github流行趋势
项目名称:PDFMathTranslate 项目维护者:Byaidu reycn hellofinch Wybxc YadominJinta项目介绍:基于 AI 完整保留排版的 PDF 文档全文双语翻译,支持 Google/DeepL/Ollama/OpenAI 等服务,提供 CLI/GUI/Docker。项目star数…...
ElasticSearch 常见故障解析与修复秘籍
文章目录 一、ElasticSearch启动服务提示无法使用root用户二、ElasticSearch启动提示进程可拥有的虚拟内存少三、ElasticSearch提示用户拥有的可创建文件描述符太少四、ElasticSearch集群yellow状态分析五、ElasticSearch节点磁盘使用率过高,read_only状态问题解决六…...
用 Python Turtle 绘制经典汤姆猫:重温卡通角色的经典魅力
用 Python Turtle 绘制经典汤姆猫:重温卡通角色的经典魅力 🐸 前言 🐸🐞往期绘画>>点击进所有绘画🐞🐋 效果图 🐋🐉 代码 🐉 🐸 前言 🐸 汤…...
数据结构Day4: 链表函数封装 ; 思维导图
目录 作业:实现链表剩下的操作: 任意位置删除 按位置修改 按值查找返回地址 反转 销毁 运行结果 思维导图 作业:实现链表剩下的操作: 1>任意位置删除 2>按位置修改 3>按值查找返回地址 4>反转 5>销毁 任意…...
用 Python Turtle 绘制一只可爱的小狗:用代码捕捉狗狗的萌态
用 Python Turtle 绘制一只可爱的小狗:用代码捕捉狗狗的萌态 🐸 前言 🐸🐞往期绘画>>点击进所有绘画🐞🐋 效果图 🐋🐉 代码 🐉 🐸 前言 🐸 …...
人工智能浪潮来袭:2024年技术革命与产业变革深度解析@附64页PDF文件下载
随着2024年的到来,人工智能(AI)技术正以前所未有的速度、广度和深度改变着我们的生产和生活方式。在这篇深度解析中,我们将带您一探AI技术的最新发展、产业应用的现状以及未来的安全治理趋势。 技术革命:AI技术的新范…...
python 下载 b站视频 和音频
video_bvid: import os import requests import json import re from bs4 import BeautifulSoup import subprocess # from detail_video import video_bvid# video_bvid 是一个从外部得到的单个视频ID video_bvid BV1cx421Q7veclass BilibiliVideoAudio:def __in…...
【蓝桥杯选拔赛真题93】Scratch青蛙过河 第十五届蓝桥杯scratch图形化编程 少儿编程创意编程选拔赛真题解析
目录 Scratch青蛙过河 一、题目要求 编程实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 1、思路分析 2、详细过程 四、程序编写 五、考点分析 六、推荐资料 1、入门基础 2、蓝桥杯比赛 3、考级资料 4、视频课程 5、python资料 Scr…...
flink sink kafka的事务提交现象猜想
现象 查看flink源码时 sink kafka有事务提交机制,查看源码发现是使用两阶段提交策略,而事务提交是checkpoint完成后才执行,那么如果checkpoint设置间隔时间比较长时,事务未提交之前,后端应该消费不到数据,…...
Oracle 临时表空间管理与最佳实践
Oracle 临时表空间管理与最佳实践 内容摘要 本文深入探讨了Oracle数据库中临时表空间的管理和最佳实践。主要内容包括: 临时表空间的概述及其在Oracle 19c多租户架构中的特点临时表空间组的优势及其创建方法非临时表空间组的临时表空间日常维护操作命令临时表空间…...
Java转C之继承和多态
在C/C中,继承和多态是面向对象编程(OOP)的两个重要特性。以下将详细讲解C/C中如何实现继承与多态,同时结合Java的对比,帮助理解两者的异同。 继承的实现 C/C中的继承 继承允许一个类(派生类/子类…...
【密码学】ZUC祖冲之算法
一、ZUC算法简介 ZUC算法(祖冲之算法)是中国自主研发的一种流密码算法,2011年被3GPP批准成为4G国际标准,主要用于无线通信的加密和完整性保护。ZUC算法在逻辑上采用三层结构设计,包括线性反馈移位寄存器(L…...
MacOS系统 快速安装appium 步骤详解
在macOS系统上,你可以通过使用nvm(Node Version Manager)来管理Node.js的版本,并基于nvm安装的Node.js环境来快捷地安装Appium。以下是具体步骤: 一、安装nvm 下载nvm 访问nvm的GitHub仓库(nvm GitHub&…...
SEGGER | 基于STM32F405 + Keil - RTT组件07 - J-Scope数据可视化,RTT方式 + DWT定时器时间戳
导言 在上一章节SEGGER | 基于STM32F405 Keil - RTT组件06 - J-Scope数据可视化,使用RTT方式的第4.3章节提到,如果消息包不包含时间戳的话,那么J-Scope的横坐标的单位时间默认是100us,说白了时间戳是假的。会导致如下问题&#x…...
机器学习支持向量机(SVM)算法
一、引言 在当今数据驱动的时代,机器学习算法在各个领域发挥着至关重要的作用。支持向量机(Support Vector Machine,SVM)作为一种强大的监督学习算法,以其在分类和回归任务中的卓越性能而备受瞩目。SVM 具有良好的泛化…...
浏览器端的 js 包括哪几个部分
一、核心语言部分 1. 变量与数据类型 变量用于存储数据,在 JavaScript 中有多种数据类型,如基本数据类型(字符串、数字、布尔值、undefined、null)和引用数据类型(对象、数组、函数)。 let name "…...
【含开题报告+文档+PPT+源码】基于SpringBoot的开放实验管理平台设计与实现
开题报告 设计开放实验管理平台的目的在于促进科学研究与教学的融合。传统实验室常常局限于特定地点和时间,而开放平台可以为学生、教师和研究人员提供一个便捷的交流与共享环境。通过在线平台,他们可以分享实验资源、交流经验,从而促进科学…...
国内可以访问的github地址
国内的IP直接访问github.com官网一般会出现无法访问或者卡顿问题,可以尝试访问下面的国内的代理网站: GitHub Build and ship software on a single, collaborative platform GitHub...
Spring 框架事务管理深度剖析
1.Spring框架的事务管理有哪些优点 pring框架的事务管理具有以下优点: 声明式事务管理:Spring支持声明式事务管理,这使得开发者可以通过配置而不是编程方式来定义事务边界。这种方式简化了事务管理代码,并且可以减少出错的机会。…...
6.1 初探MapReduce
MapReduce是一种分布式计算框架,用于处理大规模数据集。其核心思想是“分而治之”,通过Map阶段将任务分解为多个简单任务并行处理,然后在Reduce阶段汇总结果。MapReduce编程模型包括Map和Reduce两个阶段,数据来源和结果存储通常在…...
SpringBoot - 动态端口切换黑魔法
文章目录 关键技术点核心原理Code 关键技术点 利用 Spring Boot 内嵌 Servlet 容器 和 动态端口切换 的方式实现平滑更新的方案,关键技术点如下: Servlet 容器重新绑定端口:Spring Boot 使用 ServletWebServerFactory 动态设置新端口。零停…...
【Excel】单元格分列
目录 分列(新手友好) 1. 选中需要分列的单元格后,选择 【数据】选项卡下的【分列】功能。 2. 按照分列向导提示选择适合的分列方式。 3. 分好就是这个样子 智能分列(进阶) 高级分列 Tips: 新手推荐基…...
Scratch教学作品 | 3D圆柱体俄罗斯方块——旋转视角的全新挑战! ✨
今天为大家推荐一款创意十足的Scratch益智游戏——《3D圆柱体俄罗斯方块》!由Ceratophrys制作,这款作品将经典俄罗斯方块与立体圆柱舞台相结合,为玩家带来了前所未有的空间挑战与乐趣。更棒的是,这款游戏的源码可以在小虎鲸Scratc…...
智慧商城:登录页静态布局,axios请求数据切换图形验证
登录页静态布局 在src目录下新建 styles,主要用于 存放公共样式。在该文件夹下新建common.less文件,并将其在main.js中引入 将图片拷贝到src文件夹下的 assets文件夹下 完成静态布局 点击左箭头能返回到首页 所有组件头部返回左箭头颜色都是一样的&#…...
HTML知识点详解教程
文章目录 HTML知识点详解教程1. HTML基本语法2. HTML标签详解2.1 分区标签 <div>2.2 标题标签 <h1> ~ <h6>2.3 段落标签 <p>2.4 图片标签 <img>2.5 列表标签 <ul> 和 <ol>无序列表 <ul>有序列表 <ol> 2.6 超链接标签 &l…...
知识分享第二十八天-数学篇一
组合.二项式定理.常见导数 组合 让我们通过一个具体的例子来理解组合(Combinations)的概念 假设你有一个装有5个不同颜色球的袋子:红、蓝、绿、黄和紫。你想从中随机抽取3个球, 不考虑顺序,那么你可以有多少种不同的…...
搭建Tomcat(四)---Servlet容器
目录 引入 Servlet容器 一、优化MyTomcat ①先将MyTomcat的main函数搬过来: ②将getClass()函数搬过来 ③创建容器 ④连接ServletConfigMapping和MyTomcat 连接: ⑤完整的ServletConfigMapping和MyTomcat方法: a.ServletConfigMappin…...