1# 在新窗口中打开页面 2 3 4Web组件提供了在新窗口打开页面的能力,开发者可以通过[multiWindowAccess()](../reference/apis-arkweb/ts-basic-components-web.md#multiwindowaccess9)接口来设置是否允许网页在新窗口打开。当有新窗口打开时,应用侧会在[onWindowNew()](../reference/apis-arkweb/ts-basic-components-web.md#onwindownew9)接口中收到Web组件新窗口事件,开发者需要在此接口事件中,新建窗口来处理Web组件窗口请求。 5 6 7> **说明:** 8> 9> - [allowWindowOpenMethod()](../reference/apis-arkweb/ts-basic-components-web.md#allowwindowopenmethod10)接口设置为true时,前端页面通过JavaScript函数调用的方式打开新窗口。 10> 11> - 如果开发者在[onWindowNew()](../reference/apis-arkweb/ts-basic-components-web.md#onwindownew9)接口通知中没有创建新窗口,需要将[ControllerHandler.setWebController()](../reference/apis-arkweb/ts-basic-components-web.md#setwebcontroller9)接口参数设置成null。 12 13 14如下面的本地示例,当用户点击“新窗口中打开网页”按钮时,应用侧会在[onWindowNew()](../reference/apis-arkweb/ts-basic-components-web.md#onwindownew9)接口中收到Web组件新窗口事件。 15 16 17- 应用侧代码。 18 19 ```ts 20 // xxx.ets 21 import { webview } from '@kit.ArkWeb'; 22 23 // 在同一page页有两个Web组件。在WebComponent新开窗口时,会跳转到NewWebViewComp。 24 @CustomDialog 25 struct NewWebViewComp { 26 controller?: CustomDialogController; 27 webviewController1: webview.WebviewController = new webview.WebviewController(); 28 29 build() { 30 Column() { 31 Web({ src: "", controller: this.webviewController1 }) 32 .javaScriptAccess(true) 33 .multiWindowAccess(false) 34 .onWindowExit(() => { 35 console.info("NewWebViewComp onWindowExit"); 36 if (this.controller) { 37 this.controller.close(); 38 } 39 }) 40 } 41 } 42 } 43 44 @Entry 45 @Component 46 struct WebComponent { 47 controller: webview.WebviewController = new webview.WebviewController(); 48 dialogController: CustomDialogController | null = null; 49 50 build() { 51 Column() { 52 Web({ src: $rawfile("window.html"), controller: this.controller }) 53 .javaScriptAccess(true) 54 // 需要使能multiWindowAccess 55 .multiWindowAccess(true) 56 .allowWindowOpenMethod(true) 57 .onWindowNew((event) => { 58 if (this.dialogController) { 59 this.dialogController.close() 60 } 61 let popController: webview.WebviewController = new webview.WebviewController(); 62 this.dialogController = new CustomDialogController({ 63 builder: NewWebViewComp({ webviewController1: popController }) 64 }) 65 this.dialogController.open(); 66 // 将新窗口对应WebviewController返回给Web内核。 67 // 若不调用event.handler.setWebController接口,会造成render进程阻塞。 68 // 如果没有创建新窗口,调用event.handler.setWebController接口时设置成null,通知Web没有创建新窗口。 69 event.handler.setWebController(popController); 70 }) 71 } 72 } 73 } 74 ``` 75 76 77- window.html页面代码。 78 79 ```html 80 <!DOCTYPE html> 81 <html> 82 <head> 83 <meta name="viewport" content="width=device-width"/> 84 <title>WindowEvent</title> 85 </head> 86 <body> 87 <input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()"> 88 <script type="text/javascript"> 89 function OpenNewWindow() 90 { 91 var txt = '打开的窗口'; 92 let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollvars=no"); 93 openedWindow.document.write("<p>" + "<br><br>" + txt.fontsize(10) + "</p>"); 94 openedWindow.focus(); 95 } 96 </script> 97 </body> 98 </html> 99 ``` 100 101**图1** 新窗口中打开页面效果图 102 103 104 105 106## 相关实例 107 108针对创建新窗口,有以下相关实例可供参考: 109 110- [浏览器(ArkTS)(Full SDK)(API9)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/Browser)