# 使用Web组件显示网页弹框

在HTML中，可以使用JavaScript创建三种类型的弹框：警告框window.alert(message)、确认框window.confirm(message)和提示框window.prompt(message, defaultValue)。这些弹框可以用于向用户传递信息、确认操作或请求输入。

当前，ArkWeb暂未提供默认的应用弹框。如果需要网页的弹框能够正常使用，应用需要通过onAlert、onConfirm和onPrompt接口自定义弹框功能。

#### 实现Alert弹框

window.alert()用于显示一个包含可选信息的对话框。警告框用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。

*   可选参数message是要显示在警告对话框中的字符串，如果传入其他类型的值，会转换成字符串。
*   该方法不存在返回值。

应用可以通过onAlert事件监听网页alert方法，并创建合适的弹框。

*   用AlertDialog创建弹框。
    
    ```
    import { webview } from '@kit.ArkWeb';
    
    @Entry
    @Component
    struct Index {
      @State message: string = 'Hello World';
      webviewController: webview.WebviewController = new webview.WebviewController();
      uiContext: UIContext = this.getUIContext();
    
      build() {
        Row() {
          Web({ src: $rawfile('test.html'), controller: this.webviewController })
            .onAlert((event) => {
              if (event) {
                console.info('event.url:' + event.url);
                console.info('event.message:' + event.message);
                this.uiContext.showAlertDialog({
                  title: 'Warning',
                  message: event.message,
                  confirm: {
                    value: 'confirm',
                    action: () => {
                      console.info('Alert confirmed.');
                      event.result.handleConfirm();
                    }
                  },
                  cancel: () => {
                    event.result.handleCancel();
                  }
                })
              }
              return true;
            })
        }
      }
    }
    ```
    
    加载的HTML。
    
    ```
    <!-- test.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            button, label, input {
            margin: 5px 0;
            }
        </style>
    </head>
    <body>
    <input type="text" id="alert-message" placeholder="message for alert"><br/>
    <button onclick="handleAlert()">alert</button><br/>
    <script>
        function handleAlert() {
            let message = document.getElementById("alert-message").value;
            let result = window.alert(message ? message : 'alert');
        }
    </script>
    </body>
    </html>
    ```
    
*   用AlertDialog创建弹框。
    
    ```
    import { AlertDialog } from '@kit.ArkUI';
    import { webview } from '@kit.ArkWeb';
    
    @Entry
    @Component
    struct AlertDialogPage {
      @State message: string = 'Hello World';
      @State title: string = 'Hello World';
      @State subtitle: string = '';
      @State result: JsResult | null = null;
      webviewController: webview.WebviewController = new webview.WebviewController();
      dialogControllerAlert: CustomDialogController = new CustomDialogController({
        builder: AlertDialog({
          primaryTitle: this.title,
          secondaryTitle: this.subtitle,
          content: this.message,
          primaryButton: {
            value: 'confirm',
            role: ButtonRole.ERROR,
            action: () => {
              console.info('Callback when the second button is clicked');
              this.result?.handleConfirm();
            }
          },
        }),
        onWillDismiss: () => {
          this.result?.handleCancel();
          this.dialogControllerAlert.close();
        }
      })
      build() {
        Column() {
          Web({ src: $rawfile('alert.html'), controller: this.webviewController })
            .onAlert((event) => {
              if (event) {
                console.info('event.url:' + event.url);
                console.info('event.message:' + event.message);
                this.title = 'Warning';
                this.message = event.message;
                this.result = event.result;
                this.dialogControllerAlert.open();
              }
              return true;
            })
        }
      }
    }
    ```
    
    加载的html。
    
    ```
    <!-- alert.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            button, label, input {
            margin: 5px 0;
            }
        </style>
    </head>
    <body>
    <input type="text" id="alert-message" placeholder="message for alert"><br/>
    <button onclick="handleAlert()">alert</button><br/>
    <script>
        function handleAlert() {
            let message = document.getElementById("alert-message").value;
            let result = window.alert(message ? message : 'alert');
        }
    </script>
    </body>
    </html>
    ```
    

#### 实现Confirm弹框

window.confirm()用于显示一个包含可选消息的对话框，并等待用户确认或取消该对话框。

