【每日学点HarmonyOS Next知识】Web跨域资源、Web长按菜单、Web拦截请求、禁止录屏、Base64图片宽高

1、HarmonyOS Web组件本地资源跨域问题？

关于资源跨域问题的解决，可以参考以下官网文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5

方法一

为了使Web组件能够成功访问跨域资源，开发者应采用http或https等协议，替代原先使用的file或resource协议进行加载。其中，替代的url域名为自定义构造的仅供个人或者组织使用的域名，以避免与互联网上实际存在的域名产生冲突。同时，开发者需利用Web组件的onInterceptRequest方法，对本地资源进行拦截和相应的替换。

以下结合示例说明如何解决本地资源跨域访问失败的问题。其中，index.html和js/script.js置于工程中的rawfile目录下。如果使用resource协议访问index.html，js/script.js将因跨域而被拦截，无法加载。在示例中，使用https://www.example.com/域名替换了原本的resource协议，同时利用onInterceptRequest接口替换资源，使得js/script.js可以成功加载，从而解决了跨域拦截的问题。

// main/ets/pages/Index.ets
import { webview } from '@kit.ArkWeb';@Entry
@Component
struct Index {@State message: string = 'Hello World';webviewController: webview.WebviewController = new webview.WebviewController();// 构造域名和本地文件的映射表schemeMap = new Map([["https://www.example.com/index.html", "index.html"],["https://www.example.com/js/script.js", "js/script.js"],])// 构造本地文件和构造返回的格式mimeTypemimeTypeMap = new Map([["index.html", 'text/html'],["js/script.js", "text/javascript"]])build() {Row() {Column() {// 针对本地index.html,使用http或者https协议代替file协议或者resource协议，并且构造一个属于自己的域名。// 本例中构造www.example.com为例。Web({ src: "https://www.example.com/index.html", controller: this.webviewController }).javaScriptAccess(true).fileAccess(true).domStorageAccess(true).geolocationAccess(true).width("100%").height("100%").onInterceptRequest((event) => {if (!event) {return;}// 此处匹配自己想要加载的本地离线资源，进行资源拦截替换，绕过跨域if (this.schemeMap.has(event.request.getRequestUrl())) {let rawfileName: string = this.schemeMap.get(event.request.getRequestUrl())!;let mimeType = this.mimeTypeMap.get(rawfileName);if (typeof mimeType === 'string') {let response = new WebResourceResponse();// 构造响应数据，如果本地文件在rawfile下，可以通过如下方式设置response.setResponseData($rawfile(rawfileName));response.setResponseEncoding('utf-8');response.setResponseMimeType(mimeType);response.setResponseCode(200);response.setReasonMessage('OK');response.setResponseIsReady(true);return response;}}return null;})}.width('100%')}.height('100%')}
}

<!-- main/resources/rawfile/index.html -->
<html>
<head><meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<script crossorigin src="./js/script.js"></script>
</body>
</html>

// main/resources/rawfile/js/script.js
const body = document.body;
const element = document.createElement('div');
element.textContent = 'success';
body.appendChild(element);

方法二

通过setPathAllowingUniversalAccess设置一个路径列表。当使用file协议访问该列表中的资源时，允许进行跨域访问本地文件。此外，一旦设置了路径列表，file协议将仅限于访问列表内的资源(此时，fileAccess的行为将会被此接口行为覆盖)。路径列表中的路径必须符合以下任一路径格式：

  1. 应用文件目录通过Context.filesDir获取，其子目录示例如下：
    • /data/storage/el2/base/files/example
    • /data/storage/el2/base/haps/entry/files/example
  2. 应用资源目录通过Context.resourceDir获取，其子目录示例如下：
    • /data/storage/el1/bundle/entry/resource/resfile
    • /data/storage/el1/bundle/entry/resource/resfile/example
      当路径列表中的任一路径不满足上述条件时，系统将抛出异常码401，并判定路径列表设置失败。若设置的路径列表为空，file协议的可访问范围将遵循fileAccess的规则，具体示例如下。
