createWebViewDialog

Supported from HBuilderX 3.0.0

Create a dialog box based on the WebView page, render the main content of the dialog box through html, and customize the dialog box title, buttons, etc. The button is added to the button group at the bottom of the dialog box. Clicking the button will send a message to the WebView, and the developer can monitor it through js in the html.

Parameter

Name Type Description
dialogOptions DialogOptions Basic attributes of the dialog box, including title, button, etc
webviewOptions WebViewOptions Content settings for a webview.

Returns

Type Description
WebViewDialog WebViewDialog WebViewDialog, control dialog box display and close etc.

Example

  1. let webviewDialog = hx.window.createWebViewDialog({
  2.     modal: false,
  3.     title: "Delete the file？",
  4.     description: "It cannot be restored after deletion, please operate with caution. You can also go to the recycle bin.",
  5.     dialogButtons: [
  6.         "Confirm", "Cancel"
  7.     ],
  8.     size: {
  9.         width: 400,
  10.         height: 300
  11.     }
  12. }, {
  13.     enableScripts: true
  14. });
  16. let webview = webviewDialog.webView;
  17. webview.html = `
  18.     <html>
  19.     <script>
  20.     function initReceive() {
  21.         hbuilderx.onDidReceiveMessage((msg)=>{
  22.             if(msg.type == 'DialogButtonEvent'){
  23.                 let button = msg.button;
  24.                 if(button == 'Confirm'){
  25.                     //TODO Process form submit
  26.                 }else if(button == 'Cancel'){
  27.                     //TODO Process cancel logic
  28.                         hbuilderx.postMessage({
  29.                         command: 'cancel'
  30.                     });
  31.                 }
  32.             }
  33.         });
  34.     }
  35.     window.addEventListener("hbuilderxReady", initReceive);
  36.     </script>
  37.     </html>
  38. `;
  40. webview.onDidReceiveMessage((msg) => {
  41.     console.log(msg)
  42.     if (msg.command == 'cancel') {
  43.         webviewDialog.close();
  44.     }
  45. });
  47. let promi = webviewDialog.show();
  48. promi.then(function (data) {
  49.     // process error message
  50. });

WebViewOptions

Supported from 2.8.1+

Content settings for a webview.

Attribute list

Attribute name Type Description
enableScripts Boolean Whether to enable JavaScript script support

DialogOptions

Options to configure the behaviour of dialog.

Attribute list

Attribute name Type Description
modal Boolean Indicates that this dialog is modal.

| |title | String | Dialog title. | |description | String | Dialog subtitle | |dialogButtons | Array<String> | Buttons group of dialog | |size | Size of dialog | The size of the dialog box that needs to be displayed,setting:{ width: Number, height: Number } |

  • All the above attributes are optional, but not recommended

WebViewDialog

WebView properties refer toWebView。

Attribute list

Attribute name Type Description
webView WebView WebView object
id String Dialog id used for internal communication

show

Reveal the view in the UI.

Returns

Type Description
Promise<Object> Promise Object, Object structure：{“code”:2, “message”:”Built-in browser not exist.”}

Error Codes

Error code Description
0 None
1 The built-in browser plug-in is downloading
2 The built-in browser plug-in does not exist

close

Close the dialog box

displayError

A red error message will be displayed under the subtitle of the dialog box.

Parameter

Name Type Description
text String Error message

setButtonStatus

Set the state of the specified button in the dialog box, and the dialog box button createWebViewDialog is provided by the parameter DialogOptions.

Parameter

Name Type Description
button String Button text
status Array<String> Button status list

Button status description

Status Description
“loading” Add loading prompt before button text
“disable” Disable button, can be used in combination with loading

Example

  1.     webviewDialog.setButtonStatus("Confirm", ["loading", "disable"]);

onDialogClosed

Callback when the registration window is closed.

Name Type Description
callback Function When the window is displayed, the user closes or calls close event, the callback is triggered, no parameters.

Returns

Type Description
Disposable Disposable object