ফুলস্ক্রিন পপআপ উইন্ডোগুলির জন্য নতুন মূল ট্রায়াল৷

টমাস স্টেইনার

কল্পনা করুন আপনি ফুলস্ক্রিন মোডে একটি পপআপ উইন্ডো খুলতে চান। এখন পর্যন্ত, একটি পূর্ণস্ক্রীন পপআপ উইন্ডো খোলার দুটি ধাপ রয়েছে:

  1. মূল অ্যাপ উইন্ডো থেকে, window.open() পদ্ধতিতে কল করার জন্য একটি ব্যবহারকারীর অঙ্গভঙ্গি প্রয়োজন যেমন একটি ওপেন পপআপ উইন্ডো বোতামে ক্লিক করুন।
  2. পপআপ উইন্ডো থেকে, Element.requestFullscreen() পদ্ধতিতে কল করুন, যার জন্য একইভাবে একটি ব্যবহারকারীর অঙ্গভঙ্গি প্রয়োজন যেমন একটি এন্টার পূর্ণস্ক্রীন মোড বোতামে ক্লিক করুন।

Chrome 119 (স্থিতিশীল তারিখ): 31 অক্টোবর, 2023 থেকে Chrome 122 (স্থিতিশীল তারিখ): 31 অক্টোবর, 2023 থেকে শুধুমাত্র একটি ধাপে ফুলস্ক্রিন মোডে পপআপ উইন্ডো খোলার জন্য একটি নতুন অরিজিন ট্রায়াল উপলব্ধ রয়েছে৷ সাইন আপ করতে পূর্ণস্ক্রীন উইন্ডোজ অরিজিন ট্রায়াল ল্যান্ডিং পৃষ্ঠা হিসাবে ওপেন পপআপে রেজিস্টার ক্লিক করুন। অরিজিন ট্রায়াল ছাড়াও, আপনি chrome://flags/#fullscreen-popup-windows পতাকাকে সক্ষম করে সেট করে স্থানীয়ভাবে পরীক্ষা করতে পারেন।

বর্তমান স্ক্রিনে ফুলস্ক্রিন পপআপ উইন্ডো খোলা হচ্ছে

এই নতুন বৈশিষ্ট্যটি window-management অনুমতির পিছনে গেট করা হয়েছে। একবার ব্যবহারকারী অনুমতি দিলে, আপনি নিম্নলিখিত উদাহরণের মতো একটি পূর্ণস্ক্রীন পপআপ উইন্ডো খুলতে পারেন।

document.querySelector('.fullscreen-popoup-button').addEventListener('click', async (e) => {
  if ((await navigator.permissions.query({name: 'window-management'})).state !== 'granted') {
    // Permission not granted. Call `window.getScreenDetails()` to prompt.
    await window.getScreenDetails();
  }
  // Permission granted. Open the fullscreen popup window.
  window.open('https://example.com/popup.html', '_blank', 'popup,fullscreen');
});

কোড নমুনার শেষ লাইনে, প্রথম প্যারামিটারটি হল পপআপ উইন্ডোতে খোলার url । দ্বিতীয় প্যারামিটারটি target , _blank এর বিশেষ মান সহ। তৃতীয় প্যারামিটারটি হল windowFeatures এর জন্য, একটি পপআপ উইন্ডো খোলার জন্য মান popup সহ একটি কমা দ্বারা পৃথক করা স্ট্রিং এবং ফুলস্ক্রিন মোডে পপআপ উইন্ডো খোলার জন্য নতুন মান fullscreen । এটি শুধুমাত্র একটি ব্যবহারকারীর অঙ্গভঙ্গির সাথে কাজ করে, তাই একটি বোতামে একক ক্লিকে সক্রিয় করা যেতে পারে।

অন্যান্য স্ক্রিনে ফুলস্ক্রিন পপআপ উইন্ডো খোলা হচ্ছে

এই বৈশিষ্ট্যটি সত্যিই উইন্ডো ম্যানেজমেন্ট এপিআই- এর সংমিশ্রণে উজ্জ্বল হয় যা আপনাকে ব্যবহারকারীর কম্পিউটারের সাথে সংযুক্ত সমস্ত স্ক্রীন সম্পর্কে তথ্য পেতে দেয়। উদাহরণস্বরূপ, ব্যবহারকারীর বর্তমান স্ক্রীনের পরিবর্তে অন্য স্ক্রিনে একটি পূর্ণস্ক্রীন পপআপ উইন্ডো খুলতে, আপনাকে প্রথমে অন্য স্ক্রীনটি খুঁজে বের করতে হবে এবং তারপরে এর availLeft , availTop , availWidth , এবং availHeight মানগুলি সংশ্লিষ্ট left , top , width , এবং height পাস করতে হবে windowFeatures মান বৈশিষ্ট্য স্ট্রিং।


document.querySelector('.fullscreen-popoup-button-other-screen').addEventListener('click', async (e) => {
  const screenDetails = await window.getScreenDetails();
  ​​const otherScreen = screenDetails.screens.find(s => s !== screenDetails.currentScreen);
  window.open('https://example.com/popup.html', '_blank', `left=${otherScreen.availLeft},` +
      `top=${otherScreen.availTop},` +
      `width=${otherScreen.availWidth},` +
      `height=${otherScreen.availHeight},` +
      `fullscreen`);
});

ডেমো

ডেমোতে ফুলস্ক্রিন পপআপ উইন্ডো ব্যবহার করে দেখুন এবং সোর্স কোড দেখুন । পূর্ণস্ক্রীন চেকবক্স এবং ফুলস্ক্রিন পপআপ বোতামটি চেক করতে ভুলবেন না এবং, যদি আপনার সুযোগ থাকে, আপনার ডিভাইসের সাথে সংযুক্ত একাধিক স্ক্রীনের সাথে ডেমো খেলুন।

স্বীকৃতি

এই নিবন্ধটি ব্র্যাড ট্রাইবওয়াসার , হাকান ইসবিলিরোগলু , মাইক ওয়াসারম্যান এবং রাচেল অ্যান্ড্রু দ্বারা পর্যালোচনা করা হয়েছে।