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