*   可选参数message是要显示在对话框中的字符串，如果传入其他类型的值，会转换成字符串。
*   该方法返回一个布尔值，表示是否选择了确定（true）或取消（false）。如果应用忽略了页面内的对话框，那么返回值总是false。

确认框用于验证用户是否接受某个操作，常用于询问用户是否离开网页，以防页面表单等数据丢失。

应用可以通过onConfirm事件监听网页confirm方法，并创建合适的弹框。

*   用AlertDialog创建弹框。
    
    ```
    import { webview } from '@kit.ArkWeb';
    
    @Entry
    @Component
    struct Index {
      @State message: string = 'Hello World';
      webviewController: webview.WebviewController = new webview.WebviewController();
      uiContext: UIContext = this.getUIContext();
    
      build() {
        Column() {
          Web({ src: $rawfile('test.html'), controller: this.webviewController })
            .onConfirm((event) => {
              if (event) {
                console.info('event.url:' + event.url);
                console.info('event.message:' + event.message);
                this.uiContext.showAlertDialog({
                  title: 'Confirm',
                  message: event.message,
                  primaryButton: {
                    value: 'cancel',
                    action: () => {
                      event.result.handleCancel();
                    }
                  },
                  secondaryButton: {
                    value: 'ok',
                    action: () => {
                      event.result.handleConfirm();
                    }
                  },
                  cancel: () => {
                    event.result.handleCancel();
                  }
                })
              }
              return true;
            })
        }
      }
    }
    ```
    
    加载的html。
    
    ```
    <!-- test.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            button, label, input {
            margin: 5px 0;
            }
        </style>
    </head>
    <body>
    result：<label id="confirmLabel" for="confirm"></label><br/>
    <input type="text" id="confirm-message" placeholder="message for confirm"><br/>
    <button id="confirm" onclick="handleConfirm()">confirm</button><br/>
    <script>
        function handleConfirm() {
            let message = document.getElementById("confirm-message").value;
            let result = window.confirm(message ? message : 'confirm');
            console.info(result);
            document.getElementById("confirmLabel").innerHTML=String(result);
        }
    </script>
    </body>
    </html>
    ```
    
*   用ConfirmDialog创建弹框。
    
    ```
    import { webview } from '@kit.ArkWeb';
    import { ConfirmDialog } from '@kit.ArkUI';
    
    @Entry
    @Component
    struct DialogConfirmDialog {
      @State message: string = 'Hello World';
      @State title: string = 'Hello World';
      @State result: JsResult | null = null;
      webviewController: webview.WebviewController = new webview.WebviewController();
      isChecked = false;
      dialogControllerConfirmDialog: CustomDialogController = new CustomDialogController({
        builder: ConfirmDialog({
          title: this.title,
          content: this.message,
          // 勾选框选中状态
          isChecked: this.isChecked,
          // 勾选框说明文本
          checkTips: 'No further prompts after prohibition',
          primaryButton: {
            value: 'prohibited',
            action: () => {
              this.result?.handleCancel();
            },
          },
          secondaryButton: {
            value: 'allow',
            action: () => {
              this.isChecked = false;
              console.info('Callback when the second button is clicked');
              this.result?.handleConfirm();
            }
          },
          onCheckedChange: (checked) => {
            this.isChecked = checked;
            console.info('Callback when the checkbox is clicked');
          },
        }),
        onWillDismiss: () => {
          this.result?.handleCancel();
          this.dialogControllerConfirmDialog.close();
        },
        autoCancel: true
      })
    
      build() {
        Column() {
          Web({ src: $rawfile('confirm.html'), controller: this.webviewController })
            .onConfirm((event) => {
              if (event) {
                if (this.isChecked) {
                  event.result.handleCancel();
                } else {
                  console.info('event.url:' + event.url);
                  console.info('event.message:' + event.message);
                  this.title = 'Confirm';
                  this.message = event.message;
                  this.result = event.result;
                  this.dialogControllerConfirmDialog.open();
                }
              }
              return true;
            })
        }
      }
    }
    ```
    
    加载的html。
    
    ```
    <!-- confirm.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            button, label, input {
            margin: 5px 0;
            }
        </style>
    </head>
    <body>
    result：<label id="confirmLabel" for="confirm"></label><br/>
    <input type="text" id="confirm-message" placeholder="message for confirm"><br/>
    <button id="confirm" onclick="handleConfirm()">confirm</button><br/>
    <script>
        function handleConfirm() {
            let message = document.getElementById("confirm-message").value;
            let result = window.confirm(message ? message : 'confirm');
            console.info(result);
            document.getElementById("confirmLabel").innerHTML=String(result);
        }
    </script>
    </body>
    </html>
    ```
    

