政务浏浏览器Demo

辅助屏 API

辅助屏打开特定的URL

特别注意: 辅助屏不允许打开新的窗口,所以辅屏页面的超链接的target属性只能是“_self”
政务窗口通常有多块屏幕,一块屏面向工作人员称为“主屏”,另一块屏面向群众,称为“辅屏”。例如下“图1”,力麒政务超级柜台。
该Demo演示将特定url投射到辅助屏。需要将政务浏览器切换到“大厅窗口模式”或“自助模式”或“中间件模式”,并且配置好辅助屏,启用辅助屏,如上“图2”; 为了演示直观,可以给PC加多一个屏幕。
本示例在辅助屏打开政务浏览器官网www.zwexplorer.com;业务场景中,当辅屏url界面关闭时,调用closeAuxiliaryWindow接口复位,复位到“启动地址”所指示的状态

辅助屏的启动地址设置如下“图3”:
1、首先引入zwexplorer-jssdk.js,进行初始化
                                
                                    //如果在政务浏览器的Api Http Server的端口改变了,要设置data,并作为zwexplorer.__init(data)的参数
                                    // let data = {
                                    //         host: 'localhost',
                                    //         port: 56289
                                    // }
                                    // zwexplorer.__init(data).then(res => {
                                    //     // 返回数据
                                    // })
                                    zwexplorer.__init().then(res => {
                                        // 返回数据
                                    })
                                   
                                
2、实现代码如下:

                                        /**
                                        * 在辅助屏打开特定的Url
                                        */
                                       function useAuxiliaryWindow() {
                                           //如果有多个辅助屏,可以指定index,index从0开始,例如
                                           let config = {
                                               /** 辅屏下标 */
                                               index: 0,
                                               name: '测试',
                                               /**
                                                * 窗口参数,如果不传则和副屏窗口全屏一样大
                                                * 如果只传长宽就居中显示
                                                */
                                               // bounds?: {
                                               //     width: number,
                                               //     height: number,
                                               //     x?: number,
                                               //     y?: number
                                               // },
                                               url: 'http://www.zwexplorer.com'
                                           }
                                           window.zwexplorer.__auxWin.useAuxiliaryWindow(config);
                                       }
   
   
                                       /**
                                        * 关闭特定的辅助屏页面
                                        */
                                       function resetAuxiliaryWindow() {
                                           //如果有多个辅助屏,可以指定index,index从0开始,例如
                                           let config = {
                                               /** 辅屏下标 */
                                               index: 0,
                                               name: '测试'
                                           }
                                           window.zwexplorer.__auxWin.closeAuxiliaryWindow(config);
                                       }
                                

辅屏管理

很多时候,辅助屏打开了许多页面,操作人员可能不知道辅屏当前的显示状态;此时,可以通过侧边栏或顶部工具栏的“辅屏管理”,查看辅屏的当前状态,并进行管理。如图4