1# 在新窗口中打开页面
2
3
4Web组件提供了在新窗口打开页面的能力,开发者可以通过[multiWindowAccess()](../reference/apis-arkweb/ts-basic-components-web.md#multiwindowaccess9)接口来设置是否允许网页在新窗口打开。当有新窗口打开时,应用侧会在[onWindowNew()](../reference/apis-arkweb/ts-basic-components-web.md#onwindownew9)接口中收到Web组件新窗口事件,开发者需要在此接口事件中,新建窗口来处理Web组件窗口请求。
5
6
7> **说明:**
8>
9> - [allowWindowOpenMethod()](../reference/apis-arkweb/ts-basic-components-web.md#allowwindowopenmethod10)接口设置为true时,前端页面通过JavaScript函数调用的方式打开新窗口。
10>
11> - 如果开发者在[onWindowNew()](../reference/apis-arkweb/ts-basic-components-web.md#onwindownew9)接口通知中没有创建新窗口,需要将[ControllerHandler.setWebController()](../reference/apis-arkweb/ts-basic-components-web.md#setwebcontroller9)接口参数设置成null。
12
13
14如下面的本地示例,当用户点击“新窗口中打开网页”按钮时,应用侧会在[onWindowNew()](../reference/apis-arkweb/ts-basic-components-web.md#onwindownew9)接口中收到Web组件新窗口事件。
15
16
17- 应用侧代码。
18
19  ```ts
20  // xxx.ets
21  import { webview } from '@kit.ArkWeb';
22
23  // 在同一page页有两个Web组件。在WebComponent新开窗口时,会跳转到NewWebViewComp。
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            // 需要使能multiWindowAccess
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            // 将新窗口对应WebviewController返回给Web内核。
67            // 若不调用event.handler.setWebController接口,会造成render进程阻塞。
68            // 如果没有创建新窗口,调用event.handler.setWebController接口时设置成null,通知Web没有创建新窗口。
69            event.handler.setWebController(popController);
70          })
71      }
72    }
73  }
74  ```
75
76
77- window.html页面代码。
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="新窗口中打开网页" onclick="OpenNewWindow()">
88  <script type="text/javascript">
89      function OpenNewWindow()
90      {
91          var txt = '打开的窗口';
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**图1** 新窗口中打开页面效果图
102
103![web-open-in-new-window](figures/web-open-in-new-window.png)
104
105
106## 相关实例
107
108针对创建新窗口,有以下相关实例可供参考:
109
110- [浏览器(ArkTS)(Full SDK)(API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/Browser)