在新窗口中打開(kāi)頁(yè)面

2024-02-16 13:38 更新

Web組件提供了在新窗口打開(kāi)頁(yè)面的能力，開(kāi)發(fā)者可以通過(guò)multiWindowAccess()接口來(lái)設(shè)置是否允許網(wǎng)頁(yè)在新窗口打開(kāi)。當(dāng)有新窗口打開(kāi)時(shí)，應(yīng)用側(cè)會(huì)在onWindowNew()接口中收到Web組件新窗口事件，開(kāi)發(fā)者需要在此接口事件中，新建窗口來(lái)處理Web組件窗口請(qǐng)求。

說(shuō)明

如下面的本地示例，當(dāng)用戶點(diǎn)擊“新窗口中打開(kāi)網(wǎng)頁(yè)”按鈕時(shí)，應(yīng)用側(cè)會(huì)在onWindowNew()接口中收到Web組件新窗口事件。

  • 應(yīng)用側(cè)代碼。
    1. // xxx.ets
    2. import web_webview from '@ohos.web.webview'
    3. 

    4. //在同一page頁(yè)有兩個(gè)web組件。在WebComponent新開(kāi)窗口時(shí)，會(huì)跳轉(zhuǎn)到NewWebViewComp。
    5. @CustomDialog
    6. struct NewWebViewComp {
    7. controller?: CustomDialogController
    8. webviewController1: web_webview.WebviewController = new web_webview.WebviewController()
    9. build() {
    10.     Column() {
    11.       Web({ src: "", controller: this.webviewController1 })
    12.         .javaScriptAccess(true)
    13.         .multiWindowAccess(false)
    14.         .onWindowExit(()=> {
    15.           console.info("NewWebViewComp onWindowExit")
    16.           if (this.controller) {
    17.             this.controller.close()
    18.           }
    19.         })
    20.       }
    21.   }
    22. }
    23. 

    24. @Entry
    25. @Component
    26. struct WebComponent {
    27.     controller: web_webview.WebviewController = new web_webview.WebviewController()
    28.     dialogController: CustomDialogController | null = null
    29.     build() {
    30.       Column() {
    31.         Web({ src:$rawfile("window.html"), controller: this.controller })
    32.           .javaScriptAccess(true)
    33.          //需要使能multiWindowAccess
    34.           .multiWindowAccess(true)
    35.           .onWindowNew((event) => {
    36.           if (this.dialogController) {
    37.             this.dialogController.close()
    38.           }
    39.           let popController:web_webview.WebviewController = new web_webview.WebviewController()
    40.           this.dialogController = new CustomDialogController({
    41.             builder: NewWebViewComp({webviewController1: popController})
    42.           })
    43.           this.dialogController.open()
    44.           //將新窗口對(duì)應(yīng)WebviewController返回給Web內(nèi)核。
    45.           //如果不需要打開(kāi)新窗口請(qǐng)調(diào)用event.handler.setWebController接口設(shè)置成null。
    46.           //若不調(diào)用event.handler.setWebController接口，會(huì)造成render進(jìn)程阻塞。
    47.           event.handler.setWebController(popController)
    48.         })
    49.     }
    50.   }
    51. }
  • window.html頁(yè)面代碼。
    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="新窗口中打開(kāi)網(wǎng)頁(yè)" onclick="OpenNewWindow()">
    9. <script type="text/javascript">
    10.     function OpenNewWindow()
    11.     {
    12.         let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
    14.         openedWindow.document.write("<p>這是我的窗口</p>");
    15.         openedWindow.focus();
    17.     }
    18. </script>
    19. </body>
    20. </html>
以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)