// main/ets/pages/Index.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct WebComponent {controller: WebviewController = new webview.WebviewController();build() {Row() {Web({ src: "", controller: this.controller }).onControllerAttached(() => {try {// 设置允许可以跨域访问的路径列表this.controller.setPathAllowingUniversalAccess([getContext().resourceDir,getContext().filesDir + "/example"])this.controller.loadUrl("file://" + getContext().resourceDir + "/index.html")} catch (error) {console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as   BusinessError).message}`);}}).javaScriptAccess(true).fileAccess(true).domStorageAccess(true)}}
}

<!-- main/resource/rawfile/index.html -->
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><title>Demo</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,   viewport-fit=cover"><script>function getFile() {var file = "file:///data/storage/el1/bundle/entry/resources/resfile/js/script.js";// 使用file协议通过XMLHttpRequest跨域访问本地js文件。var xmlHttpReq = new XMLHttpRequest();xmlHttpReq.onreadystatechange = function(){console.log("readyState:" + xmlHttpReq.readyState);console.log("status:" + xmlHttpReq.status);if(xmlHttpReq.readyState == 4){if (xmlHttpReq.status == 200) {// 如果ets侧正确设置路径列表，则此处能正常获取资源const element = document.getElementById('text');element.textContent = "load " + file + " success";} else {// 如果ets侧不设置路径列表，则此处会触发CORS跨域检查错误const element = document.getElementById('text');element.textContent = "load " + file + " failed";}}}xmlHttpReq.open("GET", file);xmlHttpReq.send(null);}</script>
</head><body>
<div class="page"><button id="example" onclick="getFile()">stealFile</button>
</div>
<div id="text"></div>
</body></html>

// main/resources/rawfile/js/script.js
const body = document.body;
const element = document.createElement('div');
element.textContent = 'success';
body.appendChild(element);
2、HarmonyOS web里需要实现长按弹出菜单保存图片，有类似getHitTestResult的方法吗？

可以参考下web组件中的onContextMenuShow事件，长按特定元素（例如图片，链接）或鼠标右键，跳出菜单。具体参考下面文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#oncontextmenushow9
暂时无法控制长按弹框的条件，可以尝试下从h5侧通过控制事件和CSS方式控制选择框

3、HarmonyOS web拦截应用跳转和自定义请求响应对应demo？

web拦截和自定义请求响应，可以参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-resource-interception-request-mgmt-V5

Web组件支持在应用拦截到页面请求后自定义响应请求能力。开发者通过onInterceptRequest()接口来实现自定义资源请求响应 。自定义请求能力可以用于开发者自定义Web页面响应、自定义文件资源响应等场景。

Web网页上发起资源加载请求，应用层收到资源请求消息。应用层构造本地资源响应消息发送给Web内核。Web内核解析应用层响应信息，根据此响应信息进行页面资源加载。

4、HarmonyOS 如何禁止单个page页面录屏截屏 ；禁止某个dialog 录屏截屏 如dialog 安全密码键盘？

现在需要在某些page 页面、dialog，不让录屏和截屏
可以通过setWindowPrivacyMode设置窗口为隐私模式后，截屏录屏或分享屏幕，屏幕会显示灰色蒙层（隐私窗口不允许这些操作）

可参考：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#setwindowprivacymode9

setWindowPrivacyMode

setWindowPrivacyMode(isPrivacyMode: boolean, callback: AsyncCallback): void

设置窗口是否为隐私模式，使用callback异步回调。设置为隐私模式的窗口，窗口内容将无法被截屏或录屏。此接口可用于禁止截屏/录屏的场景。

#### 5、HarmonyOS 如何获取 base64图片的图片原始宽高？ 图片验证码场景，服务端返回两张base64 格式图片 背景图与验证图，需要根据背景图、原图大小计算缩放系数，从而计算验证图的大小与定位信息

