harmony 鸿蒙Opening Pages in a New Window
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
If allowWindowOpenMethod() is set to true, you can open a new window in the frontend page by invoking its JavaScript functions.
If you do not want to open a new window in onWindowNew(), set the return value of ControllerHandler.setWebController() to null.
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>
你可能感兴趣的鸿蒙文章
harmony 鸿蒙Establishing a Data Channel Between the Application and the Frontend Page
harmony 鸿蒙Web Component Overview
harmony 鸿蒙Managing Cookies and Data Storage
harmony 鸿蒙Debugging Frontend Pages by Using DevTools
harmony 鸿蒙Managing Location Permissions
harmony 鸿蒙Invoking Frontend Page Functions on the Application
harmony 鸿蒙Invoking Application Functions on the Frontend Page
- 所属分类: 后端技术
- 本文标签:
热门推荐
-
2、 - 优质文章
-
3、 gate.io
-
8、 golang
-
9、 openharmony
-
10、 Vue中input框自动聚焦