jQuery实现网页简繁切换插件 js切换浏览器窗口

转载

kekenai 2024-03-13 14:07:21

文章标签 jQuery实现网页简繁切换插件 javascript 开发语言 react es6/es7 文章分类 jQuery 前端开发

（高版本的谷歌，edge不支持跨屏，需要降低浏览器版本86.0版本）低版本谷歌浏览器

1.文档

js实现多屏/跨屏窗口放置_奇舞周刊

js控制屏幕双屏显示_erdongritian的专栏

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-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. 关闭跨屏开启的浏览器