Opening Pages in a New Window

The Web component provides the capability of opening pages in a new window. You can call multiWindowAccess() to specify whether to allow a web page to be opened in a new window. When a new window is opened in the Web component, the application will receive a window opening event through onWindowNew(). You need to add the code for processing the window opening request in the event callback.

NOTE

In the following example, when a user clicks the Open Page in New Window button, the application receives a window opening event in the onWindowNew() callback.

  • Application code:

    // xxx.ets
import web_webview from '@ohos.web.webview';
@Entry
@Component
struct WebComponent {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  build() {
    Column() {
      Web({ src:$rawfile("window.html"), controller: this.controller })
      .multiWindowAccess(true)
      .onWindowNew((event) => {
        console.info("onWindowNew...");
        let popController: web_webview.WebviewController = new web_webview.WebviewController();
        // Create a window, associate it with popController, and have popController returned to the Web component. If you do not need to open a new window, set the return value to event.handler.setWebController(null).
        event.handler.setWebController(popController);
      })
    }
  }
}

  • Code of the window.html page:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>WindowEvent</title>
</head>

<body>
<input type="button" value="Open Page in New Window" onclick="OpenNewWindow()">
<script type="text/javascript">
    function OpenNewWindow()
    {
        let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no");
        if (openedWindow) {
            openedWindow.document.body.write("<p>This is my window</p>");
        } else {
            log.innerHTML = "window.open failed";
        }
    }
</script>
</body>
</html>