【每日學點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.pswp.cn/diannao/72911.shtml
繁體地址，請注明出處：http://hk.pswp.cn/diannao/72911.shtml
英文地址，請注明出處：http://en.pswp.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