js实现多屏/跨屏窗口放置
点击上面“前端妙音坊”关注我们吧!
目前有越来越多的开发者外接多个显示器进行工作,但是有没有发现你在浏览器中打开新窗口时,都只会显示在你当前的显示屏里,如果想放置在某个浏览器中,需要把窗口拖过去,有没有可能直接在指定的显示屏中打开窗口呢?
通常我们可以通过 window.open 方式来打开一个窗口,如:
const popup = window.open("https://www.baidu.com/","_blank","width=400, height=300, left=100, top=100"
);
但是都只是在当前屏幕上打开的,如何能让其在指定的显示屏中打开窗口呢?
01
Multi-Screen Window Placement API
从Chrome 86起,开始支持Multi-Screen Window Placement API了,不过还处于试验阶段,可以在 chrome://flags 里开启 #enable-experimental-web-platform-features
判断浏览器是否支持该特性
if ("getScreens" in window) {//支持
}
判断是否接入多个显示屏
await isMultiScreen()
请求权限
const permission = await navigator.permissions.query({name: 'window-placement'
});
getScreens()方法
await window.getScreens();
事件监听
window.addEventListener('screenschange', () => {//
});
全屏
requestFullscreen也相应增加了screen配置项
***.requestFullscreen({screen: screen[0]
})
02
演示效果
下面视频演示分别点击页面上的3个按钮,会分别在对应的显示屏中打开一个小窗口。
03
代码示例
css、html
<style>
#demo{width: 600px;}
#demo .warning {font-size: 14px; color: #f00}
#demo .buttons input[type="button"] {height: 40px; font-size: 15px; margin-right: 20px; color: #fff; background: #389e88; border: 0; border-radius: 5px;}
#demo .buttons input[type="button"]:active {background: rgb(10, 233, 10)}
#demo .screens {margin-top: 10px}
#demo .screens dl {background: #ccc; font-size: 13px; line-height: 20px; margin-top: 10px; padding: 10px}
#demo .screens dt {font-size: 16px; font-weight: bold; color: #1d3bd2; margin-bottom: 10px}
#demo .screens dd {padding: 0; margin: 0;}
</style><div id="demo"><strong class="warning"></strong><div class="buttons"></div><div class="screens"></div>
</div>
js
class MultiScreen {constructor() {const _this = this;_this.screens = [];_this.init();}async init() {const _this = this;if (!('getScreens' in self)) {alert('你的chrome版本不支持该功能!');} else if ('isMultiScreen' in self && !(await isMultiScreen())) {alert('请接入多个显示屏查看该demo!');} else {const permission = await navigator.permissions.query({name: 'window-placement'});permission.addEventListener('change', () => {_this.updateScreensInfo();});if ('onscreenschange' in self) {window.addEventListener('screenschange', () => {_this.updateScreensInfo();});_this.updateScreensInfo();}}}async getScreensData() {const _this = this;_this.screens = (await getScreens().catch(_ => {})) || [window.screen];}async updateScreensInfo() {const _this = this;let buttons = [];let screens = [];await _this.getScreensData();const permission = await navigator.permissions.query({name: 'window-placement'});if (permission.state === 'denied') {document.querySelector('#demo .warning').innerHTML = '您禁用了窗口放置权限,请开启使用';}_this.screens.forEach((item, index) => {buttons.push(`<input type="button" value="在第 ${index + 1} 个显示屏中打开" data-index="${index + 1}">`);screens.push(`<dl><dt>screen ${index + 1} :</dt><dd>id: ${item.id}<br>width: ${item.width}<br>height: ${item.height}<br>availWidth: ${item.availWidth}<br>availHeight: ${item.availHeight}<br>left: ${item.left}<br>top: ${item.top}<br>primary: ${item.primary}<br>internal: ${item.internal}<br>touchSupport: ${item.touchSupport}<br></dd></dl>`);});document.querySelector('#demo .buttons').innerHTML = buttons.join('');document.querySelector('#demo .screens').innerHTML = screens.join('');document.querySelectorAll('#demo input[type="button"]').forEach((item, index) => {item.addEventListener('click', () => _this.openWin(index, screens[index]));});}openWin(index, html) {const _this = this;const screen = _this.screens[index];const optionsStr = `width=400,height=300,left=${screen.availLeft + (screen.availWidth / 2) - 200},top=${screen.availTop + (screen.availHeight / 2) - 150}`;const win = window.open('about:blank', '_blank', optionsStr);win.document.write(html);}
}
new MultiScreen();
04
screen数据
以下是部分screen数据:
其中 primary 表示是否是主显示屏,internal 表示是否是内置显示屏。
id: 0
width: 1280
height: 800
availWidth: 1280
availHeight: 734
left: 0
top: 0
primary: true
internal: true
touchSupport: false
id: 1
width: 1920
height: 1200
availWidth: 1920
availHeight: 1177
left: 0
top: -1200
primary: false
internal: false
touchSupport: false
05
应用场景
可能有人会觉得这个功能意义不大,但是我觉得一方面可以提升交互体验,另一方面,随着多屏、折叠屏等设备越来越多,跨屏交互势必会被重视,(如折叠屏就已经有了相关css与js api: @media (spanning: single-fold-vertical), window.getWindowSegments()),可以提前掌握并进行一些技术创新。
目前我能想到的几个应用场景:
1、股市行情展示
同时在多个屏幕上打开并排列不同的股市行情窗口。
2、数据可视化大屏展示
目前的数据可视化大屏展示基本都是整合在一个页面中的,如果需要调整结构布局,可能就需要修改代码,如果开发时考虑好让每个模块可以独立展示,那么就可以借助这个功能,设定好布局后,就可以一键窗口排列展示。
3、在线ppt演示
目前市场上有很多在线版的ppt,提供了演讲者模式,一个窗口是用来在投影仪上展示的,另一个是用来在笔记本屏幕上显示演讲者笔记,但是目前使用时就需要手动去调整窗口到不同的屏幕上,现在我们是否可以这样去优化提升体验,点击 “演讲者模式” 按钮后,直接一个窗口全屏展示在投影仪,另一个演讲者笔记窗口保留在笔记本屏幕上。
4、简单的小游戏多屏布局
...
06
一点设想
目前要在不同屏幕上打开窗口,主要还是通过 js 的window.open去实现,以后能不能直接在 <a> 标签的_target上增加一项呢,指定在哪个显示屏上打开,如:
<a href="https://www.so.com/" _target="screen[0]">...</a>
以及 window.open 第二个参数是不是也可以考虑支持呢?
07
Chrome扩展
在此顺便推广一下我以前开发的一个chrome扩展 “多显示窗口管理” :
详细介绍见另一个文章:Chrome插件分享:多显示器窗口管理
该扩展支持在多个显示器之间进行窗口切换、最大化、居中、贴边、垂直/水平排列、标签页从窗口分离/合并、以及快捷键支持。
1. 窗口可以在多个显示器之间快速移动,而无需拖动;
2. 窗口最大化、居中、贴边;
3. 窗口1x2、2x1、2x2排列;
4. 窗口标签页从窗口分离、合并;
默认支持以下快捷键:
1. 在多个显示器之间切换(windows: ctrl+→,Mac: ⌘+→)
2. 调整窗口大小且循环切换(windows: ctrl+↑,Mac: ⌘+↑)
3. 窗口依次在屏幕左、上、右、下贴边切换(windows: ctrl+←,Mac: ⌘+←)
其他快捷键可自定义设置。
end
关于奇舞团
奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
js实现多屏/跨屏窗口放置相关推荐
- JS实现浏览器跨屏跳转窗口/控制屏幕双屏显示
(高版本的谷歌,edge不支持跨屏,需要降低浏览器版本86.0版本)低版本谷歌浏览器 链接:百度网盘 请输入提取码https://pan.baidu.com/s/1iqgvVYSbgeoMC7WBFD ...
- 网课助手浏览器版怎么更新_MIUI版本更新动态:跨屏协作来袭(第57期)
MIUI版本更新动态分享第57期 Tips:本周部分机型的内测开发版迎来新功能跨屏协作更新适配,使用上依据不同的网络环境延迟略有差异,功能上支持文件拖拽,多窗口操作,电脑编辑手机文件,使用上功耗上还有 ...
- JS应用之禁止抓屏、复制、打印
作者:Randy 原载:JS应用之禁止抓屏.复制.打印 版权所有,转载时必须以链接形式注明作者和原始出处及本声明 JS应用之禁止抓屏.复制.打印 项目需要禁止抓屏.复制.打印的要求,复制.打印做起来可 ...
- 前端ui框架_跨屏建站发布同名响应式前端ui框架
跨屏建站发布同名响应式前端ui框架,它是跨屏建站关于前端页面构建上的积累的结晶,现已开源,我们将持续的用开源的方式做好ui框架产品,用心做好建站产品. 关于 跨屏UI框架是基于Bootstrap的扩展 ...
- 跨屏html ui,Amaze UI(HTML5 跨屏前端框架) v2.7.2
Amaze UI 2.7.2 更新日志:2016-08-17 JS: Improved #900 处理Modal元素停止冒泡引发的使用不变问题: Improved #901 调整Tabs样式,适应元素 ...
- android 跨屏效果图,手机电脑二合一:小米妙享跨屏协作正式上线
手机电脑二合一:小米妙享跨屏协作正式上线 2020-10-24 11:18:44 49点赞 110收藏 86评论 10月23日晚间,小米官方宣布,小米妙享跨屏协作功能已经正式上线,首发支持小米10至尊 ...
- Android N分屏(多窗口)适配
Android N已正式发布,新增了多项特性,详细介绍见官网 https://developer.android.com/about/versions/nougat/android-7.0.html ...
- 使用键鼠网络共享用windows控制ubuntu,实现跨屏跨系统操作
经调研发现几种网络共享鼠标方案:sharemouse.synergy以及Barrier,由于没找到合适的资料去配置sharemouse,synergy又收费,所以使用Barrier. 一.Ubuntu ...
- 跨屏网页设计为什么越来越流行,浅谈
跨屏网页设计是近几年来广为流行的方式,跨屏建站方案替代了传统的多屏建站方案,多屏建站即为不同的终端单独建立一个网站,而跨屏建站则是创建一个套网站,但是可以自适应不同大小屏幕的终端,优点是成本更低,维护 ...
最新文章
- linux压缩图片脚本,说明Ubuntu压缩图片脚本批量方法
- Android之利用回调函数onCreateDialog实现加载对话框
- stylecloud.gen_stylecloud() 参数详解
- 操作系统:连续分配、分页和分段三种存储分配机制的优缺点
- 计算机英语 TCP IP什意思,TCP/IP常见英文缩写释义
- GDCM:gdcm::Printer的测试程序
- (十四)消息中间件MQ详解及四大MQ比较
- element-ui表单校验
- casefold()方法
- sanic set up
- 【正点原子STM32连载】第七章 认识HAL库 摘自【正点原子】MiniPro STM32H750 开发指南_V1.1
- linux unip命令
- 运动目标检测——研究现状
- UESTC 1634 去年春恨却来时,落花人独立,微雨燕双飞
- MSDN无法打开的解决办法
- 解决双系统开机no such device:
- Java必背基础词汇
- 华为服务器带外如何修改,华为服务器带外地址修改器
- #遗憾#重重的挫败感再次袭来!!!
- RV1126 Linux AP6256调试、WIFI热点扫描