• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Opening Pages in a New Window
2
3
4The **Web** component provides the capability of opening pages in a new window. You can call [multiWindowAccess()](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#multiwindowaccess9) to specify whether to allow a web page to be opened in a new window. When a new window is opened in the **Web** component, the application will receive a window opening event through **onWindowNew()**. You need to create a window for processing the window opening request in the event callback.
5
6
7> **NOTE**
8>
9> - If [allowWindowOpenMethod()](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#allowwindowopenmethod10) is set to **true**, you can open a new window in the frontend page by invoking its JavaScript functions.
10>
11> - If you do not create a window in **onWindowNew()**, set the parameter of the **ControllerHandler.setWebController()** API to null.
12
13
14In the following example, when a user clicks the **Open Page in New Window** button, the application receives a window opening event in the **onWindowNew()** callback.
15> **NOTE**
16> - When a web page requires the user to create a window, the [OnWindowNewEvent()](../reference/apis-arkweb/arkts-basic-components-web-i.md#onwindownewevent12) callback is triggered. In this callback, the value **true** of the **isUserTrigger** parameter indicates that the window is triggered by the user, and **false** indicates the opposite.
17
18
19- Application code:
20
21  ```ts
22  // xxx.ets
23  import { webview } from '@kit.ArkWeb';
24
25  // There are two Web components on the same page. When the WebComponent object opens a new window, the NewWebViewComp object is displayed.
26  @CustomDialog
27  struct NewWebViewComp {
28    controller?: CustomDialogController;
29    webviewController1: webview.WebviewController = new webview.WebviewController();
30
31    build() {
32      Column() {
33        Web({ src: "", controller: this.webviewController1 })
34          .javaScriptAccess(true)
35          .multiWindowAccess(false)
36          .onWindowExit(() => {
37            console.info("NewWebViewComp onWindowExit");
38            if (this.controller) {
39              this.controller.close();
40            }
41          })
42      }
43    }
44  }
45
46  @Entry
47  @Component
48  struct WebComponent {
49    controller: webview.WebviewController = new webview.WebviewController();
50    dialogController: CustomDialogController | null = null;
51
52    build() {
53      Column() {
54        Web({ src: $rawfile("window.html"), controller: this.controller })
55          .javaScriptAccess(true)
56            // Enable the multi-window permission.
57          .multiWindowAccess(true)
58          .allowWindowOpenMethod(true)
59          .onWindowNew((event) => {
60            if (this.dialogController) {
61              this.dialogController.close()
62            }
63            let popController: webview.WebviewController = new webview.WebviewController();
64            this.dialogController = new CustomDialogController({
65              builder: NewWebViewComp({ webviewController1: popController })
66            })
67            this.dialogController.open();
68            // Return the WebviewController object corresponding to the new window to the <Web> kernel.
69            // If the event.handler.setWebController API is not called, the render process will be blocked.
70            // If no new window is created, set the value of event.handler.setWebController to null to notify the Web component that no new window is created.
71            event.handler.setWebController(popController);
72          })
73      }
74    }
75  }
76  ```
77
78
79- Code of the **window.html** page:
80
81  ```html
82  <!DOCTYPE html>
83  <html>
84  <head>
85      <meta name="viewport" content="width=device-width"/>
86      <title>WindowEvent</title>
87  </head>
88  <body>
89  <input type="button" value="Open Page in New Window" onclick="OpenNewWindow()">
90  <script type="text/javascript">
91      function OpenNewWindow()
92      {
93          var txt ='Opened window'
94          let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
95          openedWindow.document.write("<p>" + "<br><br>" + txt.fontsize(10) + "</p>");
96          openedWindow.focus();
97      }
98  </script>
99  </body>
100  </html>
101  ```
102
103**Figure 1** Effect of opening a page in a new window
104
105![web-open-in-new-window](figures/web-open-in-new-window.png)
106
107
108## Samples
109
110The following samples are provided to help you better understand how to create a window:
111
112- [Browser (ArkTS) (Full SDK) (API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/Browser)
113