एक से ज़्यादा स्क्रीन इस्तेमाल करने का तरीका

Palances Liao
Palances Liao
Thomas Steiner

आधुनिक तरीका

window.getScreenDetails() का इस्तेमाल करना

यह पक्का करने के लिए कि आपका ब्राउज़र, getScreenDetails() तरीके के साथ काम करता है, पहले देखें कि यह window ऑब्जेक्ट पर मौजूद है या नहीं. इसके बाद, अटैच की गई स्क्रीन पाने के लिए window.getScreenDetails() पर कॉल करें. स्क्रीन की बदली गई जानकारी के हिसाब से काम करने के लिए, इवेंट लिसनर जोड़ने से, आपको अपने ऐप्लिकेशन की ज़रूरत के हिसाब से कई स्क्रीन मैनेज करने में मदद मिलती है.

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

ब्राउज़र सहायता

  • 100
  • 100
  • x
  • x

सोर्स

क्लासिक तरीका

window.screen का इस्तेमाल करके

मल्टी-स्क्रीन लेआउट को कंट्रोल करने का कोई क्लासिक तरीका नहीं है. हालांकि, window.screen प्रॉपर्टी का इस्तेमाल करके और एपीआई के नए साइज़ को पॉलीफ़िल करके, मौजूदा स्क्रीन को फिर से कंट्रोल किया जा सकता है.

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;
}

ब्राउज़र सहायता

  • 1
  • 12
  • 1
  • 1

सोर्स

प्रोग्रेसिव एन्हैंसमेंट

नीचे दिए गए डेमो में बताया गया है कि विंडो मैनेजमेंट एपीआई की मदद से, एक से ज़्यादा स्क्रीन को कैसे मैनेज किया जा सकता है. कोड पहले, ब्राउज़र की क्षमता की जांच करता है और फिर क्लासिक तरीके पर वापस चला जाता है.

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;
  }
};

इसके बारे में और पढ़ें

डेमो

एचटीएमएल

<!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>

सीएसएस


        :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;
  }
};