• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 在新窗口中打开页面
2
3
4Web组件提供了在新窗口打开页面的能力，开发者可以通过[multiWindowAccess()](../reference/arkui-ts/ts-basic-components-web.md#multiwindowaccess9)接口来设置是否允许网页在新窗口打开。当有新窗口打开时，应用侧会在[onWindowNew()](../reference/arkui-ts/ts-basic-components-web.md#onwindownew9)接口中收到Web组件新窗口事件，开发者需要在此接口事件中，新建窗口来处理Web组件窗口请求。
5
6
7> **说明：**
8>
9> - [allowWindowOpenMethod()](../reference/arkui-ts/ts-basic-components-web.md#allowwindowopenmethod10)接口设置为true时，前端页面通过JavaScript函数调用的方式打开新窗口。
10>
11> - 如果开发者在[onWindowNew()](../reference/arkui-ts/ts-basic-components-web.md#onwindownew9)接口通知中不需要打开新窗口，需要将[ControllerHandler.setWebController()](../reference/arkui-ts/ts-basic-components-web.md#setwebcontroller9)接口返回值设置成null。
12
13
14如下面的本地示例，当用户点击“新窗口中打开网页”按钮时，应用侧会在[onWindowNew()](../reference/arkui-ts/ts-basic-components-web.md#onwindownew9)接口中收到Web组件新窗口事件。
15
16
17- 应用侧代码。
18
19  ```ts
20  // xxx.ets
21  import web_webview from '@ohos.web.webview'
22
23  //在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
24  @CustomDialog
25  struct NewWebViewComp {
26  controller?: CustomDialogController
27  webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
28  build() {
29      Column() {
30        Web({ src: "", controller: this.webviewController1 })
31          .javaScriptAccess(true)
32          .multiWindowAccess(false)
33          .onWindowExit(()=> {
34            console.info("NewWebViewComp onWindowExit")
35            if (this.controller) {
36              this.controller.close()
37            }
38          })
39        }
40    }
41  }
42
43  @Entry
44  @Component
45  struct WebComponent {
46      controller: web_webview.WebviewController = new web_webview.WebviewController()
47      dialogController: CustomDialogController | null = null
48      build() {
49        Column() {
50          Web({ src:$rawfile("window.html"), controller: this.controller })
51            .javaScriptAccess(true)
52           //需要使能multiWindowAccess
53            .multiWindowAccess(true)
54            .allowWindowOpenMethod(true)
55            .onWindowNew((event) => {
56            if (this.dialogController) {
57              this.dialogController.close()
58            }
59            let popController:web_webview.WebviewController = new web_webview.WebviewController()
60            this.dialogController = new CustomDialogController({
61              builder: NewWebViewComp({webviewController1: popController})
62            })
63            this.dialogController.open()
64            //将新窗口对应WebviewController返回给Web内核。
65            //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
66            //若不调用event.handler.setWebController接口，会造成render进程阻塞。
67            event.handler.setWebController(popController)
68          })
69      }
70    }
71  }
72  ```
73
74
75- window.html页面代码。
76
77  ```html
78   <!DOCTYPE html>
79  <html>
80  <head>
81      <meta charset="utf-8">
82      <title>WindowEvent</title>
83  </head>
84  <body>
85  <input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
86  <script type="text/javascript">
87      function OpenNewWindow()
88      {
89          let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
90          openedWindow.document.write("<p>这是我的窗口</p>");
91          openedWindow.focus();
92
93      }
94  </script>
95  </body>
96  </html>
97  ```
98## 相关实例
99
100针对创建新窗口，有以下相关实例可供参考：
101
102- [浏览器（ArkTS）（Full SDK）（API9）](https://gitee.com/openharmony/applications_app_samples/tree/monthly_20230815/code/BasicFeature/Web/Browser)