副屏 · 小鳥CMS 桌面應用框架

## 獲取多個屏幕信息示例 ``` //獲取屏幕信息 Display_Detection(null,e=>{console.log(e)}) //指定分辨率獲取 Display_Detection([1920,1080,1024,500,1440,1050,1600,1024],e=>{console.log(e)}) ``` ## 參數函數：`Display_Detection` 參數： * 參數1 ResolvingPower?非必填?可傳入分辨率數組?完成自定義屏幕檢測?【基數是寬，偶數是高】 * 參數2 callback?必填?回調返回結果： * 數字下標結果解釋 0屏幕數量、1總屏幕尺寸、2主屏幕尺寸、3副屏尺寸 ## 使用與注意 * 如果僅有主屏幕時或有異常時2,3下標值都為0 * 實現不同屏幕顯示不同窗口??必須注意?將屏幕設置為【擴展顯示】 * 目前僅支持的分辨率:1024,500,1440,1050,1600,1024,1600,900,1680,1050,1280,1024,1024,768,800,600,1440,900,1024,600,1280,800,1280,?720,1366,768,?1920,?1080,?2560,?1440,?3840,?2160,?4096,?2160,?7680,?4320 如果沒有可用的分辨率可自行指定分辨率 ![](https://img.kancloud.cn/ee/35/ee3521c9cec9d04116c3fc2fb7454a2d_697x499.png) ## 設置窗口到其他屏幕中【副屏設置】函數：`setPositionWin` 作用： * 設置當前窗口位置與標題并自動最大化 * 默認最大化可再次執行會進行放大縮小窗口 ## 使用示例 * 結合以上獲取屏幕坐標實現示例如下： ``` //采用html字符串寫入方式加載頁面、使用變量共享方式變量互相共享（可使用數據雙向綁定實現實時更新數據） //啟動一個窗口 pageOpener = window.open(); //測試變量在新窗口訪問 window.page1 = 100 //載入內容采用寫入方式也可以http方式 pageOpener.document.write(` <body style="background: #fff;"> <h1>好嗨哦</h1> </body> <script> //設置子窗口值 window.page2 = 200 //獲取父類窗口的值 console.log(window.opener.page1) //檢測可用函數避免異步創建導致函數失效 var okFunc = 0; //用到的函數 var funcList = ['Display_Detection','setPositionWin']; function testing(){ okFunc = 0; funcList.forEach((item)=>{ if(window[item] !== undefined){ okFunc+=1; } }) console.log(okFunc,funcList.length) if(okFunc != funcList.length){ okFunc = 0; timeout() }else{ startFunc(); } } function timeout(){ setTimeout(()=>{ testing() },500) } testing() function startFunc(){ //獲取屏幕 let x=0; let y=0; //設置屏幕 window.Display_Detection(null,e=>{ x=e.data[2][0]; y=e.data[2][1]; //設置屏幕 window.setPositionWin('客顯副屏',x,0,600,600,e=>{console.log(e)}) }) } </script> `) //獲取子窗口的值 console.log(pageOpener.window.page2) //5s后自動關閉副屏 setTimeout(() => { pageOpener.close() }, 5000); ``` * 對于更多的頁面加載方式或窗口通訊方式請看下面 ## 窗口內容加載 * 1.通過http形式加載 * 2.通過opener對象來進行文檔內容設置 * 3.使用`open("data:text/html,<h1>123456</h1>");` ## 窗口間通信 * 1.postMessage * 2.window變量共享進行變量監控（雙向綁定） * 3.如果使用vuex等類似狀態管理，可以考慮實現vue沙箱模式等類似其他框架也可以這么考慮。或者嘗試在子窗口掛載父窗口里的部分環境數據，比較靈活，自己嘗試。完全可實現父子窗口用一個狀態管理。只是新窗口里的環境可能需要自己掛載進去。比如將vue沙箱掛載進去等