鸿蒙原生应用元服务开发-Web在新窗口中打开页面

鸿蒙时代

发布于 2024-5-13 15:05

浏览

0收藏

Web组件提供了在新窗口打开页面的能力，开发者可以通过multiWindowAccess()接口来设置是否允许网页在新窗口打开。当有新窗口打开时，应用侧会在onWindowNew()接口中收到Web组件新窗口事件，开发者需要在此接口事件中，新建窗口来处理Web组件窗口请求。如果开发者在onWindowNew()接口通知中不需要打开新窗口，需要将ControllerHandler.setWebController()接口返回值设置成null。
如下面的本地示例，当用户点击“新窗口中打开网页”按钮时，应用侧会在onWindowNew()接口中收到Web组件新窗口事件。
应用侧代码。

// xxx.ets
import web_webview from '@ohos.web.webview'

//在同一page页有两个web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
controller?: CustomDialogController
webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
build() {
    Column() {
      Web({ src: "", controller: this.webviewController1 })
        .javaScriptAccess(true)
        .multiWindowAccess(false)
        .onWindowExit(()=> {
          console.info("NewWebViewComp onWindowExit")
          if (this.controller) {
            this.controller.close()
          }
        })
      }
  }
}

@Entry
@Component
struct WebComponent {
    controller: web_webview.WebviewController = new web_webview.WebviewController()
    dialogController: CustomDialogController | null = null
    build() {
      Column() {
        Web({ src:$rawfile("window.html"), controller: this.controller })
          .javaScriptAccess(true)
         //需要使能multiWindowAccess
          .multiWindowAccess(true)
          .onWindowNew((event) => {
          if (this.dialogController) {
            this.dialogController.close()
          }
          let popController:web_webview.WebviewController = new web_webview.WebviewController()
          this.dialogController = new CustomDialogController({
            builder: NewWebViewComp({webviewController1: popController})
          })
          this.dialogController.open()
          //将新窗口对应WebviewController返回给Web内核。
          //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
          //若不调用event.handler.setWebController接口，会造成render进程阻塞。
          event.handler.setWebController(popController)
        })
    }
  }
}
window.html页面代码。
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WindowEvent</title>
</head>
<body>
<input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
<script type="text/javascript">
    function OpenNewWindow()
    {
        let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
        openedWindow.document.write("<p>这是我的窗口</p>");
        openedWindow.focus();
    }
</script>
</body>
</html>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.

本文参考引用HarmonyOS官方开发文档，基于API9。

分类

HarmonyOS

标签

鸿蒙原生应用

51CTO

51CTO博客

51CTO学堂

鸿蒙原生应用元服务开发-Web在新窗口中打开页面

订阅鸿蒙技术特刊，精选内容抢先看