使用Image Kit的能力，参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-image-V5#imageinfo

demo：

import util from '@ohos.util';
import { image } from '@kit.ImageKit';
@Entry
@Component
struct Index {@State message: string = 'getImage';@StorageLink('test') test: object = new Object;@State imageBase64: string ='iVBORw0KGgoAAAANSUhEUgAAADwAAAAUCAYAAADRA14pAAABN0lEQVR42mP4P8IAAy0Mjf6xAYxHnIcHo6cZaOlZYj38VbESjIech5E9SayHYZ5FxnT1cL7uFwxMbt4lxtPYPElLjzNg8ywhMWp6GOZBeiVzDA/jinFySmZSkzUpHn5oLosXk+1hYj2NXliRUnjh8hy5MYzP0wzEeIzUvEyNGCY3WZMUw5Qm61EPjzQPkwIGjYfp4VlsnianIULIs3gbHvT2LLZWFzVLZ7xNS3p7lBqAGM+CPZy6o+w/DGfvrv5ffagTjtuOT/4/8cxcOF50Zc3/5dc3wvHeh0fh+PDjk/8vv74Bx/c+PPz/8utrOP7559fg8LD/uqT/A4GpHdB7Q/XBmFBAMyBLPv70DCWWTjw7h2L42pvbUCxGdlTPqRkoji7Y24DiqdCN6f8HKnCRMcNA5bmBCmgACwohlRAJ3H4AAAAASUVORK5CYII='@State pixelMap: image.PixelMap | undefined = undefined;build() {Column() {Text(this.message).id('HelloWorld').fontSize(50).fontWeight(FontWeight.Bold).onClick(async () => {let helper = new util.Base64Helper();let buffer: ArrayBuffer = helper.decodeSync(this.imageBase64, util.Type.MIME).buffer as ArrayBuffer;let imageSource = image.createImageSource(buffer);let opts: image.DecodingOptions = { editable: true };this.pixelMap = await imageSource.createPixelMap(opts);this.pixelMap.getImageInfo().then((imageInfo : image.ImageInfo) => {if (imageInfo == undefined) {console.error(`Failed to obtain the image pixel map information.`);}let wit = imageInfo.size.width;let hig = imageInfo.size.height;console.log(`Succeeded in obtaining the image pixel map information., ${JSON.stringify(wit)}, ${JSON.stringify(hig)}`);})})}.height('100%').width('100%')}
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/72911.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据库查问题常用OS命令汇总

数据库查问题常用OS命令汇总

1、内存使用情况查看 top //查看活跃进程占用情况 free -mh //查看操作系统当前可用内存 2、cpu使用情况 lscpu //查看os cpu情况 sar -u -f sar文件名 -s hh:mm:ss -e hh:mm:ss //查看对应日期的历史cpu情况 top //查看当前活跃进程使用cpu情况 3、io情况 iostat …
阅读更多...
nlp培训重点-5

nlp培训重点-5

1. LoRA微调 loader&#xff1a; # -*- coding: utf-8 -*-import json import re import os import torch import numpy as np from torch.utils.data import Dataset, DataLoader from transformers import BertTokenizer """ 数据加载 """cl…
阅读更多...
CI/CD—Jenkins配置Maven+GitLab自动构建jar包

CI/CD—Jenkins配置Maven+GitLab自动构建jar包

一、安装Maven插件通过Maven构建项目 1、在Jenkins上安装Maven Integration plugin插件 2、创建一个maven项目 2.1、填写构建的名称和描述等 2.2、填写连接git的url 报错&#xff1a;无法连接仓库&#xff1a;Error performing git command: git ls-remote -h http://192.168.…
阅读更多...
ngx_regex_create_conf

ngx_regex_create_conf

ngx_regex_create_conf 定义在 src/core/ngx_regex.c static void * ngx_regex_create_conf(ngx_cycle_t *cycle) {ngx_regex_conf_t *rcf;ngx_pool_cleanup_t *cln;rcf ngx_pcalloc(cycle->pool, sizeof(ngx_regex_conf_t));if (rcf NULL) {return NULL;}rcf->p…
阅读更多...
【数据结构】初识集合框架及背后的数据结构（简单了解）

【数据结构】初识集合框架及背后的数据结构（简单了解）

目录 前言 如何学好数据结构 1. 什么是集合框架 2. 集合框架的重要性 3. 背后所涉及的数据结构以及算法 3.1 什么是数据结构 3.2 容器背后对应的数据结构 3.3 相关java知识 3.4 什么是算法 3.5 基本关系说明&#xff08;重要&#xff0c;简单了解&#xff09; 前言 …
阅读更多...
P9242 [蓝桥杯 2023 省 B] 接龙数列--DP【巧妙解决接龙问题】

P9242 [蓝桥杯 2023 省 B] 接龙数列--DP【巧妙解决接龙问题】

P9242 [蓝桥杯 2023 省 B] 接龙数列--DP 题目 解析什么时候该用 DP&#xff1f;动态规划 vs 其他方法代码 题目 解析 这题没思路&#xff0c;压根没想到DP &#x1f626; 看了大神的题解&#xff0c;利用dp记录每一个数结尾的长度&#xff0c;最后再用N-dp中的最大值&#xf…
阅读更多...
用《设计模式》的角度优化 “枚举”

用《设计模式》的角度优化 “枚举”

枚举应该都有用过&#xff0c;枚举主要的作用是为了方便用户查找和引用枚举。 案例一 下面的枚举逻辑很简单&#xff0c;就是通过枚举值返回不同的结果。 public enum OperationEnum {EQUAL_TO,CONTAINS,START_WITH,END_WITH;public String getOperationValue(String value)…
阅读更多...
SQL根据分隔符折分不同的内容放到临时表

SQL根据分隔符折分不同的内容放到临时表

SQL Server存储过程里根据分隔符折分不同的内容放到临时表里做查询条件&#xff0c;以下分隔符使用“/”&#xff0c;可修改不同分隔符 --根据分隔符折分不同的内容放到临时表--------------- SELECT ROW_NUMBER() OVER (ORDER BY (SELECT NULL)) AS id, LTRIM(RTR…
阅读更多...
Ubuntu切换lowlatency内核

Ubuntu切换lowlatency内核

文章目录 一. 前言二. 开发环境三. 具体操作 一. 前言 低延迟内核&#xff08;Lowlatency Kernel&#xff09; 旨在为需要低延迟响应的应用程序设计的内核版本。Linux-lowlatency特别适合音频处理、实时计算、游戏和其他需要及时响应的实时任务。其主要特点是优化了中断处理、调…
阅读更多...
基于Django创建一个WEB后端框架（DjangoRestFramework+MySQL)流程

基于Django创建一个WEB后端框架（DjangoRestFramework+MySQL)流程

