在新窗口中打开页面

2024-02-16 13:38 更新

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

说明

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

  • 应用侧代码。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview'
    3. //在同一page页有两个web组件。在WebComponent新开窗口时,会跳转到NewWebViewComp。
    4. @CustomDialog
    5. struct NewWebViewComp {
    6. controller?: CustomDialogController
    7. webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
    8. build() {
    9. Column() {
    10. Web({ src: "", controller: this.webviewController1 })
    11. .javaScriptAccess(true)
    12. .multiWindowAccess(false)
    13. .onWindowExit(()=> {
    14. console.info("NewWebViewComp onWindowExit")
    15. if (this.controller) {
    16. this.controller.close()
    17. }
    18. })
    19. }
    20. }
    21. }
    22. @Entry
    23. @Component
    24. struct WebComponent {
    25. controller: web_webview.WebviewController = new web_webview.WebviewController()
    26. dialogController: CustomDialogController | null = null
    27. build() {
    28. Column() {
    29. Web({ src:$rawfile("window.html"), controller: this.controller })
    30. .javaScriptAccess(true)
    31. //需要使能multiWindowAccess
    32. .multiWindowAccess(true)
    33. .onWindowNew((event) => {
    34. if (this.dialogController) {
    35. this.dialogController.close()
    36. }
    37. let popController:web_webview.WebviewController = new web_webview.WebviewController()
    38. this.dialogController = new CustomDialogController({
    39. builder: NewWebViewComp({webviewController1: popController})
    40. })
    41. this.dialogController.open()
    42. //将新窗口对应WebviewController返回给Web内核。
    43. //如果不需要打开新窗口请调用event.handler.setWebController接口设置成null。
    44. //若不调用event.handler.setWebController接口,会造成render进程阻塞。
    45. event.handler.setWebController(popController)
    46. })
    47. }
    48. }
    49. }
  • window.html页面代码。
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="utf-8">
    5. <title>WindowEvent</title>
    6. </head>
    7. <body>
    8. <input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()">
    9. <script type="text/javascript">
    10. function OpenNewWindow()
    11. {
    12. let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
    13. openedWindow.document.write("<p>这是我的窗口</p>");
    14. openedWindow.focus();
    15. }
    16. </script>
    17. </body>
    18. </html>
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号