‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

איך להשתמש בכמה מסכים

Palances Liao

Thomas Steiner

הדרך המודרנית

שימוש ב-`window.getScreenDetails()`

כדי לוודא שהדפדפן תומך בשיטה getScreenDetails(), קודם צריך לבדוק אם היא קיימת באובייקט window. אחר כך מתקשרים אל window.getScreenDetails() כדי לקבל צילומי מסך מצורפים. הוספת event listener כדי להתאים לפרטי מסך משתנים מאפשרת לכם לנהל כמה מסכים בהתאם לצרכים של האפליקציה.

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
  const screenDetails = await window.getScreenDetails();
  screenDetails.addEventListener('screenschange', (event) => {
    // Handle screens change.
  });
}

Browser Support

Source

הדרך הקלאסית

שימוש בשיטה window.screen

אין דרך קלאסית לשלוט בפריסות של מסכים מרובים, אבל אפשר לחזור לשליטה במסך הנוכחי באמצעות המאפיין window.screen ולמלא את הצורה החדשה של ה-API.

if (!('getScreenDetails' in window)) {
  // Returning a one-element array with the current screen,
  // noting that there might be more.
  window.getScreenDetails = async () => [window.screen];
  // Set to `false`, noting that this might be a lie.
  window.screen.isExtended = false;
}

Browser Support

Source

שיפור הדרגתי

ההדגמה שלמטה מראה איך אפשר לטפל בכמה מסכים באמצעות Window Management API. הקוד בודק קודם את יכולת הדפדפן ואז חוזר לשיטה הקלאסית.

const detectButton = document.querySelector('#detectScreen');
const createButton = document.querySelector('#create');
const permissionLabel = document.querySelector('#permissionStatus');
const screensAvailLabel = document.querySelector('#screensAvail');
const popupUrl = './popup.html';
let screenDetails = undefined;
let permission = undefined;
let currentScreenLength = undefined;

detectButton.addEventListener('click', async () => {
  if ('getScreenDetails' in window) {
    screenDetails = await window.getScreenDetails();
    screenDetails.addEventListener('screenschange', (event) => {
      if (screenDetails.screens.length !== currentScreenLength) {
        currentScreenLength = screenDetails.screens.length;
        updateScreenInfo();
      }
    });
    try {
      permission =
        (await navigator.permissions.query({ name: 'window-management' })).state === 'granted'
          ? 'Granted'
          : 'No Permission';
    } catch (err) {
      console.error(err);
    }
    currentScreenLength = screenDetails.screens.length;
    updateScreenInfo();
  } else {
    screenDetails = window.screen;
    permission = 'Window Management API - NOT SUPPORTED';
    currentScreenLength = 1;
    updateScreenInfo();
  }
});

createButton.addEventListener('click', () => {
  let screen = screenDetails.screens[Math.floor(Math.random() * currentScreenLength)];
  options = {
    x: screen.availLeft,
    y: screen.availTop,
    width: screen.availWidth,
    height: screen.availHeight,
  };
  window.open(popupUrl, '_blank', getFeaturesFromOptions(options));
});

function getFeaturesFromOptions(options) {
  return (
    'left=' +
    options.x +
    ',top=' +
    options.y +
    ',width=' +
    options.width +
    ',height=' +
    options.height
  );
}

updateScreenInfo = () => {
  screensAvailLabel.innerHTML = currentScreenLength;
  permissionLabel.innerHTML = permission;
  if ('getScreenDetails' in window && screenDetails.screens.length >= 1) {
    createButton.disabled = false;
  } else {
    createButton.disabled = true;
  }
};

קריאה נוספת

הדגמה (דמו)

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to use multiple screens</title>
    <link rel="stylesheet" href="/style.css" />
    <!-- TODO: Devsite - Removed inline handlers -->
    <!-- <script src="/script.js" type="module"></script> -->
  </head>
  <body>
    <h1>How to use multiple screens</h1>
    <div>
      <div>
        Permission Status:
        <span id="permissionStatus"></span>
      </div>
      <div>Screens Available: <span id="screensAvail"></span></div>
    </div>
    <button id="detectScreen">Detect Screens</button>
    <button id="create" disabled>Create Page On Random Screen</button>
  </body>
</html>

CSS


        :root {
  color-scheme: dark light;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
  font-family: system-ui, sans-serif;
}

JS


        const detectButton = document.querySelector('#detectScreen');
const createButton = document.querySelector('#create');
const permissionLabel = document.querySelector('#permissionStatus');
const screensAvailLabel = document.querySelector('#screensAvail');
const popupUrl = 'supporting-popup.html';
let screenDetails = undefined;
let permission = undefined;
let currentScreenLength = undefined;

detectButton.addEventListener('click', async () => {
  if ('getScreenDetails' in window) {
    screenDetails = await window.getScreenDetails();
    screenDetails.addEventListener('screenschange', (event) => {
      if (screenDetails.screens.length !== currentScreenLength) {
        currentScreenLength = screenDetails.screens.length;
        updateScreenInfo();
      }
    });
    try {
      permission =
        (await navigator.permissions.query({ name: 'window-placement' }))
          .state === 'granted'
          ? 'Granted'
          : 'No Permission';
    } catch (err) {
      console.error(err);
    }
    currentScreenLength = screenDetails.screens.length;
    updateScreenInfo();
  } else {
    screenDetails = window.screen;
    permission = 'Multi-Screen Window Placement API - NOT SUPPORTED';
    currentScreenLength = 1;
    updateScreenInfo();
  }
});

createButton.addEventListener('click', () => {
  const screen =
    screenDetails.screens[Math.floor(Math.random() * currentScreenLength)];
  const options = {
    x: screen.availLeft,
    y: screen.availTop,
    width: screen.availWidth,
    height: screen.availHeight,
  };
  window.open(popupUrl, '_blank', getFeaturesFromOptions(options));
});

const getFeaturesFromOptions = (options) => {
  return (
    'left=' +
    options.x +
    ',top=' +
    options.y +
    ',width=' +
    options.width +
    ',height=' +
    options.height
  );
};

const updateScreenInfo = () => {
  screensAvailLabel.innerHTML = currentScreenLength;
  permissionLabel.innerHTML = permission;
  if ('getScreenDetails' in window && screenDetails.screens.length > 1) {
    createButton.disabled = false;
  } else {
    createButton.disabled = true;
  }
};

איך להשתמש בכמה מסכים קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.