JS实现浏览器跨屏跳转窗口/控制屏幕双屏显示
2024-06-13 06:15:53
（高版本的谷歌，edge不支持跨屏，需要降低浏览器版本86.0版本）低版本谷歌浏览器
链接：百度网盘 请输入提取码
https://pan.baidu.com/s/1iqgvVYSbgeoMC7WBFDLqgQ
提取码：lnws
1.文档
js实现多屏/跨屏窗口放置_奇舞周刊-CSDN博客
js控制屏幕双屏显示_erdongritian的专栏-CSDN博客_js检测扩展屏幕
2. 操作
1 。chrome或msedge 可以在 chrome://flags 里开启 #enable-experimental-web-platform-features 设置为开启状态
2. 打开浏览器，F12进入开发者模式，控制台内输入getScreens() / window.getScreens() , 浏览器弹出是否跨屏幕点允许，
- 控制台输入 window.open(
"百度一下，你就知道",
"_blank",
"width=400, height=300, left=-100, top=100"
) - 测试下是否跨屏
3. 代码逻辑2种写法
1.代码逻辑1（1.获取当前所有屏幕信息，2. 获取当前屏幕信息，3，取本屏幕信息跳转跨屏）
const [multiScreen, setMultiScreen] = useState<any>([]); // 多屏数据存储// 获取当前电脑屏幕信息const getScreensData = async () => {if (!window.getScreens) {}else{let getScreensProsime = window.getScreens();getScreensProsime.then((c: any) => {// setMultiScreen(c);if(c instanceof Array){setMultiScreen(c)}else if(c instanceof Object){setMultiScreen(c.screens)}else{setMultiScreen([])}});}if(!window.getScreenDetails){}else{let getScreensProsime1 = window.getScreenDetails();getScreensProsime1.then((c: any) => {// setMultiScreen(c);if(c instanceof Array){setMultiScreen(c)}else if(c instanceof Object){setMultiScreen(c.screens)}else{setMultiScreen([])}});}// 开启新页面const openNewWindow = async (url: string | URL | undefined, name: string | undefined) => {// 判断浏览器是否兼容// 高版本的谷歌，edge不支持跨屏，需要降低浏览器版本86.0版if(!window.getScreens && !window.getScreenDetails){message.warning('你的浏览器版本不支持多屏展示功能！', 3);openWindow = window.open(url, name);return;}// 判断是否2个屏幕if (multiScreen.length<2) {message.warning('请接入多个显示屏！', 3);openWindow = window.open(url, name);return;}// 获取当前屏幕availLeft信息和所有信息比对，取另一个屏幕数据let currentAvailLeft: string = screen.availLeft?screen.availLeft:'0'let newCurr = multiScreen.find( (t: any)=> t.availLeft !== currentAvailLeft)let fulls = ''for(let key in newCurr){fulls += `${key}=${(newCurr[key]||newCurr[key]===0)?newCurr[key]:0},` } openWindow = window.open(url, name, fulls);};// 谷歌跳转const openChomOA = async (flod_id: string, name: string) => {let url = `www.baidu.com`;openNewWindow(url, '')};2.代码逻辑2（1.获取当前所有屏幕信息，2. 判断当前是主屏(screen.availLeft 值是0，是主屏)副屏(可能是正负大于0)，3，副屏直接设置left=0是主屏，主屏需要判断左右屏）
- 双屏屏幕，会有一个主屏幕和副屏幕
// 开启新页面
let openWindow: any = null;// 开启新页面const openNewWindow = async (url: string | URL | undefined, name: string | undefined) => {if (!('getScreens' in self)) {message.warning('你的chrome版本不支持多屏展示功能！', 3);openWindow = window.open(url, name);return;}if ('isMultiScreen' in self && !(await isMultiScreen())) {message.warning('请接入多个显示屏！', 3);}let fulls = 'screenX=0,top=0,screenY=0,scrollbars=1'; // 定义弹出窗口的参数// 如果// 1. screen.availLeft 值是负数，主屏在右侧，当前屏幕是左侧副屏// 2. screen.availLeft 值是正数，主屏在左侧，当前屏幕是右侧副屏// 2. screen.availLeft 值是0，是主屏，左右屏幕下面方法判断if (Math.abs(screen.availLeft) >= screen.availWidth) {// 说明屏幕是副屏，直接设置0，到主屏fulls += `,left=0`;} else if (screen.availLeft == 0) {// 主屏幕// 左侧主屏幕，右侧副屏幕直接left到右侧fulls += `,left=${screen.availWidth}`;}// 获取屏幕 宽高复制if (window.screen) {// eslint-disable-next-line no-restricted-globalslet ah = screen.availHeight - 30;// eslint-disable-next-line no-restricted-globalslet aw = screen.availWidth - 10;fulls += `,height=${ah}`;fulls += `,innerHeight=${ah}`;fulls += `,width=${aw}`;fulls += `,innerWidth=${aw}`;fulls += ',resizable';} else {fulls += ',resizable'; // 对于不支持screen属性的浏览器，可以手工进行最大化。 manually}openWindow = window.open(url, name, fulls);if (openWindow.screen.availLeft == 0) {// 右侧主屏幕，左侧侧副屏幕直接moveTo到左侧if (Math.abs(screen.availLeft) < screen.availWidth) {openWindow.moveTo(-`${screen.availWidth}`, 0);}}};// 谷歌跳转const openChomOA = async (flod_id: string, name: string) => {let url = `百度一下，你就知道`;openNewWindow(url, '')};
4. 关闭跨屏开启的浏览器
openWindow?.close();- 低版本谷歌地址
- 链接：百度网盘 请输入提取码https://pan.baidu.com/s/1iqgvVYSbgeoMC7WBFDLqgQ
提取码：lnws
JS实现浏览器跨屏跳转窗口/控制屏幕双屏显示相关推荐
- 前端控制屏幕双屏显示 pos副屏 副屏方案
之前在做到一个需求 电脑接了多个显示器 要在主屏上显示web界面 第二个屏幕上通过主屏来调起第二个界面 之前在网上看到的方案 :通过window.open(url, name, fulls)来打 ...
- js控制屏幕双屏显示
一.需求 双屏显示器下,在主屏(副屏)显示的web页面中,点击链接,打开新页面在副屏(主屏)上显示. 二.实现方式 代码实现: testdouble.html <!DOCTYPE html> ...
- html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的 效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以 让页面中的图片,视频等全屏目前只有g ...
- VC中窗口在屏幕中央显示
为了使窗口在屏幕中央显示,采用如下代码: CRect rect; CClientDC dc(this); int width = dc.GetDeviceCaps(HORZRES); int heig ...
- java如何在窗口上显示数据_如何把Java程序窗口在屏幕中间显示
摘要:这篇Java开发技术栏目下的"如何把Java程序窗口在屏幕中间显示",介绍的技术点是"Java程序.屏幕中间.Java.显示.窗口.中间",希望对大家开发 ...
- js如何将跨域打开的窗口放到最前面_程序员的强迫症-便捷打开常用网站
根据上一篇 程序员的强迫症–如何让电脑桌面变得非常干净?可以让电脑桌面非常简洁.干净,win + r 快速打开应用程序.常用文件夹. 这篇就介绍 win + r 便捷打开常用网站,优化管理 我们在日常 ...
- Html5结合JS实现浏览器全屏功能
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- 微信公众号开发--js关闭浏览器回到公众号对话窗口
使用场景:页面操作结束,需要关闭当前浏览器,回到公众号对话窗口.例如:某项目需求支持用户将openId和系统内userId进行绑定和解绑定,在执行完解绑定后关闭当前微信浏览器回到公众号对话窗口. 完成 ...
最新文章
- Android开发：图文分析 Handler通信机制 的工作原理
- iphone简单实例 (字体，弹出窗口) (实例)
- Webview中无法触发手势方法（ontouchevent,onfling...)的解决方法
- shapley值法 - 用边际收益衡量每个人的贡献
- 网易云课堂C++开发工程师案例-网吧收银系统(MFC+ADO) C++收银...
- 搭建安装kubesphere平台——在 Linux 上以 All-in-One 模式，附安装步骤—{全篇踩坑排坑记} kubernetes：k8s
- 磁珠特性以及选型注意事项
- 【读书笔记】巴比伦富翁的理财课
- 关于sicp练习2.73的前置程序
- 使用Jsp+Servlet的wlop官网（验证码登录+session自动登陆）
- 一个电商数据分析师的经验总结
- 3ds Max(三维动画制作软件)V2020 x64 中文版
- mysql中清空数据表中的数据，不删除数据表
- Python转换图像格式，超全
- 增大SwipeRefreshLayout容差
- 李开复写给中国大学生的七封信【1/7】
- java开发经典文章
- 实现USB转两个异步串口，USB总线的转接芯片
- 表格偶数奇数行颜色PHP,HTML-表格的奇数偶数行颜色不同
- 毛概重点 2023-武海宝