在新窗口中打开页面

Web组件提供了在新窗口打开页面的能力，开发者可以通过[multiWindowAccess()]接口来设置是否允许网页在新窗口打开。当有新窗口打开时，应用侧会在[onWindowNew()]接口中收到Web组件新窗口事件，开发者需要在此接口事件中，新建窗口来处理Web组件窗口请求。

说明：

  • [allowWindowOpenMethod()]接口设置为true时，前端页面通过JavaScript函数调用的方式打开新窗口。
  • 如果开发者在[onWindowNew()]接口通知中没有创建新窗口，需要将[ControllerHandler.setWebController()]接口参数设置成null。

如下面的本地示例，当用户点击“新窗口中打开网页”按钮时，应用侧会在[onWindowNew()]接口中收到Web组件新窗口事件。

  • 应用侧代码。

    // xxx.ets
import { webview } from '@kit.ArkWeb';

// 在同一page页有两个Web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。
@CustomDialog
struct NewWebViewComp {
  controller?: CustomDialogController;
  webviewController1: webview.WebviewController = new 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: webview.WebviewController = new webview.WebviewController();
  dialogController: CustomDialogController | null = null;

  build() {
    Column() {
      Web({ src: $rawfile("window.html"), controller: this.controller })
        .javaScriptAccess(true)
          // 需要使能multiWindowAccess
        .multiWindowAccess(true)
        .allowWindowOpenMethod(true)
        .onWindowNew((event) => {
          if (this.dialogController) {
            this.dialogController.close()
          }
          let popController: webview.WebviewController = new webview.WebviewController();
          this.dialogController = new CustomDialogController({
            builder: NewWebViewComp({ webviewController1: popController })
          })
          this.dialogController.open();
          // 将新窗口对应WebviewController返回给Web内核。
          // 若不调用event.handler.setWebController接口，会造成render进程阻塞。
          // 如果没有创建新窗口，调用event.handler.setWebController接口时设置成null，通知Web没有创建新窗口。
          event.handler.setWebController(popController);
        })
    }
  }
}
ts

  • window.html页面代码。

    <!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width"/>
    <title>WindowEvent</title>
</head>
<body>
<input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
<script type="text/javascript">
    function OpenNewWindow()
    {
        var txt = '打开的窗口';
        let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
        openedWindow.document.write("<p>" + "<br><br>" + txt.fontsize(10) + "</p>");
        openedWindow.focus();
    }
</script>
</body>
</html>
html

图1 新窗口中打开页面效果图

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

# harmonyos # 华为 # 鸿蒙 # 鸿蒙系统 # ui
Logo
HarmonyOS开发者社区

讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。

更多推荐

cover

Flutter与鸿蒙深度融合：打造物理引擎驱动的3D卡片交互体验

avatar HarmonyOS开发者社区

Flutter audioplayers 库鸿蒙平台适配实战：从原理到优化

本文详细介绍了将 Flutter插件适配到鸿蒙平台的完整方案。我们选择了基于这条标准路径，实现了从 Dart API 到鸿蒙AVPlayer的完整调用链，并提供了包含健壮错误处理、生命周期管理的可运行代码。这个方案的优势在于架构清晰，与现有 Flutter 插件生态兼容性好，是大多数跨平台迁移项目的稳妥选择。适配方法小结理解插件分层：吃透插件 Dart 层、平台接口层、原生层各自的职责。选择通信策

avatar HarmonyOS开发者社区

Flutter-OH三方库适配：从实践到社区共建的样板间打造

在鸿蒙跨平台应用开发领域，Flutter凭借其优秀的跨端一致性、高性能特性，成为众多企业和开发者的首选框架。尤其对于追求降本增效的企业而言，基于Flutter改造多端老项目、开发新应用，已成为主流实践。而Flutter-OH作为适配鸿蒙生态的关键载体，其版本迭代与三方库生态完善，直接决定了Flutter在鸿蒙平台的落地深度。

avatar HarmonyOS开发者社区