JavaScript多屏开发

1、需求

在PC端打开一个网页，在多块显示屏上自动展示不同的内容，类似于炒股多屏展示，如下图：

2、解决办法

查阅了很多大佬的博客，最后得出结论，多屏开发功能实现主要依赖于chrome浏览器上的一个API:

Multi-Screen Window Placement API

从chrome 86版本以后，chorme浏览器就提供了用于获取电脑显示屏信息的方法，不同版本大的方法名可能不同，但是都大同小异，笔主所采用的chrome版本为 100，chrome 100 所提供的获取电脑显示屏信息的方法为

getScreenDetails

可以在你的浏览器中打开一个网页，F12打开调试面板，在控制台中输入getScreens/getScreenDetails,如果有回应，则表明浏览器支持该API，否则建议升级一下浏览器

---

3、主要步骤

（1）、判断浏览器是否支持双屏或者跨屏

（2）、调用getScreenDetails()方法，返回一个Promise实列，接收该实列，在结构中可以得到一个screens数组

（3）、调用screen API获取主屏幕信息，根据screen.availLeft判断主屏和副屏

（4）、得到副屏信息后，遍历该对象，将其中的键值对通过“=”拼接成字符串，调用window.open(url, name, fulls)将要显示的内容放在副屏上。其中，第一个参数url如果是一个HTML文件，则该参数是HTML文件的相对路径，如果是vue文件或者jsx文件，则url是该组件的前端路由，第二个参数随便起一个名字，第三个参数则是拼接成字符串的副屏信息。

参考文献

https://blog.csdn.net/u014651093/article/details/122599514
https://blog.csdn.net/qiwoo_weekly/article/details/116955762

文章写于2022-06-06，请注意时效问题，如有不对的地方，希望不吝赐教