一、Django项目初始化 1.创建Django项目 Django-admin startproject 项目名 2.安装 djangorestframework pip install djangorestframework 解释: Django REST Framework (DRF) 是基于 Django 框架的一个强大的 Web API 框架&#xff0c;提供了多种工具和库来构建 RESTf…
阅读更多...
VUE3开发-9、axios前后端跨域问题解决方案

VUE3开发-9、axios前后端跨域问题解决方案

VUE前端解决跨域问题 前端页面需要改写 如果无效&#xff0c;记得重启服务器 后端c#解决跨域问题 前端js取值&#xff0c;后端c#跨域_c# js跨域-CSDN博客
阅读更多...
DailyNotes 增加提醒功能

DailyNotes 增加提醒功能

TODO&#xff1a;准备给 DailyNotes 增加一个提醒功能&#xff0c;准备接入 AI 来做一些事情。试了一下&#xff0c;非常靠谱。 具体 DailyNotes 和 Ollama 的交互方式&#xff0c;可以直接调用命令行&#xff0c;也可以走网络API。 rayuK2CD9WCYN4 ~ % ollama run deepseek-…
阅读更多...
PY32MD320单片机 QFN32封装，内置多功能三相 NN 型预驱。

PY32MD320单片机 QFN32封装，内置多功能三相 NN 型预驱。

