1# 在新窗口中打开页面 2<!--Kit: ArkWeb--> 3<!--Subsystem: Web--> 4<!--Owner: @weixin_41848015--> 5<!--Designer: @libing23232323--> 6<!--Tester: @ghiker--> 7<!--Adviser: @HelloCrease--> 8 9 10Web组件提供了在新窗口打开页面的能力，开发者可以通过[multiWindowAccess()](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#multiwindowaccess9)接口来设置是否允许网页在新窗口打开。当有新窗口打开时，应用侧会在[onWindowNew()](../reference/apis-arkweb/arkts-basic-components-web-events.md#onwindownew9)接口中收到Web组件新窗口事件。开发者需要在此接口事件中新建窗口来处理Web组件的窗口请求。 11 12 13> **说明：** 14> 15> - [allowWindowOpenMethod()](../reference/apis-arkweb/arkts-basic-components-web-attributes.md#allowwindowopenmethod10)接口设置为true时，前端页面通过JavaScript函数调用的方式打开新窗口。 16> 17> - 当在Web页面调用`window.open(url, name)`打开新窗口时，ArkWeb内核会根据`name`查找是否存在已绑定的Web组件。若存在，该Web组件将收到[onActivateContent()](../reference/apis-arkweb/arkts-basic-components-web-events.md#onactivatecontent20)接口通知，以便应用可将其展示至前台；若不存在，ArkWeb内核将通过`onWindowNew()`接口通知应用创建新窗口。 18> 19> - 如果在`onWindowNew()`接口通知中创建了新窗口，并将`ControllerHandler.setWebController()`接口的参数设置为新Web组件的`WebviewController`，则ArkWeb内核会完成name与该新Web组件的绑定。 20> 21> - 如果在`onWindowNew()`接口通知中没有创建新窗口，需要将`ControllerHandler.setWebController()`接口的参数设置为`null`。 22 23 24在下面的本地示例中，当用户点击“新窗口中打开网页”按钮时，应用会在`onWindowNew()`接口收到Web组件的新窗口事件。 25> **说明：** 26> - 网页要求用户创建新的窗口时触发回调[OnWindowNewEvent()](../reference/apis-arkweb/arkts-basic-components-web-i.md#onwindownewevent12)，该回调函数中isUserTrigger参数，true代表用户触发，false代表非用户触发。 27 28 29- 应用侧代码。 30 31 ```ts 32 // xxx.ets 33 import { webview } from '@kit.ArkWeb'; 34 35 // 在同一界面有两个Web组件。在WebComponent新开窗口时，会跳转到NewWebViewComp。 36 @CustomDialog 37 struct NewWebViewComp { 38 controller?: CustomDialogController; 39 webviewController1: webview.WebviewController = new webview.WebviewController(); 40 41 build() { 42 Column() { 43 Web({ src: "", controller: this.webviewController1 }) 44 .javaScriptAccess(true) 45 .multiWindowAccess(false) 46 .onWindowExit(() => { 47 console.info("NewWebViewComp onWindowExit"); 48 if (this.controller) { 49 this.controller.close(); 50 } 51 }) 52 .onActivateContent(() => { 53 //该Web需要展示到前台，建议应用在这里进行tab或window切换的动作 54 console.log("NewWebViewComp onActivateContent") 55 }) 56 } 57 } 58 } 59 60 @Entry 61 @Component 62 struct WebComponent { 63 controller: webview.WebviewController = new webview.WebviewController(); 64 dialogController: CustomDialogController | null = null; 65 66 build() { 67 Column() { 68 Web({ src: $rawfile("window.html"), controller: this.controller }) 69 .javaScriptAccess(true) 70 // 需要使能multiWindowAccess 71 .multiWindowAccess(true) 72 .allowWindowOpenMethod(true) 73 .onWindowNew((event) => { 74 if (this.dialogController) { 75 this.dialogController.close() 76 } 77 let popController: webview.WebviewController = new webview.WebviewController(); 78 this.dialogController = new CustomDialogController({ 79 builder: NewWebViewComp({ webviewController1: popController }), 80 // isModal设置为false，防止新窗口被销毁而无法触发onActivateContent回调 81 isModal: false 82 }) 83 this.dialogController.open(); 84 // 将新窗口对应WebviewController返回给Web内核。 85 // 若不调用event.handler.setWebController接口，会造成render进程阻塞。 86 // 如果没有创建新窗口，调用event.handler.setWebController接口时设置成null，通知Web没有创建新窗口。 87 event.handler.setWebController(popController); 88 }) 89 } 90 } 91 } 92 ``` 93 94 95- window.html页面代码。 96 97 ```html 98 <!DOCTYPE html> 99 <html> 100 <head> 101 <meta name="viewport" content="width=device-width"/> 102 <title>WindowEvent</title> 103 </head> 104 <body> 105 <input type="button" value="新窗口中打开网页" onclick="OpenNewWindow()"> 106 <script type="text/javascript"> 107 function OpenNewWindow() 108 { 109 var txt = '打开的窗口'; 110 let openedWindow = window.open("about:blank", "", "location=no,status=no,scrollbars=no"); 111 openedWindow.document.write("<p>" + "<br><br>" + txt + "</p>"); 112 openedWindow.focus(); 113 } 114 </script> 115 </body> 116 </html> 117 ``` 118 119**图1** 新窗口中打开页面效果图 120 121 122 123 124## 相关实例 125 126针对创建新窗口，有以下相关实例可供参考： 127 128- [浏览器（ArkTS）（Full SDK）（API9）](https://gitcode.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Web/Browser)
