JS实现浏览器跨屏跳转窗口/控制屏幕双屏显示

（高版本的谷歌，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){
      return
    }
    let getScreensProsime = window.getScreens()
    getScreensProsime.then((c: any)=>{
      setMultiScreen(c)
    })
  };

// 开启新页面
  const openNewWindow = async (url: string | URL | undefined, name: string | undefined) => {
    // 判断浏览器是否兼容
    // 高版本的谷歌，edge不支持跨屏，需要降低浏览器版本86.0版

   if(!window.getScreens){
      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-globals
        let ah = screen.availHeight - 30;
        // eslint-disable-next-line no-restricted-globals
        let 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();

1. 低版本谷歌地址
2. 链接：百度网盘 请输入提取码https://pan.baidu.com/s/1iqgvVYSbgeoMC7WBFDLqgQ
   提取码：lnws
3.