PY32MD320单片机是普冉半导体的一款电机专用MCU&#xff0c;芯片采用了高性能的 32 位 ARM Cortex-M0 内核&#xff0c;主要用于电机控制。PY32MD320嵌入高达 64 KB Flash 和 8 KB SRAM 存储器&#xff0c;最高工作频率 48 MHz。PY32MD320单片机的工作温度范围为 -40 ~ 105 ℃&…
阅读更多...
OpenManus介绍及本地部署体验

OpenManus介绍及本地部署体验

1.OpenManus介绍 OpenManus&#xff0c;由 MetaGPT 团队精心打造的开源项目&#xff0c;于2025年3月发布。它致力于模仿并改进 Manus 这一封闭式商业 AI Agent 的核心功能&#xff0c;为用户提供无需邀请码、可本地化部署的智能体解决方案。换句话说&#xff0c;OpenManus 就像…
阅读更多...
【贪心算法】简介

【贪心算法】简介

1.贪心算法 贪心策略&#xff1a;解决问题的策略&#xff0c;局部最优----》全局最优 &#xff08;1&#xff09;把解决问题的过程分成若干步 &#xff08;2&#xff09;解决每一步的时候&#xff0c;都选择当前看起来的“最优”的算法 &#xff08;3&#xff09;“希望”得…
阅读更多...
springboot知识点以及源码解析（2）

springboot知识点以及源码解析（2）

web开发--静态规则与定制化 springboot对静态资源的映射规则&#xff1a;在类路径下面定义目录static或public或resources或者META-INF/resources&#xff0c;访问时项目根目录静态资源的名称 在springboot中&#xff0c;如果项目中存在同名的静态资源和同名的动态资源。那么我…
阅读更多...
C++：string容器（下篇）

C++：string容器（下篇）

1.string浅拷贝的问题 // 为了和标准库区分&#xff0c;此处使用String class String { public :/*String():_str(new char[1]){*_str \0;}*///String(const char* str "\0") // 错误示范//String(const char* str nullptr) // 错误示范String(const char* str …
阅读更多...
使用 vxe-table 导出 excel，支持带数值、货币、图片等带格式导出

使用 vxe-table 导出 excel，支持带数值、货币、图片等带格式导出

使用 vxe-table 导出 excel&#xff0c;支持带数值、货币、图片等带格式导出&#xff0c;通过官方自动的导出插件 plugin-export-xlsx 实现导出功能 查看官网&#xff1a;https://vxetable.cn gitbub&#xff1a;https://github.com/x-extends/vxe-table gitee&#xff1a;htt…
阅读更多...
JavaScript数据类型和内存空间

JavaScript数据类型和内存空间

一、JavaScript 数据类型 基本数据类型&#xff1a;字符串&#xff08;String&#xff09;、数字(Number)、布尔(Boolean)、空&#xff08;Null&#xff09;、未定义&#xff08;Undefined&#xff09;、Symbol 引用数据类型&#xff1a;对象(Object)、数组(Array)、函数(Fun…
阅读更多...
DNS Beaconing

DNS Beaconing

“DNS Beaconing” 是一种隐蔽的网络通信技术&#xff0c;通常与恶意软件&#xff08;如木马、僵尸网络&#xff09;相关。攻击者通过定期发送 DNS请求 到受控的域名服务器&#xff08;C&C服务器&#xff09;&#xff0c;实现与恶意软件的隐蔽通信、数据传输或指令下发。由…
阅读更多...
最新文章

Copyright @ 2022~2023