Skip to content

D
Docs

OpenHarmony / Docs
大约 2 年 前同步成功

通知 161
Star 293
Fork 28
D
Docs
You need to sign in or sign up before continuing.
提交 7901b57f 编写于 作者: E ester.zhou
浏览文件
操作

Update docs (19151) 

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 c0671caa
显示空白变更内容
内联 并排
Showing with 295 addition and 228 deletion
en/application-dev/reference/apis/js-apis-webview.md
浏览文件 @ 7901b57f
...@@ -63,42 +63,6 @@ struct WebComponent { ...@@ -63,42 +63,6 @@ struct WebComponent {
Implements a **WebMessagePort** object to send and receive messages. Implements a **WebMessagePort** object to send and receive messages.
### close
close(): void
Closes this message port.
**System capability**: SystemCapability.Web.Webview.Core
**Example**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
msgPort: web_webview.WebMessagePort[] = null;
build() {
Column() {
Button('close')
.onClick(() => {
if (this.msgPort && this.msgPort[1]) {
this.msgPort[1].close();
} else {
console.error("msgPort is null, Please initialize first");
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### postMessageEvent ### postMessageEvent
postMessageEvent(message: WebMessage): void postMessageEvent(message: WebMessage): void
...@@ -448,6 +412,56 @@ function postStringToApp() { ...@@ -448,6 +412,56 @@ function postStringToApp() {
} }
``` ```
### close
close(): void
Closes this message port. To use this API, a message port must first be created using [createWebMessagePorts](#createwebmessageports).
**System capability**: SystemCapability.Web.Webview.Core
**Example**
```ts
// xxx.ets
import web_webview from '@ohos.web.webview'
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
msgPort: web_webview.WebMessagePort[] = null;
build() {
Column() {
// Use createWebMessagePorts to create a message port.
Button('createWebMessagePorts')
.onClick(() => {
try {
this.msgPort = this.controller.createWebMessagePorts();
console.log("createWebMessagePorts size:" + this.msgPort.length)
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Button('close')
.onClick(() => {
try {
if (this.msgPort && this.msgPort.length == 2) {
this.msgPort[1].close();
} else {
console.error("msgPort is null, Please initialize first");
}
} catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
}
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
## WebviewController ## WebviewController
Implements a **WebviewController** to control the behavior of the **\<Web>** component. A **WebviewController** can control only one **\<Web>** component, and the APIs (except static APIs) in the **WebviewController** can be invoked only after it has been bound to the target **\<Web>** component. Implements a **WebviewController** to control the behavior of the **\<Web>** component. A **WebviewController** can control only one **\<Web>** component, and the APIs (except static APIs) in the **WebviewController** can be invoked only after it has been bound to the target **\<Web>** component.
...@@ -473,7 +487,6 @@ export default class EntryAbility extends UIAbility { ...@@ -473,7 +487,6 @@ export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) { onCreate(want, launchParam) {
console.log("EntryAbility onCreate") console.log("EntryAbility onCreate")
web_webview.WebviewController.initializeWebEngine() web_webview.WebviewController.initializeWebEngine()
globalThis.abilityWant = want
console.log("EntryAbility onCreate done") console.log("EntryAbility onCreate done")
} }
} }
...@@ -516,30 +529,11 @@ export default class EntryAbility extends UIAbility { ...@@ -516,30 +529,11 @@ export default class EntryAbility extends UIAbility {
} }
``` ```
### Creating an Object
```ts
// xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController();
build() {
Column() {
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### setWebDebuggingAccess ### setWebDebuggingAccess
static setWebDebuggingAccess(webDebuggingAccess: boolean): void static setWebDebuggingAccess(webDebuggingAccess: boolean): void
Sets whether to enable web debugging. Sets whether to enable web debugging. For details, see [Debugging Frontend Pages by Using DevTools](../../web/web-debugging-with-devtools.md).
**System capability**: SystemCapability.Web.Webview.Core **System capability**: SystemCapability.Web.Webview.Core
...@@ -656,14 +650,15 @@ struct WebComponent { ...@@ -656,14 +650,15 @@ struct WebComponent {
``` ```
There are three methods for loading local resource files: There are three methods for loading local resource files:
1. Using $rawfile 1. Using $rawfile
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview' import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController(); controller: web_webview.WebviewController = new web_webview.WebviewController();
build() { build() {
...@@ -672,7 +667,7 @@ struct WebComponent { ...@@ -672,7 +667,7 @@ struct WebComponent {
.onClick(() => { .onClick(() => {
try { try {
// Load a local resource file through $rawfile. // Load a local resource file through $rawfile.
this.controller.loadUrl($rawfile('xxx.html')); this.controller.loadUrl($rawfile('index.html'));
} catch (error) { } catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
} }
...@@ -680,16 +675,17 @@ struct WebComponent { ...@@ -680,16 +675,17 @@ struct WebComponent {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
} }
} }
``` ```
2. Using the resources protocol 2. Using the resources protocol
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview' import web_webview from '@ohos.web.webview'
@Entry @Entry
@Component @Component
struct WebComponent { struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController(); controller: web_webview.WebviewController = new web_webview.WebviewController();
build() { build() {
...@@ -698,7 +694,7 @@ struct WebComponent { ...@@ -698,7 +694,7 @@ struct WebComponent {
.onClick(() => { .onClick(() => {
try { try {
// Load a local resource file through the resource protocol. // Load a local resource file through the resource protocol.
this.controller.loadUrl("resource://rawfile/xxx.html"); this.controller.loadUrl("resource://rawfile/index.html");
} catch (error) { } catch (error) {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
} }
...@@ -706,20 +702,21 @@ struct WebComponent { ...@@ -706,20 +702,21 @@ struct WebComponent {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: 'www.example.com', controller: this.controller })
} }
} }
} }
``` ```
3. Using a sandbox path. For details, see the example of loading local resource files in the sandbox in [Web](../arkui-ts/ts-basic-components-web.md#web). 3. Using a sandbox path. For details, see the example of loading local resource files in the sandbox in [Web](../arkui-ts/ts-basic-components-web.md#web).
```html HTML file to be loaded:
<!-- xxx.html --> ```html
<!DOCTYPE html> <!-- index.html -->
<html> <!DOCTYPE html>
<html>
<body> <body>
<p>Hello World</p> <p>Hello World</p>
</body> </body>
</html> </html>
``` ```
### loadData ### loadData
...@@ -1343,6 +1340,24 @@ struct Index { ...@@ -1343,6 +1340,24 @@ struct Index {
} }
``` ```
HTML file to be loaded:
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
Hello world!
</body>
<script type="text/javascript">
function htmlTest() {
str = objName.test("test function")
console.log('objName.test result:'+ str)
}
</script>
</html>
```
### runJavaScript ### runJavaScript
runJavaScript(script: string, callback : AsyncCallback\<string>): void runJavaScript(script: string, callback : AsyncCallback\<string>): void
...@@ -1406,6 +1421,24 @@ struct WebComponent { ...@@ -1406,6 +1421,24 @@ struct WebComponent {
} }
``` ```
HTML file to be loaded:
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
Hello world!
</body>
<script type="text/javascript">
function test() {
console.log('Ark WebComponent')
return "This value is from index.html"
}
</script>
</html>
```
### runJavaScript ### runJavaScript
runJavaScript(script: string): Promise\<string> runJavaScript(script: string): Promise\<string>
...@@ -1444,11 +1477,9 @@ import web_webview from '@ohos.web.webview' ...@@ -1444,11 +1477,9 @@ import web_webview from '@ohos.web.webview'
@Component @Component
struct WebComponent { struct WebComponent {
controller: web_webview.WebviewController = new web_webview.WebviewController(); controller: web_webview.WebviewController = new web_webview.WebviewController();
@State webResult: string = '';
build() { build() {
Column() { Column() {
Text(this.webResult).fontSize(20)
Web({ src: $rawfile('index.html'), controller: this.controller }) Web({ src: $rawfile('index.html'), controller: this.controller })
.javaScriptAccess(true) .javaScriptAccess(true)
.onPageEnd(e => { .onPageEnd(e => {
...@@ -1470,6 +1501,23 @@ struct WebComponent { ...@@ -1470,6 +1501,23 @@ struct WebComponent {
} }
``` ```
HTML file to be loaded:
```html
<!-- index.html -->
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<body>
Hello world!
</body>
<script type="text/javascript">
function test() {
console.log('Ark WebComponent')
return "This value is from index.html"
}
</script>
</html>
```
### runJavaScriptExt<sup>10+</sup> ### runJavaScriptExt<sup>10+</sup>
...@@ -1569,8 +1617,11 @@ struct WebComponent { ...@@ -1569,8 +1617,11 @@ struct WebComponent {
} }
} }
} }
```
//index.html HTML file to be loaded:
```html
<!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-gb"> <html lang="en-gb">
<body> <body>
...@@ -1681,8 +1732,11 @@ struct WebComponent { ...@@ -1681,8 +1732,11 @@ struct WebComponent {
} }
} }
} }
```
//index.html HTML file to be loaded:
```html
<!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en-gb"> <html lang="en-gb">
<body> <body>
...@@ -2178,14 +2232,15 @@ struct WebComponent { ...@@ -2178,14 +2232,15 @@ struct WebComponent {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
} }
}) })
Web({ src: $rawfile('xxx.html'), controller: this.controller }) Web({ src: $rawfile('index.html'), controller: this.controller })
} }
} }
} }
``` ```
HTML file to be loaded:
```html ```html
<!--xxx.html--> <!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -2973,14 +3028,15 @@ struct WebComponent { ...@@ -2973,14 +3028,15 @@ struct WebComponent {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
} }
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: $rawfile('index.html'), controller: this.controller })
} }
} }
} }
``` ```
HTML file to be loaded:
```html ```html
<!--xxx.html--> <!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -3045,14 +3101,15 @@ struct WebComponent { ...@@ -3045,14 +3101,15 @@ struct WebComponent {
console.error(`ErrorCode: ${error.code}, Message: ${error.message}`); console.error(`ErrorCode: ${error.code}, Message: ${error.message}`);
} }
}) })
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: $rawfile('index.html'), controller: this.controller })
} }
} }
} }
``` ```
HTML file to be loaded:
```html ```html
<!--xxx.html--> <!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -3123,8 +3180,9 @@ struct WebComponent { ...@@ -3123,8 +3180,9 @@ struct WebComponent {
} }
``` ```
HTML file to be loaded:
```html ```html
<!--xxx.html--> <!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -3640,7 +3698,7 @@ struct WebComponent { ...@@ -3640,7 +3698,7 @@ struct WebComponent {
.onClick(() => { .onClick(() => {
try { try {
let state = this.controller.serializeWebState(); let state = this.controller.serializeWebState();
// Obtain the value of globalThis.cacheDir from MainAbility.ts. // globalThis.cacheDir is obtained from EntryAbility.ts.
let path = globalThis.cacheDir; let path = globalThis.cacheDir;
path += '/WebState'; path += '/WebState';
// Synchronously open a file. // Synchronously open a file.
...@@ -3657,14 +3715,14 @@ struct WebComponent { ...@@ -3657,14 +3715,14 @@ struct WebComponent {
} }
``` ```
2. Modify **MainAbility.ts**. 2. Modify the **EntryAbility.ts** file.
Obtain the path of the application cache file. Obtain the path of the application cache file.
```ts ```ts
// xxx.ts // xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility'; import UIAbility from '@ohos.app.ability.UIAbility';
import web_webview from '@ohos.web.webview'; import web_webview from '@ohos.web.webview';
export default class MainAbility extends UIAbility { export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) { onCreate(want, launchParam) {
// Bind cacheDir to the globalThis object to implement data synchronization between the UIAbility component and the page. // Bind cacheDir to the globalThis object to implement data synchronization between the UIAbility component and the page.
globalThis.cacheDir = this.context.cacheDir; globalThis.cacheDir = this.context.cacheDir;
...@@ -3712,7 +3770,7 @@ struct WebComponent { ...@@ -3712,7 +3770,7 @@ struct WebComponent {
Button('RestoreWebState') Button('RestoreWebState')
.onClick(() => { .onClick(() => {
try { try {
// Obtain the value of globalThis.cacheDir from MainAbility.ts. // globalThis.cacheDir is obtained from EntryAbility.ts.
let path = globalThis.cacheDir; let path = globalThis.cacheDir;
path += '/WebState'; path += '/WebState';
// Synchronously open a file. // Synchronously open a file.
...@@ -3739,14 +3797,14 @@ struct WebComponent { ...@@ -3739,14 +3797,14 @@ struct WebComponent {
} }
``` ```
2. Modify **MainAbility.ts**. 2. Modify the **EntryAbility.ts** file.
Obtain the path of the application cache file. Obtain the path of the application cache file.
```ts ```ts
// xxx.ts // xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility'; import UIAbility from '@ohos.app.ability.UIAbility';
import web_webview from '@ohos.web.webview'; import web_webview from '@ohos.web.webview';
export default class MainAbility extends UIAbility { export default class EntryAbility extends UIAbility {
onCreate(want, launchParam) { onCreate(want, launchParam) {
// Bind cacheDir to the globalThis object to implement data synchronization between the UIAbility component and the page. // Bind cacheDir to the globalThis object to implement data synchronization between the UIAbility component and the page.
globalThis.cacheDir = this.context.cacheDir; globalThis.cacheDir = this.context.cacheDir;
......
en/application-dev/reference/arkui-ts/ts-basic-components-web.md
浏览文件 @ 7901b57f
...@@ -87,11 +87,11 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) ...@@ -87,11 +87,11 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
Example of loading local resource files in the sandbox: 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. 1. Use [globalthis](../../application-models/uiability-data-sync-with-ui.md#using-globalthis-between-uiability-and-ui-page) to obtain the path of the sandbox.
```ts ```ts
// xxx.ets // xxx.ets
import web_webview from '@ohos.web.webview' import web_webview from '@ohos.web.webview'
let url = 'file://' + globalThis.filesDir + '/xxx.html' let url = 'file://' + globalThis.filesDir + '/index.html'
@Entry @Entry
@Component @Component
...@@ -106,9 +106,9 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) ...@@ -106,9 +106,9 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
} }
``` ```
2. Modify the **MainAbility.ts** file. 2. Modify the **EntryAbility.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). 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 Application File Paths](../../application-models/application-context-stage.md#obtaining-application-file-paths).
```ts ```ts
// xxx.ts // xxx.ts
import UIAbility from '@ohos.app.ability.UIAbility'; import UIAbility from '@ohos.app.ability.UIAbility';
...@@ -123,6 +123,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController}) ...@@ -123,6 +123,7 @@ Web(options: { src: ResourceStr, controller: WebviewController | WebController})
} }
``` ```
HTML file to be loaded:
```html ```html
<!-- index.html --> <!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
...@@ -587,15 +588,16 @@ Sets whether to display the horizontal scrollbar, including the default system s ...@@ -587,15 +588,16 @@ Sets whether to display the horizontal scrollbar, including the default system s
controller: web_webview.WebviewController = new web_webview.WebviewController() controller: web_webview.WebviewController = new web_webview.WebviewController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: $rawfile('index.html'), controller: this.controller })
.horizontalScrollBarAccess(true) .horizontalScrollBarAccess(true)
} }
} }
} }
``` ```
HTML file to be loaded:
```html ```html
<!--xxx.html--> <!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -640,15 +642,16 @@ Sets whether to display the vertical scrollbar, including the default system scr ...@@ -640,15 +642,16 @@ Sets whether to display the vertical scrollbar, including the default system scr
controller: web_webview.WebviewController = new web_webview.WebviewController() controller: web_webview.WebviewController = new web_webview.WebviewController()
build() { build() {
Column() { Column() {
Web({ src: 'www.example.com', controller: this.controller }) Web({ src: $rawfile('index.html'), controller: this.controller })
.verticalScrollBarAccess(true) .verticalScrollBarAccess(true)
} }
} }
} }
``` ```
HTML file to be loaded:
```html ```html
<!--xxx.html--> <!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -669,6 +672,11 @@ Sets whether to display the vertical scrollbar, including the default system scr ...@@ -669,6 +672,11 @@ Sets whether to display the vertical scrollbar, including the default system scr
</html> </html>
``` ```
### password
password(password: boolean)
Sets whether the password should be saved. This API is a void API.
### cacheMode ### cacheMode
...@@ -1236,6 +1244,18 @@ Sets whether to enable forcible dark mode for the web page. By default, this fea ...@@ -1236,6 +1244,18 @@ Sets whether to enable forcible dark mode for the web page. By default, this fea
} }
``` ```
### tableData
tableData(tableData: boolean)
Sets whether form data should be saved. This API is a void API.
### wideViewModeAccess
wideViewModeAccess(wideViewModeAccess: boolean)
Sets whether to support the viewport attribute of the HTML **\<meta>** tag. This API is a void API.
### pinchSmooth<sup>9+</sup> ### pinchSmooth<sup>9+</sup>
pinchSmooth(isEnabled: boolean) pinchSmooth(isEnabled: boolean)
...@@ -1420,7 +1440,7 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag ...@@ -1420,7 +1440,7 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag
controller: web_webview.WebviewController = new web_webview.WebviewController() controller: web_webview.WebviewController = new web_webview.WebviewController()
build() { build() {
Column() { Column() {
Web({ src: $rawfile("xxx.html"), controller: this.controller }) Web({ src: $rawfile("index.html"), controller: this.controller })
.onAlert((event) => { .onAlert((event) => {
console.log("event.url:" + event.url) console.log("event.url:" + event.url)
console.log("event.message:" + event.message) console.log("event.message:" + event.message)
...@@ -1450,8 +1470,9 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag ...@@ -1450,8 +1470,9 @@ Called when **alert()** is invoked to display an alert dialog box on the web pag
} }
``` ```
``` HTML file to be loaded:
<!--xxx.html--> ```html
<!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -1502,7 +1523,7 @@ Called when this page is about to exit after the user refreshes or closes the pa ...@@ -1502,7 +1523,7 @@ Called when this page is about to exit after the user refreshes or closes the pa
build() { build() {
Column() { Column() {
Web({ src: $rawfile("xxx.html"), controller: this.controller }) Web({ src: $rawfile("index.html"), controller: this.controller })
.onBeforeUnload((event) => { .onBeforeUnload((event) => {
console.log("event.url:" + event.url) console.log("event.url:" + event.url)
console.log("event.message:" + event.message) console.log("event.message:" + event.message)
...@@ -1532,8 +1553,9 @@ Called when this page is about to exit after the user refreshes or closes the pa ...@@ -1532,8 +1553,9 @@ Called when this page is about to exit after the user refreshes or closes the pa
} }
``` ```
``` HTML file to be loaded:
<!--xxx.html--> ```html
<!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -1584,7 +1606,7 @@ Called when **confirm()** is invoked by the web page. ...@@ -1584,7 +1606,7 @@ Called when **confirm()** is invoked by the web page.
build() { build() {
Column() { Column() {
Web({ src: $rawfile("xxx.html"), controller: this.controller }) Web({ src: $rawfile("index.html"), controller: this.controller })
.onConfirm((event) => { .onConfirm((event) => {
console.log("event.url:" + event.url) console.log("event.url:" + event.url)
console.log("event.message:" + event.message) console.log("event.message:" + event.message)
...@@ -1614,8 +1636,9 @@ Called when **confirm()** is invoked by the web page. ...@@ -1614,8 +1636,9 @@ Called when **confirm()** is invoked by the web page.
} }
``` ```
``` HTML file to be loaded:
<!--xxx.html--> ```html
<!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -1673,7 +1696,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul ...@@ -1673,7 +1696,7 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
build() { build() {
Column() { Column() {
Web({ src: $rawfile("xxx.html"), controller: this.controller }) Web({ src: $rawfile("index.html"), controller: this.controller })
.onPrompt((event) => { .onPrompt((event) => {
console.log("url:" + event.url) console.log("url:" + event.url)
console.log("message:" + event.message) console.log("message:" + event.message)
...@@ -1704,8 +1727,9 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul ...@@ -1704,8 +1727,9 @@ onPrompt(callback: (event?: { url: string; message: string; value: string; resul
} }
``` ```
``` HTML file to be loaded:
<!--xxx.html--> ```html
<!--index.html-->
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
...@@ -1776,6 +1800,8 @@ Called to notify the host application of a JavaScript console message. ...@@ -1776,6 +1800,8 @@ Called to notify the host application of a JavaScript console message.
onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void) onDownloadStart(callback: (event?: { url: string, userAgent: string, contentDisposition: string, mimetype: string, contentLength: number }) => void)
Instructs the main application to start downloading a file.
**Parameters** **Parameters**
| Name | Type | Description | | Name | Type | Description |
...@@ -2084,6 +2110,26 @@ Called when loading of the web page is complete. This API is used by an applicat ...@@ -2084,6 +2110,26 @@ Called when loading of the web page is complete. This API is used by an applicat
} }
``` ```
### onSslErrorReceive<sup>(deprecated)</sup>
onSslErrorReceive(callback: (event?: { handler: Function, error: object }) => void)
Called when an SSL error occurs during resource loading.
> **NOTE**
>
> This API is supported since API version 8 and deprecated since API version 9. You are advised to use [onSslErrorEventReceive<sup>9+</sup>](#onsslerroreventreceive9) instead.
### onFileSelectorShow<sup>(deprecated)</sup>
onFileSelectorShow(callback: (event?: { callback: Function, fileSelector: object }) => void)
Called to process an HTML form whose input type is **file**, in response to the tapping of the **Select File** button.
> **NOTE**
>
> This API is supported since API version 8 and deprecated since API version 9. You are advised to use [onShowFileSelector<sup>9+</sup>](#onshowfileselector9) instead.
### onRenderExited<sup>9+</sup> ### onRenderExited<sup>9+</sup>
onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void) onRenderExited(callback: (event?: { renderExitReason: RenderExitReason }) => void)
...@@ -3308,7 +3354,7 @@ Called when the **\<Web>** component is about to access a URL. This API is used ...@@ -3308,7 +3354,7 @@ Called when the **\<Web>** component is about to access a URL. This API is used
| Name | Type | Description | | Name | Type | Description |
| ------- | ---------------------------------------- | --------- | | ------- | ---------------------------------------- | --------- |
| request | [Webresourcerequest](#webresourcerequest) | Information about the URL request.| | request | [WebResourceRequest](#webresourcerequest) | Information about the URL request.|
**Return value** **Return value**
...@@ -4933,6 +4979,7 @@ This API is deprecated since API version 9. You are advised to use [registerJava ...@@ -4933,6 +4979,7 @@ This API is deprecated since API version 9. You are advised to use [registerJava
} }
``` ```
HTML file to be loaded:
```html ```html
<!-- index.html --> <!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
...@@ -4993,7 +5040,7 @@ This API is deprecated since API version 9. You are advised to use [runJavaScrip ...@@ -4993,7 +5040,7 @@ This API is deprecated since API version 9. You are advised to use [runJavaScrip
} }
} }
``` ```
HTML file to be loaded:
```html ```html
<!-- index.html --> <!-- index.html -->
<!DOCTYPE html> <!DOCTYPE html>
...@@ -5009,7 +5056,6 @@ This API is deprecated since API version 9. You are advised to use [runJavaScrip ...@@ -5009,7 +5056,6 @@ This API is deprecated since API version 9. You are advised to use [runJavaScrip
} }
</script> </script>
</html> </html>
``` ```
### stop<sup>(deprecated)</sup> ### stop<sup>(deprecated)</sup>
...@@ -5075,17 +5121,12 @@ This API is deprecated since API version 9. You are advised to use [clearHistory ...@@ -5075,17 +5121,12 @@ This API is deprecated since API version 9. You are advised to use [clearHistory
Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management. Manages behavior of cookies in **\<Web>** components. All **\<Web>** components in an application share a **WebCookie**. You can use the **getCookieManager** API in **controller** to obtain the **WebCookie** for subsequent cookie management.
### setCookie<sup>(deprecated)</sup> ### setCookie<sup>(deprecated)</sup>
setCookie(url: string, value: string): boolean
Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise. setCookie(): boolean
This API is deprecated since API version 9. You are advised to use [setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie) instead.
**Parameters** Sets the cookie. This API returns the result synchronously. Returns **true** if the operation is successful; returns **false** otherwise.
| Name | Type | Mandatory | Default Value | Description | This API is deprecated since API version 9. You are advised to use [setCookie<sup>9+</sup>](../apis/js-apis-webview.md#setcookie) instead.
| ----- | ------ | ---- | ---- | ----------------- |
| url | string | Yes | - | URL of the cookie to set. A complete URL is recommended.|
| value | string | Yes | - | Value of the cookie to set. |
**Return value** **Return value**
...@@ -5093,31 +5134,12 @@ This API is deprecated since API version 9. You are advised to use [setCookie<su ...@@ -5093,31 +5134,12 @@ This API is deprecated since API version 9. You are advised to use [setCookie<su
| ------- | ------------- | | ------- | ------------- |
| boolean | Returns **true** if the operation is successful; returns **false** otherwise.| | boolean | Returns **true** if the operation is successful; returns **false** otherwise.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('setCookie')
.onClick(() => {
let result = this.controller.getCookieManager().setCookie("https://www.example.com", "a=b")
console.log("result: " + result)
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
### saveCookie<sup>(deprecated)</sup> ### saveCookie<sup>(deprecated)</sup>
saveCookie(): boolean saveCookie(): boolean
Saves the cookies in the memory to the drive. This API returns the result synchronously. Saves the cookies in the memory to the drive. This API returns the result synchronously.
This API is deprecated since API version 9. You are advised to use [saveCookieAsync<sup>9+</sup>](../apis/js-apis-webview.md#savecookieasync) instead. This API is deprecated since API version 9. You are advised to use [saveCookieAsync<sup>9+</sup>](../apis/js-apis-webview.md#savecookieasync) instead.
**Return value** **Return value**
...@@ -5125,25 +5147,3 @@ This API is deprecated since API version 9. You are advised to use [saveCookieAs ...@@ -5125,25 +5147,3 @@ This API is deprecated since API version 9. You are advised to use [saveCookieAs
| Type | Description | | Type | Description |
| ------- | -------------------- | | ------- | -------------------- |
| boolean | Operation result.| | boolean | Operation result.|
**Example**
```ts
// xxx.ets
@Entry
@Component
struct WebComponent {
controller: WebController = new WebController()
build() {
Column() {
Button('saveCookie')
.onClick(() => {
let result = this.controller.getCookieManager().saveCookie()
console.log("result: " + result)
})
Web({ src: 'www.example.com', controller: this.controller })
}
}
}
```
en/application-dev/web/web-debugging-with-devtools.md
浏览文件 @ 7901b57f
...@@ -28,8 +28,17 @@ To use DevTools for frontend page debugging, perform the following steps: ...@@ -28,8 +28,17 @@ To use DevTools for frontend page debugging, perform the following steps:
} }
} }
``` ```
2. Declare the required permission in the **module.json5** file of the application project in DevEco Studio.
2. Connect your device to a PC, and configure port mapping on the PC as follows: ```
"requestPermissions":[
{
"name" : "ohos.permission.INTERNET"
}
]
```
3. Connect your device to a PC, and configure port mapping on the PC as follows:
``` ```
// Configure port mapping. // Configure port mapping.
...@@ -38,7 +47,7 @@ To use DevTools for frontend page debugging, perform the following steps: ...@@ -38,7 +47,7 @@ To use DevTools for frontend page debugging, perform the following steps:
hdc fport ls hdc fport ls
``` ```
3. Enter **chrome://inspect/\#devices** in the address box of the Chrome browser on the PC. Once the device is identified, you can get started with page debugging. The debugging effect is as follows: 4. Enter **chrome://inspect/\#devices** in the address box of the Chrome browser on the PC. Once the device is identified, you can get started with page debugging. The debugging effect is as follows:
**Figure 1** Page debugging effect **Figure 1** Page debugging effect
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或