#### 实现Prompt弹框

window.prompt()用于显示一个对话框，并等待用户提交文本或取消对话框。用户需要输入某个值，然后点击确认或取消按钮。点击确认返回输入的值，点击取消返回null。

*   可选参数message是要向用户显示的一串文本。如果在提示窗口中没有什么可显示的，可以省略。
*   可选参数defaultValue是一个字符串，包含文本输入字段中显示的默认值。
*   返回值为用户输入文本的字符串，或null。

提示框用于提示用户输入某个值，常用于需要用户输入临时的口令或验证码等场景。

应用可以通过onPrompt事件监听网页prompt方法，并创建合适的弹框。

*   用CustomContentDialog创建弹框。
    
    ```
    import { CustomContentDialog } from '@kit.ArkUI';
    import { webview } from '@kit.ArkWeb';
    
    @Entry
    @Component
    struct PromptDialog {
      @State message: string = 'Hello World';
      @State title: string = 'Hello World';
      @State result: JsResult | null = null;
      promptResult: string = '';
      webviewController: webview.WebviewController = new webview.WebviewController();
      dialogController: CustomDialogController = new CustomDialogController({
        builder: CustomContentDialog({
          primaryTitle: this.title,
          contentBuilder: () => {
            this.buildContent();
          },
          buttons: [
            {
              value: 'cancel',
              buttonStyle: ButtonStyleMode.TEXTUAL,
              action: () => {
                console.info('Callback when the button is clicked');
                this.result?.handleCancel();
              }
            },
            {
              value: 'confirm',
              buttonStyle: ButtonStyleMode.TEXTUAL,
              action: () => {
                this.result?.handlePromptConfirm(this.promptResult);
              }
            }
          ],
        }),
        onWillDismiss: () => {
          this.result?.handleCancel();
          this.dialogController.close();
        }
      });
    
      // 自定义弹出框的内容区
      @Builder
      buildContent(): void {
        Column() {
          Text(this.message)
          TextInput()
            .onChange((value) => {
              this.promptResult = value;
            })
            .defaultFocus(true)
        }
        .width('100%')
      }
    
      build() {
        Column() {
          Web({ src: $rawfile('prompt.html'), controller: this.webviewController })
            .onPrompt((event) => {
              if (event) {
                console.info('event.url:' + event.url);
                console.info('event.message:' + event.message);
                console.info('event.value:' + event.value);
                this.title = 'Prompt';
                this.message = event.message;
                this.promptResult = event.value;
                this.result = event.result;
                this.dialogController.open();
              }
              return true;
            })
        }
      }
    }
    ```
    
    加载的html。
    
    ```
    <!-- prompt.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            button, label, input {
            margin: 5px 0;
            }
        </style>
    </head>
    <body>
    result：<label id="promptLabel" for="prompt"></label><br/>
    <input type="text" id="prompt-message" placeholder="message for prompt"><br/>
    <input type="text" id="prompt-value" placeholder="default value for prompt"><br/>
    <button id="prompt" onclick="handlePrompt()">prompt</button><br/>
    <script>
        function handlePrompt() {
            let message = document.getElementById("prompt-message").value;
            let defaultValue = document.getElementById("prompt-value").value;
            let result = window.prompt(message ? message : 'prompt', defaultValue);
            console.info(result);
            document.getElementById("promptLabel").innerHTML=result;
        }
    </script>
    </body>
    </html>
    ```
    

需要的资源文件string.json

```
{
  "string": [
    {
      "name": "from",
      "value": "来自"
    },
    {
      "name": "warn",
      "value": "的警告"
    },
    {
      "name": "notarize",
      "value": "确认"
    },
    {
      "name": "cancel",
      "value": "取消"
    },
    {
      "name": "info",
      "value": "的消息"
    }
  ]
}
```