• 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> 如果开发者在[onWindowNew()](../reference/arkui-ts/ts-basic-components-web.md#onwindownew9)接口通知中不需要打开新窗口，需要将[ControllerHandler.setWebController()](../reference/arkui-ts/ts-basic-components-web.md##setwebcontroller9)接口返回值设置成null。
10
11
12如下面的本地示例，当用户点击“新窗口中打开网页”按钮时，应用侧会在[onWindowNew()](../reference/arkui-ts/ts-basic-components-web.md#onwindownew9)接口中收到Web组件新窗口事件。
13
14
15- 应用侧代码。
16
17  创建新窗口的方法可参考[Web开发相关例子](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/Browser)。
18
19  ```ts
20  // xxx.ets
21  import web_webview from '@ohos.web.webview';
22  @Entry
23  @Component
24  struct WebComponent {
25    controller: web_webview.WebviewController = new web_webview.WebviewController();
26    build() {
27      Column() {
28        Web({ src:$rawfile("window.html"), controller: this.controller })
29        .multiWindowAccess(true)
30        .onWindowNew((event) => {
31          console.info("onWindowNew...");
32          var popController: web_webview.WebviewController = new web_webview.WebviewController();
33          // 开发者需要在此处新建窗口,跟popController关联，并且将popController返回给Web组件。如果不需要打开新窗口请将返回值设置为event.handler.setWebController(null);
34          event.handler.setWebController(popController);
35        })
36      }
37    }
38  }
39  ```
40
41
42- window.html页面代码。
43
44  ```html
45  <!DOCTYPE html>
46  <html>
47  <head>
48      <meta charset="utf-8">
49      <title>WindowEvent</title>
50  </head>
51
52  <body>
53  <input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
54  <script type="text/javascript">
55      function OpenNewWindow()
56      {
57          let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
58          if (openedWindow) {
59              openedWindow.document.body.write("<p>这是我的窗口</p>");
60          } else {
61              log.innerHTML = "window.open failed";
62          }
63      }
64  </script>
65  </body>
66  </html>
67  ```
68