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