!16356 【3.2-Beta5】翻译完成 16016：Web组件加载沙箱路径下文件资源

Merge pull request !16356 from ester.zhou/C05-16016

!16356 【3.2-Beta5】翻译完成 16016：Web组件加载沙箱路径下文件资源
Merge pull request !16356 from ester.zhou/C05-16016
8f3745d5 · openharmony_ci · Gitee · 0bd499a6 · 9e001ffe · 8f3745d5
2 changed file
--- a/en/application-dev/reference/apis/js-apis-webview.md
+++ b/en/application-dev/reference/apis/js-apis-webview.md
@@ -3168,7 +3168,7 @@ Obtains the cookie value corresponding to the specified URL.

 | Name| Type  | Mandatory| Description                     |
 | ------ | ------ | ---- | :------------------------ |
-| url    | string | Yes  | URL of the cookie value to obtain.|
+| url    | string | Yes  | URL of the cookie value to obtain. A complete URL is recommended.|

 **Return value**

@@ -3224,7 +3224,7 @@ Sets a cookie value for the specified URL.

 | Name| Type  | Mandatory| Description                     |
 | ------ | ------ | ---- | :------------------------ |
-| url    | string | Yes  | URL of the cookie to set.|
+| url    | string | Yes  | URL of the cookie to set. A complete URL is recommended.|
 | value  | string | Yes  | Cookie value to set.     |

 **Error codes**

--- a/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
+++ b/en/application-dev/reference/arkui-ts/ts-basic-components-web.md
@@ -21,13 +21,13 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
 > **NOTE**
 >
 > Transition animation is not supported.
-> Different **\<Web>** components on the same page must be bound to different **WebController**s.
+> **\<Web>** components on a page must be bound to different **WebController**s.

 **Parameters**

 | Name       | Type                                    | Mandatory  | Description   |
 | ---------- | ---------------------------------------- | ---- | ------- |
-| src        | [ResourceStr](ts-types.md)               | Yes   | Address of a web page resource.|
+| src        | [ResourceStr](ts-types.md)               | Yes   | Address of a web page resource. To access local resource files, use the **$rawfile** or **resource** protocol. To load a local resource file in the sandbox outside of the application package, use **file://** to specify the path of the sandbox.|
 | controller | [WebviewController<sup>9+</sup>](../apis/js-apis-webview.md#webviewcontroller) \| [WebController](#webcontroller) | Yes   | Controller. **WebController** is deprecated since API version 9. You are advised to use **WebviewController** instead.|

 **Example**
@@ -64,15 +64,52 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
  }
  ```

-  ```html
-  <!-- index.html -->
-  <!DOCTYPE html>
-  <html>
-      <body>
-          <p>Hello World</p>
-      </body>
-  </html>
-  ```
+  Example of loading local resource files in the sandbox:
+  1. Use[globalthis](../../application-models/uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-page) to obtain the path of the sandbox.
+     ```ts
+     // xxx.ets
+     import web_webview from '@ohos.web.webview'
+     let url = 'file://' + globalThis.filesDir + '/xxx.html'
+
+     @Entry
+     @Component
+     struct WebComponent {
+       controller: web_webview.WebviewController = new web_webview.WebviewController()
+       build() {
+         Column() {
+           // Load the files in the sandbox.
+           Web({ src: url, controller: this.controller })
+         }
+       }
+     }
+     ```
+
+  2. Modify the **MainAbility.ts** file.
+  
+     The following uses **filesDir** as an example to describe how to obtain the path of the sandbox. For details about how to obtain other paths, see [Obtaining the Application Development Path](../../application-models/application-context-stage.md#obtaining-the-application-development-path).
+     ```ts
+     // xxx.ts
+     import UIAbility from '@ohos.app.ability.UIAbility';
+     import web_webview from '@ohos.web.webview';
+
+     export default class EntryAbility extends UIAbility {
+         onCreate(want, launchParam) {
+             // Bind filesDir to the globalThis object to implement data synchronization between the UIAbility component and the UI.
+             globalThis.filesDir = this.context.filesDir
+             console.log("Sandbox path is " + globalThis.filesDir)
+         }
+     }
+     ```
+
+     ```html
+     <!-- index.html -->
+     <!DOCTYPE html>
+     <html>
+         <body>
+             <p>Hello World</p>
+         </body>
+     </html>
+     ```

 ## Attributes