ব্রাউজার উইন্ডোটি বর্তমানে সক্রিয় নেই কিনা তা সনাক্ত করার কোনও উপায় আছে?

585

আমার কাছে জাভাস্ক্রিপ্ট রয়েছে যা পর্যায়ক্রমে ক্রিয়াকলাপ করে। যখন ব্যবহারকারী সাইটটির দিকে তাকাচ্ছেন না (যেমন, উইন্ডো বা ট্যাবটিতে ফোকাস নেই), এটি না চালানো ভাল লাগবে।

জাভাস্ক্রিপ্ট ব্যবহার করে এটি করার কোনও উপায় আছে?

আমার রেফারেন্স পয়েন্ট: আপনি যে উইন্ডোটি ব্যবহার করছেন তা যদি সক্রিয় না হয় তবে Gmail চ্যাট শব্দটি বাজায়।

javascript  browser  focus  window 
— লুক ফ্রাঙ্কল
সূত্র
8
যারা নীচের উত্তরগুলিতে সন্তুষ্ট নন তাদের জন্য, requestAnimationFrameAPI টি দেখুন বা উইন্ডোটি দৃশ্যমান না হলে setTimeout/ এর ফ্রিকোয়েন্সি setIntervalহ্রাস করা হয়েছে এমন আধুনিক বৈশিষ্ট্যটি ব্যবহার করুন (উদাহরণস্বরূপ ক্রোমে 1 সেকেন্ড)।
— রব ডব্লু
2
document.body.onblur = ফাংশন (ঙ) so কনসোল.লগ ('লামা'); focused দৃষ্টি নিবদ্ধ না করা উপাদানগুলির জন্য কাজ করেছে।
— কেন
2
ক্রস-ব্রাউজারের সামঞ্জস্যপূর্ণ সমাধানের জন্য এই উত্তরটি দেখুন যা ডাব্লু 3 সি পৃষ্ঠা ভিজিবিলিটি API ব্যবহার করে, এটি সমর্থন করে না এমন ব্রাউজারগুলিতে blur/ focusইন ফিরে পড়ে ।
— ম্যাথিয়াস বাইনেন্স
2
নীচের 80% উত্তরগুলি এই প্রশ্নের উত্তর নয় । প্রশ্নটি বর্তমানে সক্রিয় না হওয়ার বিষয়ে জিজ্ঞাসা করে তবে নীচে প্রচুর উত্তর দৃশ্যমান নয় যা এই প্রশ্নের উত্তর নয়। তাদের যুক্তিযুক্তভাবে "উত্তর নয়" হিসাবে পতাকাঙ্কিত করা উচিত
— gman

উত্তর:

691

প্রাথমিকভাবে এই উত্তরটি লেখার পর থেকে, ডাব্লু 3 সি এর জন্য একটি নতুন স্পেসিফিকেশন সুপারিশের স্থিতিতে পৌঁছেছে । পৃষ্ঠা দৃশ্যমানতা এপিআই (চালু MDN ) এখন আমাদের আরো নিখুঁতভাবে শনাক্ত করতে যখন একটি পৃষ্ঠায় ব্যবহারকারীর কাছে গোপন নেই দেয়।

document.addEventListener("visibilitychange", onchange);

বর্তমান ব্রাউজার সমর্থন:

  • ক্রোম 13+
  • ইন্টারনেট এক্সপ্লোরার 10+
  • ফায়ারফক্স 10+
  • অপেরা 12.10+ [ নোট পড়ুন ]

নিম্নলিখিত কোডটি বেমানান ব্রাউজারগুলিতে কম নির্ভরযোগ্য অস্পষ্টতা / ফোকাস পদ্ধতিতে ফিরে আসে:

(function() {
  var hidden = "hidden";

  // Standards:
  if (hidden in document)
    document.addEventListener("visibilitychange", onchange);
  else if ((hidden = "mozHidden") in document)
    document.addEventListener("mozvisibilitychange", onchange);
  else if ((hidden = "webkitHidden") in document)
    document.addEventListener("webkitvisibilitychange", onchange);
  else if ((hidden = "msHidden") in document)
    document.addEventListener("msvisibilitychange", onchange);
  // IE 9 and lower:
  else if ("onfocusin" in document)
    document.onfocusin = document.onfocusout = onchange;
  // All others:
  else
    window.onpageshow = window.onpagehide
    = window.onfocus = window.onblur = onchange;

  function onchange (evt) {
    var v = "visible", h = "hidden",
        evtMap = {
          focus:v, focusin:v, pageshow:v, blur:h, focusout:h, pagehide:h
        };

    evt = evt || window.event;
    if (evt.type in evtMap)
      document.body.className = evtMap[evt.type];
    else
      document.body.className = this[hidden] ? "hidden" : "visible";
  }

  // set the initial state (but only if browser supports the Page Visibility API)
  if( document[hidden] !== undefined )
    onchange({type: document[hidden] ? "blur" : "focus"});
})();

onfocusinএবং onfocusoutহয় আই ই 9 জন্য প্রয়োজন বোধ করা এবং নিম্ন , যখন অন্যদের ব্যবহার করতে onfocusএবং onblurআইওএস, যা ব্যবহারের জন্য ছাড়া, onpageshowএবং onpagehide।

— অ্যান্ডি ই
সূত্র
1
@বেলপিস: আইআই এর প্রচার করা উচিত focusinএবং focusoutআইফ্রেমে থেকে উপরের উইন্ডোতে। নতুন ব্রাউজারগুলির জন্য, আপনাকে কেবল প্রতিটি আইফ্রেমের অবজেক্টের ইভেন্টগুলি focusএবং blurইভেন্টগুলি পরিচালনা করতে হবে window। আপনার সবেমাত্র আপডেট হওয়া কোডটি ব্যবহার করা উচিত যা কমপক্ষে নতুন ব্রাউজারগুলিতে সেই কেসগুলি কভার করবে।
— অ্যান্ডি ই
3
@ জুলিয়েনক্রোনগ: এই কারণেই আমার উত্তরটিতে পৃষ্ঠা ভিজিবিলিটি এপিআই উল্লেখ করা হয়েছে যা মূলত আমার উত্তর লেখার পরে কাজের খসড়া স্থিতিতে প্রবেশ করেছিল। ফোকাস / অস্পষ্ট পদ্ধতিগুলি পুরানো ব্রাউজারগুলির জন্য সীমিত কার্যকারিতা সরবরাহ করে। আপনার ইভেন্টের মতো অন্যান্য ইভেন্টের সাথে আবদ্ধ হওয়া এর চেয়ে বেশি কিছু কভার করে না এবং আচরণগত পার্থক্যের ঝুঁকিতে বেশি থাকে (যেমন কার্সারের নীচে উইন্ডোটি পপ আপ করার সময় IE যেমন মাউসআউট ফায়ার করে না)। আমি আরও সঠিক পদক্ষেপ নেওয়ার পরামর্শ দেব যা ব্যবহারকারীর কাছে এমন একটি বার্তা বা আইকন প্রদর্শিত হবে যা পৃষ্ঠা নিষ্ক্রিয়তার কারণে আপডেটগুলি কম ঘন ঘন হতে পারে।
— অ্যান্ডি ই
6
@ অ্যান্ডি আমি ক্রোমিয়ামে এই সমাধানটি চেষ্টা করেছিলাম। আমি যদি ট্যাবগুলি পরিবর্তন করি তবে এটি কাজ করে, তবে আমি উইন্ডোজ (ALT + ট্যাব) পরিবর্তন করলে তা হয় না। উচিৎ কি? এখানে একটি বেহালতা রয়েছে
— টনি লম্পাপ
2
@ হেলিওডর: আমি আপাতত ন্যূনতম উত্তরে কোডটি রাখতে চাই। এটি কখনই কাট-পেস্টের সম্পূর্ণ সমাধান হওয়ার উদ্দেশ্য ছিল না, কারণ বাস্তবায়নকারীরা শরীরে কোনও শ্রেণি নির্ধারণ এড়াতে এবং সম্পূর্ণরূপে সম্পূর্ণ আলাদা পদক্ষেপ নিতে (যেমন টাইমার থামানো এবং শুরু করা) পছন্দ করতে পারে।
— অ্যান্ডি ই
8
@ অ্যান্ডি আপনার সমাধানটি কেবল তখনই কাজ করে মনে হয় যদি ব্যবহারকারী ট্যাবগুলি পরিবর্তন করে, বা উইন্ডোকে ছোট করে / সর্বাধিক করে তোলে। তবে, ব্যবহারকারী যদি ট্যাবটি সক্রিয় রেখে দেয় তবে অনভিজ্ঞ ইভেন্টটি ট্রিগার করা হবে না, তবে টাস্কবার থেকে এটির উপরে আরও একটি প্রোগ্রাম বাড়িয়ে তোলে। সেই দৃশ্যের কোনও সমাধান কি আছে? ধন্যবাদ!
— ব্যবহারকারী 1491636
132

আমি jQuery ব্যবহার করব কারণ তখন আপনাকে যা করতে হবে তা হ'ল:

$(window).blur(function(){
  //your code here
});
$(window).focus(function(){
  //your code
});

বা কমপক্ষে এটি আমার পক্ষে কাজ করেছিল।

— কারসন রাইট
সূত্র
1
আমার জন্য এই কলটি দু'বার
— ইফ্রেমে
ফায়ারফক্সে, আপনি যদি ফায়ারবগ কনসোলের ভিতরে ক্লিক করেন (একই পৃষ্ঠায়), উইলটি windowফোকাসটি আলগা করবে, যা সঠিক, তবে আপনার উদ্দেশ্য কী হতে পারে তার উপর নির্ভর করে আপনার কী প্রয়োজন।
— মজিদ ফৌলদপুর
21
এটি আর আধুনিক ব্রাউজারগুলির বর্তমান সংস্করণগুলির জন্য আর কাজ করে না, অনুমোদিত উত্তরটি দেখুন (পৃষ্ঠা ভিজিবিলিটি এপিআই)
— জন জেড
এই সমাধান আইপ্যাডে কাজ করে না দয়া করে "পৃষ্ঠা প্রদর্শন" ইভেন্টটি ব্যবহার করুন
— এলিজাস
পৃষ্ঠাটি লোড হওয়ার পরে বিএলআর এবং ফোকাস উভয়ই বন্ধ হয়ে যায়। যখন আমি আমার পৃষ্ঠা থেকে একটি নতুন উইন্ডো খুলি তখন কিছুই ঘটে না তবে নতুন উইন্ডোটি বন্ধ হয়ে গেলে উভয় ইভেন্টের আগুন বন্ধ হয়ে যায়: / (
— আইই
49

ব্যবহারকারী এইচটিএমএল পৃষ্ঠা দেখতে পাচ্ছেন কিনা তা নির্ধারণ করার জন্য 3 টি সাধারণ পদ্ধতি ব্যবহার করা হয়, তবে এর মধ্যে কোনওটিই পুরোপুরি কার্যকরভাবে কাজ করে না:

  • W3C এর পাতা দৃশ্যমানতা এপিআই এই কাজ করতে অনুমিত হয় (সমর্থিত যেহেতু: ফায়ারফক্স 10, MSIE 10, ক্রোম 13)। যাইহোক, ব্রাউজার ট্যাবটি সম্পূর্ণরূপে ওভাররাইড হয়ে গেলে (যেমন ব্যবহারকারী যখন এক ট্যাব থেকে অন্য ট্যাবে পরিবর্তিত হয়) তখনই এই API টি ইভেন্টগুলি উত্থাপন করে। 100% নির্ভুলতার সাথে দর্শনশীলতা নির্ধারণ করা যায় না (যেমন অন্য কোনও অ্যাপ্লিকেশনে স্যুইচ করতে Alt + ট্যাব) যখন এপিআই ইভেন্টগুলি উত্থাপন করে না।

  • ব্যবহার ফোকাস / দাগ ভিত্তিক পদ্ধতি আপনি মিথ্যা ইতিবাচক অনেক দেয়। উদাহরণস্বরূপ, ব্যবহারকারী যদি ব্রাউজার উইন্ডোটির উপরে একটি ছোট উইন্ডো প্রদর্শন করে তবে ব্রাউজার উইন্ডোটি ফোকাসটি হারাবে ( onblurউত্থাপিত) তবে ব্যবহারকারী এখনও এটি দেখতে সক্ষম (তাই এটি এখনও রিফ্রেশ করা দরকার)। Http://javascript.info/tutorial/fockes দেখুন

  • ব্যবহারকারীর ক্রিয়াকলাপের উপর নির্ভর করা (মাউস মুভ, ক্লিকগুলি, কী টাইপ করা) আপনাকে অনেক মিথ্যা ইতিবাচক দেয়। উপরের মত একই কেস, বা কোনও ব্যবহারকারী কোনও ভিডিও দেখছেন about

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

  • অন্য একটিতে ব্রাউজার ট্যাব পরিবর্তন করা (100% নির্ভুলতা, ডাব্লু 3 সি পৃষ্ঠা ভিজিবিলিটি API এর জন্য ধন্যবাদ)
  • পৃষ্ঠাটি অন্য উইন্ডো দ্বারা সম্ভাব্যভাবে লুকানো রয়েছে, যেমন আল্ট + ট্যাবের কারণে (সম্ভাব্যতা = 100% সঠিক নয়)
  • ব্যবহারকারীর মনোযোগ সম্ভাব্যভাবে HTML পৃষ্ঠায় ফোকাস করা হয়নি (সম্ভাব্যতা = 100% সঠিক নয়)

এটি কীভাবে কাজ করে: ডকুমেন্টটি ফোকাসটি হারাতে থাকলে, উইন্ডোটি দৃশ্যমান কিনা তা নির্ধারণের জন্য নথিতে ব্যবহারকারীর ক্রিয়াকলাপ (যেমন মাউস মুভ) পর্যবেক্ষণ করা হয়। পৃষ্ঠাটির দৃশ্যমানতার সম্ভাবনাটি পৃষ্ঠায় শেষ ব্যবহারকারীর ক্রিয়াকলাপের সময়ের সাথে বিপরীতভাবে সমানুপাতিক: ব্যবহারকারী যদি দীর্ঘকাল ডকুমেন্টে কোনও ক্রিয়াকলাপ না করেন তবে পৃষ্ঠাটি সম্ভবত দৃশ্যমান নয়। নীচের কোডটি ডাব্লু 3 সি পৃষ্ঠা ভিজিবিলিটি API নকল করে: এটি একইভাবে আচরণ করে তবে এতে একটি ছোট মিথ্যা ইতিবাচক হার রয়েছে। এটি মাল্টিব্রোজার হওয়ার সুবিধা রয়েছে (ফায়ারফক্স 5, ফায়ারফক্স 10, এমএসআইই 9, এমএসআইই 7, সাফারি 5, ক্রোম 9 এ পরীক্ষিত)।

    <div id = "x"> </div>

    <স্ক্রিপ্ট>
    / **
    প্রদত্ত বস্তুর জন্য ইভেন্টটিতে হ্যান্ডলারটিকে নিবন্ধভুক্ত করে।
    @ পরিমাপ আপত্তিটি উত্থাপন করবে যা ইভেন্টটি উত্থাপন করবে
    @ পরিসংখ্যান ইভেন্ট টাইপ করুন: ক্লিক করুন, কিপ্রেস, মাউসওভার, ...
    ইভেন্ট হ্যান্ডলার ফাংশন
    @ পরিমাপ ইভেন্ট ইভেন্ট মোড সেট করে (সত্য = ক্যাপচারিং ইভেন্ট, মিথ্যা = বুদবুদ ইভেন্ট)
    ইভেন্ট হ্যান্ডলারটি সঠিকভাবে সংযুক্ত করা থাকলে @ সত্য পুনরায় করুন
    * /
    function
      if (isCapturing == নাল) isCapturing = মিথ্যা; 
      যদি (obj.addEventListener) {
        // ফায়ারফক্স
        obj.addEventListener (evType, fn, isCapturing);
        সত্য প্রত্যাবর্তন;
      } অন্যথায় যদি (obj.attachEvent) {
        // এমএসআইই
        var r = obj.attachEvent ('on' + evType, fn);
        প্রত্যাবর্তন r;
      } অন্য {
        প্রত্যাবর্তন মিথ্যা;
      }
    }

    // সম্ভাব্য পৃষ্ঠার দৃশ্যমানতার পরিবর্তনে নিবন্ধন করুন
    addEvent (দস্তাবেজ, "সম্ভাব্য সম্ভাবনা পরিবর্তন", ফাংশন (ইভেন্ট) {
      document.getElementById ("x") inner
    });

    // ডাব্লু 3 সি পৃষ্ঠা ভিজিবিলিটি API এ নিবন্ধ করুন register
    var লুকানো = নাল;
    var দৃশ্যমানতা = নাল;
    যদি (typof document.mozHID! == "অপরিজ্ঞাত") {
      লুকানো = "mozHidden";
      visibilityChange = "mozvisibilitychange";
    } অন্যথায় যদি (typof document.msHID! == "অপরিজ্ঞাত") {
      লুকানো = "msHidden";
      visibilityChange "msvisibilitychange" =;
    } অন্যথায় যদি (typof document.webkitHID! == "অপরিজ্ঞাত") {
      লুকানো = "webkitHidden";
      visibilityChange "webkitvisibilitychange" =;
    } অন্যথায় যদি (দস্তাবেজ শৃঙ্খলাবদ্ধ! == "লুকানো") {
      লুকানো = "লুকানো";
      visibilityChange = "visibilitychange";
    }
    যদি (লুকানো! = নাল && দৃশ্যমানতার পরিবর্তন! = নাল) {
      addEvent (দস্তাবেজ, দৃশ্যমানতার পরিবর্তন, ফাংশন (ইভেন্ট) {
        document.getElementById ("x")। অভ্যন্তরীণ এইচটিএমএল + = দৃশ্যমানতা পরিবর্তন করুন "": "লুকানো +" = "+ নথি [লুকানো] +" <br> ";
      });
    }


    var সম্ভাব্যপেজভিজিবিলিটি = {
      পৃষ্ঠাভিজিবিলিটিচেনস্ট্রোল্ড: 3 * 3600, // সেকেন্ডে
      init: ফাংশন () {
        ফাংশন সেটআসনটহিডেন () {
          var dispatchEventRequired = ডকুমেন্ট.পটেনশিয়ালহিডেন;
          document.potentialHidden মিথ্যা =;
          document.potentiallyHiddenSince = 0;
          যদি (dispatchEventRequired) dispatchPageVisibilityChangeEvent ();
        }

        ফাংশন initPotentiallyHIDDEtection () {
          যদি (! ফোকাস লোকাল) {
            // উইন্ডোটিতে উইন্ডোতে ব্যবহারকারীর ক্রিয়াকলাপের জন্য ফোকাস => পরীক্ষা করা নেই
            lastActionDate = নতুন তারিখ ();
            যদি (টাইমআউটহ্যান্ডলার! = নাল) {
              clearTimeout (timeoutHandler);
            }
            টাইমআউটহ্যান্ডলার = সেটটাইমআউট (চেকপেজভিজিবিলিটি, সম্ভাব্যপেজভিজিলিটি.পৃষ্ঠাভিজিবতাচেন্জহোল্ডার * 1000 + 100); ফায়ারফক্সের অধীনে গোলাকার সমস্যাগুলি এড়াতে // +100 এমএস
          }
        }

        ফাংশন প্রেরণপেজভিজিবিলিটি চেঞ্জইভেন্ট () {
          unifiedVisilityChangeEventDispatchAllowed মিথ্যা =;
          var evt = document.createEvent ("ইভেন্ট");
          evt.initEvent ("সম্ভাব্য সম্ভাবনা পরিবর্তন", সত্য, সত্য);
          document.dispatchEvent (evt);
        }

        ফাংশন চেকপেজভিজিবিলিটি () {
          var সম্ভাব্য হিডেনডোরেশন = (#FocLocal || গতঅ্যাকশনডেট == নাল? 0: ম্যাথ.ফ্লোর ((নতুন তারিখ ()। গেটটাইম () - গতঅ্যাকশনডেট.সেটটাইম ()) / 1000));
                                        document.potentiallyHiddenSince = potentialHiddenDuration;
          যদি (সম্ভাব্য হিডেনডিউরেশন> = সম্ভাব্যপেজভিজিবিলিটি.পৃষ্ঠাভিজিবতাচেন্জথ্রিশোল্ড && ডকুমেন্ট.পটেনশিয়ালহিডেন) {
            // পৃষ্ঠার দৃশ্যমানতার পরিবর্তন থ্রেশহোল্ড রাইচড => সমান করুন
            document.potentialHidden সত্য =;
            dispatchPageVisibilityChangeEvent ();
          }
        }

        var lastActionDate = নাল;
        var hasFocusLocal = সত্য;
        var hasMouseOver = সত্য;
        document.potentialHidden মিথ্যা =;
        document.potentiallyHiddenSince = 0;
        var timeoutHandler = নাল;

        addEvent (দস্তাবেজ, "পৃষ্ঠা প্রদর্শন", ফাংশন (ইভেন্ট) {
          document.getElementById ( "এক্স") innerHTML + + = "pageshow / ডক: <br>"।
        });
        addEvent (দস্তাবেজ, "পেজহাইড", ফাংশন (ইভেন্ট) {
          document.getElementById ( "এক্স") innerHTML + + = "pagehide / ডক: <br>"।
        });
        addEvent (উইন্ডো, "পৃষ্ঠা প্রদর্শন", ফাংশন (ইভেন্ট) {
          document.getElementById ( "এক্স") innerHTML + + = "pageshow / win: <br>"। // উত্থাপিত যখন পৃষ্ঠা প্রথম দেখায়
        });
        addEvent (উইন্ডো, "পেজহাইড", ফাংশন (ইভেন্ট) {
          document.getElementById ( "এক্স") innerHTML + + = "pagehide / win: <br>"। // উত্থাপিত হয় না
        });
        addEvent (দস্তাবেজ, "মাউসমেভ", ফাংশন (ইভেন্ট) {
          lastActionDate = নতুন তারিখ ();
        });
        addEvent (দস্তাবেজ, "মাউসওভার", ফাংশন (ইভেন্ট) {
          hasMouseOver সত্য =;
          setAsNotHidden ();
        });
        addEvent (দস্তাবেজ, "মাউসআউট", ফাংশন (ইভেন্ট) {
          hasMouseOver মিথ্যা =;
          initPotentiallyHiddenDetection ();
        });
        addEvent (উইন্ডো, "অস্পষ্ট", ফাংশন (ইভেন্ট) {
          hasFocusLocal মিথ্যা =;
          initPotentiallyHiddenDetection ();
        });
        addEvent (উইন্ডো, "ফোকাস", ফাংশন (ইভেন্ট) {
          hasFocusLocal সত্য =;
          setAsNotHidden ();
        });
        setAsNotHidden ();
      }
    }

    potentialPageVisibility.pageVisibilityChangeThreshold = 4; // পরীক্ষার জন্য 4 সেকেন্ড
    potentialPageVisibility.init ();
    </ স্ক্রিপ্ট>

যেহেতু বর্তমানে মিথ্যা পজিটিভ ছাড়াই কোনও কার্যকারী ক্রস ব্রাউজার সমাধান নেই, তাই আপনার নিজের ওয়েবসাইটে সাময়িক ক্রিয়াকলাপটি অক্ষম করার বিষয়ে আরও একবার দু'বার চিন্তা করা উচিত।

— জুলিয়েন ক্রোনগ
সূত্র
অনির্ধারিত কীওয়ার্ডের পরিবর্তে স্ট্রিং 'অপরিজ্ঞায়িত' স্ট্রিংয়ের উপর কোনও কড়া তুলনা অপারেটরটি ব্যবহার করে উপরের কোডটিতে মিথ্যা ইতিবাচক কারণ তৈরি হবে না?
— জোনাথন
@ কিরান: আসলে এটি আল্ট + ট্যাব নিয়ে কাজ করছে। আপনি যখন একটি Alt + ট্যাব করবেন তখন পৃষ্ঠাটি লুকানো আছে তা আপনি নির্ধারণ করতে পারবেন না কারণ আপনি একটি ছোট উইন্ডোতে স্যুইচ করতে পারেন যাতে আপনি নিশ্চিত করতে পারবেন না যে আপনার পৃষ্ঠাটি পুরোপুরি গোপন রয়েছে। এ কারণেই আমি "সম্ভাব্যভাবে লুকানো" ধারণাটি ব্যবহার করি (উদাহরণস্বরূপ, প্রান্তিকতাটি 4 সেকেন্ডে সেট করা থাকে, সুতরাং আপনাকে কমপক্ষে 4 সেকেন্ডের জন্য Alt + ট্যাব ব্যবহার করে অন্য উইন্ডোতে স্যুইচ করতে হবে)। তবে আপনার মন্তব্যটি দেখায় যে উত্তরটি এত পরিষ্কার ছিল না, তাই আমি এটির উচ্চারণ করেছি।
— জুলিয়ান ক্রোনগ 21
@ জুলিয়েনক্রোনগ আমি মনে করি এটি এখনও সেরা সমাধান। তবে উপরের কোডটির চূড়ান্তভাবে কিছু রিফ্যাক্টরিং এবং বিমূর্ততা প্রয়োজন। আপনি কেন এটি গিটহাবে আপলোড করেন না এবং সম্প্রদায়টিকে এটি পুনরুদ্ধার করতে দেয় না?
— জ্যাকব
1
@ জ্যাকব আমি খুশি যে আপনি আমার সমাধানটি পছন্দ করেছেন। এটিকে নিজেই একটি গিটহাব প্রকল্পে প্রচার করতে নির্দ্বিধায়। আমি লাইসেন্স সহ কোডটি ক্রিয়েটিভ কমন্স
— বিআই
26

গিটহাবে একটি ঝরঝরে গ্রন্থাগার রয়েছে:

https://github.com/serkanyersen/ifvisible.js

উদাহরণ:

// If page is visible right now
if( ifvisible.now() ){
  // Display pop-up
  openPopUp();
}

আমার সমস্ত ব্রাউজারগুলিতে আমি 1.0.1 সংস্করণ পরীক্ষা করেছি এবং নিশ্চিত করতে পারি যে এটি এর সাথে কাজ করে:

  • আইই 9, আইই 10
  • এফএফ 26.0
  • ক্রোম 34.0

... এবং সম্ভবত সমস্ত নতুন সংস্করণ।

এর সাথে পুরোপুরি কাজ করে না:

  • আইই 8 - সর্বদা ইঙ্গিত দেয় যে ট্যাব / উইন্ডো বর্তমানে সক্রিয় রয়েছে ( .now()সর্বদা trueআমার জন্য ফিরে আসে )
— ওম নমঃ নমঃ
সূত্র
স্বীকৃত উত্তর আইই 9-এ সমস্যা সৃষ্টি করেছে। এই গ্রন্থাগারটি দুর্দান্ত কাজ করে।
— টম টেমন
20

ব্যবহার: পৃষ্ঠা ভিজিবিলিটি এপিআই

document.addEventListener( 'visibilitychange' , function() {
    if (document.hidden) {
        console.log('bye');
    } else {
        console.log('well back');
    }
}, false );

আমি ব্যবহার করতে পারেন ? http://caniuse.com/#feat=pagevisibility

— l2aelba
সূত্র
প্রশ্ন পৃষ্ঠা দৃশ্যমানতা সম্পর্কে নয়। এটি সক্রিয় / সক্রিয় নয়
— gman
আমি মনে করি ওপি
— আদর্শের
1
আমি আদর্শের কথাও বলছি না। আমি অন্য অ্যাপ্লিকেশনটিতে Alt-ট্যাবিং / সেন্টিমিডি-ট্যাবিংয়ের কথা বলছি। হঠাৎ পৃষ্ঠাটি সক্রিয় নেই। পৃষ্ঠাটি দৃশ্যমানতা এপিআই পৃষ্ঠাটি সক্রিয় না থাকলে তা আমাকে জানতে সহায়তা করে না, এটি কেবলমাত্র সম্ভবত প্রদর্শিত না হলে তা আমাকে জানতে সহায়তা করে।
— gman
18

আমি আমার অ্যাপ্লিকেশনের জন্য একটি ধূমকেতু চ্যাট তৈরি করি এবং আমি যখন অন্য ব্যবহারকারীর কাছ থেকে কোনও বার্তা পাই তখন:

if(new_message){
    if(!document.hasFocus()){
        audio.play();
        document.title="Have new messages";
    }
    else{
        audio.stop();
        document.title="Application Name";
    } 
}
— infinito84
সূত্র
2
আইই 6
— পল কুপার
4
document.hasFocus()এটি করার সবচেয়ে পরিষ্কার উপায়। দৃশ্যমানতা এপিআই বা ইভেন্ট ভিত্তিক ব্যবহার বা ব্যবহারকারীর বিভিন্ন স্তরের সন্ধান / ক্রিয়াকলাপের অভাবের অন্যান্য সমস্ত উপায়ে অতিরিক্ত জটিল হয়ে উঠেছে এবং প্রান্তের কেস এবং গর্তগুলিতে পূর্ণ। এটিকে একটি সাধারণ বিরতিতে রাখুন এবং ফলাফলগুলি পরিবর্তিত হলে একটি কাস্টম ইভেন্ট বাড়ান। উদাহরণ: jsfiddle.net/59utucz6/1
— ডানটাকফো
1
দক্ষ, এবং অন্য সমাধানগুলির বিপরীতে আপনি অন্য ব্রাউজারের ট্যাব বা উইন্ডো এবং এমনকি কোনও আলাদা অ্যাপ্লিকেশনে স্যুইচ করার সময় সঠিক প্রতিক্রিয়া দেয়।
— ow3n
কোনও সন্দেহ নেই, এটি সবচেয়ে পরিষ্কার উপায়, তবে এটি ফায়ারফক্সে কাজ করে না
— হার্ডিক চুগ
1
যদি আমি ক্রোম দেব সরঞ্জামগুলি খুলি তবে ডকুমেন্ট.হস ফোকাস () মিথ্যা সমান। অথবা আপনি যদি ব্রাউজারের শীর্ষ প্যানেলে ক্লিক করেন তবে একই ঘটনা ঘটে। আমি নিশ্চিত না এই সমাধান ভিডিও, অ্যানিমেশন, ইত্যাদি বিরাম উপযুক্ত
— tylik
15

আমি সম্প্রদায়টির উইকি উত্তরটি ব্যবহার শুরু করেছি, তবে বুঝতে পেরেছিলাম যে এটি ক্রোমে আল-ট্যাব ইভেন্টগুলি সনাক্ত করছে না। এর কারণ এটি প্রথম উপলব্ধ ইভেন্ট উত্সটি ব্যবহার করে এবং এই ক্ষেত্রে এটি পৃষ্ঠাটি দৃশ্যমানতা এপিআই, যা ক্রোমগুলিতে মনে হয় যে এটি আল-ট্যাবিংকে ট্র্যাক করে না।

পৃষ্ঠা ফোকাস পরিবর্তনের জন্য সমস্ত সম্ভাব্য ইভেন্টের উপর নজর রাখতে আমি স্ক্রিপ্টটি কিছুটা সংশোধন করার সিদ্ধান্ত নিয়েছি । এখানে আপনি একটি ফাংশন বাদ দিতে পারেন:

function onVisibilityChange(callback) {
    var visible = true;

    if (!callback) {
        throw new Error('no callback given');
    }

    function focused() {
        if (!visible) {
            callback(visible = true);
        }
    }

    function unfocused() {
        if (visible) {
            callback(visible = false);
        }
    }

    // Standards:
    if ('hidden' in document) {
        document.addEventListener('visibilitychange',
            function() {(document.hidden ? unfocused : focused)()});
    }
    if ('mozHidden' in document) {
        document.addEventListener('mozvisibilitychange',
            function() {(document.mozHidden ? unfocused : focused)()});
    }
    if ('webkitHidden' in document) {
        document.addEventListener('webkitvisibilitychange',
            function() {(document.webkitHidden ? unfocused : focused)()});
    }
    if ('msHidden' in document) {
        document.addEventListener('msvisibilitychange',
            function() {(document.msHidden ? unfocused : focused)()});
    }
    // IE 9 and lower:
    if ('onfocusin' in document) {
        document.onfocusin = focused;
        document.onfocusout = unfocused;
    }
    // All others:
    window.onpageshow = window.onfocus = focused;
    window.onpagehide = window.onblur = unfocused;
};

এটি এর মতো ব্যবহার করুন:

onVisibilityChange(function(visible) {
    console.log('the page is now', visible ? 'focused' : 'unfocused');
});

এই সংস্করণটি সমস্ত ভিন্ন দৃশ্যমানতার ইভেন্টগুলির জন্য শোনায় এবং যদি তাদের মধ্যে কোনও পরিবর্তনের কারণ হয়ে থাকে তবে একটি কলব্যাক চালিত করে। focusedএবং unfocusedহ্যান্ডেলার নিশ্চিত করুন যে কলব্যাক একাধিক বার যদি একাধিক API গুলি একই দৃশ্যমানতা পরিবর্তন ধরতে বলা হয় না আছে।

— ড্যানিয়েল বাকমাস্টার
সূত্র
উদাহরণস্বরূপ ক্রোমের document.hiddenএবং উভয়ই রয়েছে document.webkitHidden। ছাড়া elseএ ifনির্মাণ আমরা 2 কলব্যাক কল অধিকার পাবে?
— ক্রিশ্চিয়ান ওয়েস্টারবিক
@ ক্রিশ্চিয়ান ওয়েস্টারবিইক এটি একটি ভাল পয়েন্ট, আমি এটির কথা ভাবিনি! আপনি যদি এই পোস্টটি সম্পাদনা করতে পারেন তবে এগিয়ে যান এবং আমি গ্রহণ করব :)
— ড্যানিয়েল বাকমাস্টার
উঁহু এক মিনিট অপেক্ষা করুন: ক্রিশ্চিয়ানা ওয়েস্টারবীকের পরামর্শ দেওয়া "আসলে" @ 1.21 গিগাওয়াটস দ্বারা যুক্ত "অন্য" যুক্ত করার সম্পাদনাটি কোনও ভাল ধারণা বলে মনে হয় না: এটি ড্যানিয়েলের ধারণার মূল ক্রয়কে পরাস্ত করে, যা সমস্ত সমর্থিত চেষ্টা করার চেষ্টা করে সমান্তরাল পদ্ধতি। এবং কলব্যাক দু'বার কল হওয়ার কোনও ঝুঁকি নেই কারণ যখন কিছু পরিবর্তন হচ্ছে না তখন ফোকাসড () এবং ফোকাসযুক্ত () অতিরিক্ত কলগুলি দমন করে। সত্যই মনে হচ্ছে আমাদের প্রথম রেভটিতে ফিরে আসা উচিত।
— লুই সেমপ্রিনি
@ লুইসেম্প্রিণী এটি দুর্দান্ত একটি ক্যাচ। আমি কোডটির আসল উদ্দেশ্য ভুলে গিয়েছিলাম! আমি মূলটি পুনরুদ্ধার করেছি এবং একটি ব্যাখ্যা যুক্ত করেছি!
— ড্যানিয়েল বাকমাস্টার
আজকের হিসাবে এটি পরীক্ষা করে, এটি কমপক্ষে ক্রোম 78 + ম্যাকোজে Alt + ট্যাবটি সনাক্ত করে না
— হুগো গ্রেস
7

এটি সত্যিই কৃপণ। নিম্নলিখিত প্রয়োজনীয়তাগুলি বিবেচনা করে কোনও সমাধান নেই বলে মনে হচ্ছে।

  • পৃষ্ঠাটিতে ইফ্রেমেস অন্তর্ভুক্ত রয়েছে যা আপনার কোনও নিয়ন্ত্রণে নেই
  • কোনও ট্যাব পরিবর্তন (সিটিআরএল + ট্যাব) বা উইন্ডো পরিবর্তন (Alt + ট্যাব) দ্বারা পরিবর্তনটি পরিবর্তিত করে আপনি দৃশ্যমানতার স্থিতি পরিবর্তনটি ট্র্যাক করতে চান

এটি ঘটে কারণ:

  • পৃষ্ঠাটির দৃশ্যমানতা এপিআই নির্ভরযোগ্যভাবে আপনাকে একটি ট্যাব পরিবর্তনের কথা বলতে পারে (এমনকি আইফ্রেমেও), তবে ব্যবহারকারী কখন উইন্ডো পরিবর্তন করে তা আপনাকে বলতে পারে না।
  • উইন্ডোর অস্পষ্টতা / ফোকাস ইভেন্টগুলি শুনতে Alt + ট্যাব এবং সিটিআরএল + ট্যাবগুলি সনাক্ত করতে পারে, যতক্ষণ না আইফ্রেমে ফোকাস না থাকে।

এই নিষেধাজ্ঞাগুলি দেওয়া, সম্মিলিত সমাধানটি কার্যকর করা সম্ভব - পৃষ্ঠাটি দৃশ্যমানতা API - উইন্ডো ব্লার / ফোকাস - ডকুমেন্ট.একটিভএলমেন্ট

এটি সক্ষম:

  • 1) প্যারেন্ট পৃষ্ঠায় ফোকাস থাকলে ctrl + ট্যাব: হ্যাঁ
  • 2) সিআরটিএল + ট্যাব যখন আইফ্রেমে ফোকাস থাকে: হ্যাঁ
  • 3) Alt + ট্যাব যখন প্যারেন্ট পৃষ্ঠায় ফোকাস থাকে: হ্যাঁ
  • 4) Alt + ট্যাবে যখন iframe ফোকাস থাকে: কোনও <- বামার

যখন আইফ্রেমে ফোকাস থাকে, আপনার অস্পষ্টতা / ফোকাস ইভেন্টগুলি একেবারেই শুরু হবে না এবং পৃষ্ঠা ভিজিবিলিটি APIটি Alt + ট্যাবে ট্রিগার করবে না।

আমি @ অ্যান্ডি'র সমাধানের ভিত্তিতে এটি তৈরি করেছি এবং এটি (প্রায় ভাল) সমাধানটি এখানে বাস্তবায়ন করেছি: https://dl.roidboxusercontent.com/u/2683925/estante-compferences/visibility_test1.html (দুঃখিত, জেএসফিডেল নিয়ে আমার কিছুটা সমস্যা হয়েছিল)।

এটি গিথুব এও উপলভ্য: https://github.com/qmagico/estante-comp উপাদান

এটি ক্রোম / ক্রোমিয়ামে কাজ করে। এটি ফায়ারফক্সে কাজ করে, এটি আইফ্রেমের সামগ্রীগুলি লোড করে না (কেন কোনও ধারণা কেন?)

যাইহোক, শেষ সমস্যাটি সমাধান করার জন্য (4), আপনি কেবল এটিই করতে পারেন যদি ইফ্রেমে ব্লার / ফোকাস ইভেন্টগুলি শুনতে হয়। যদি আপনার আইফ্রেমে কিছু নিয়ন্ত্রণ থাকে তবে আপনি এটি করতে পোস্টম্যাসেজ এপিআই ব্যবহার করতে পারেন।

https://dl.dropboxusercontent.com/u/2683925/estante-components/visibility_test2.html

আমি এখনও পর্যাপ্ত ব্রাউজারগুলির সাথে এটি পরীক্ষা করিনি। এটি কোথায় কাজ করে না সে সম্পর্কে আপনি যদি আরও তথ্য পেতে পারেন তবে দয়া করে নীচের মন্তব্যে আমাকে জানান।

— টনি লম্পা
সূত্র
আমার পরীক্ষায় এটি আইই 9, আইই 10 এবং অ্যান্ড্রয়েডে ক্রোমে কাজ করেছে।
— টনি লম্প্পা
1
- এটি রহমান একটি সম্পূর্ণ ভিন্ন সমাধান প্রয়োজন বলে মনে হয় stackoverflow.com/questions/4940657/...
— টনি Lâmpada
3
এই সমস্ত লিঙ্কগুলি 404s :(
— ড্যানিয়েল বাকমাস্টার
6 
var visibilityChange = (function (window) {
    var inView = false;
    return function (fn) {
        window.onfocus = window.onblur = window.onpageshow = window.onpagehide = function (e) {
            if ({focus:1, pageshow:1}[e.type]) {
                if (inView) return;
                fn("visible");
                inView = true;
            } else if (inView) {
                fn("hidden");
                inView = false;
            }
        };
    };
}(this));

visibilityChange(function (state) {
    console.log(state);
});

http://jsfiddle.net/ARTsinn/JTxQY/

— yckart
সূত্র
5

এটি ক্রোম 67, ফায়ারফক্স 67 এ আমার জন্য কাজ করে,

if(!document.hasFocus()) {
    // do stuff
}
— সামাদ
সূত্র
3

আপনি ব্যবহার করতে পারেন:

(function () {

    var requiredResolution = 10; // ms
    var checkInterval = 1000; // ms
    var tolerance = 20; // percent


    var counter = 0;
    var expected = checkInterval / requiredResolution;
    //console.log('expected:', expected);

    window.setInterval(function () {
        counter++;
    }, requiredResolution);

    window.setInterval(function () {
        var deviation = 100 * Math.abs(1 - counter / expected);
        // console.log('is:', counter, '(off by', deviation , '%)');
        if (deviation > tolerance) {
            console.warn('Timer resolution not sufficient!');
        }
        counter = 0;
    }, checkInterval);

})();
— Maryam
সূত্র
3

এইচটিএমএল 5 এ আপনি এটি ব্যবহার করতে পারেন:

  • onpageshow: উইন্ডোটি দৃশ্যমান হয়ে গেলে স্ক্রিপ্টটি চালানো হবে
  • onpagehide: উইন্ডোটি লুকিয়ে থাকলে স্ক্রিপ্ট চালানো হবে

দেখা:

— roberkules
সূত্র
2
আমি মনে করি এটি বিএফসিএচের সাথে সম্পর্কিত: যখন ব্যবহারকারী পিছনে বা ফরোয়ার্ড ক্লিক করে - কম্পিউটার ডেস্কটপের শীর্ষে থাকা পৃষ্ঠায় এটি সম্পর্কিত নয়।
— ননপোলারিটি
2

এটি অ্যান্ডি ই এর উত্তরটির রূপান্তর is

এটি একটি কাজ করবে যেমন পৃষ্ঠা প্রতি 30 সেকেন্ডে রিফ্রেশ করুন, তবে কেবল পৃষ্ঠাটি দৃশ্যমান এবং ফোকাস করা থাকলে।

যদি দৃশ্যমানতা সনাক্ত করা যায় না, তবে কেবলমাত্র ফোকাস ব্যবহার করা হবে।

যদি ব্যবহারকারী পৃষ্ঠাটি ফোকাস করে তবে তা অবিলম্বে আপডেট হবে

কোনও অজ্যাক্স কল করার পরে 30 সেকেন্ড পর্যন্ত পৃষ্ঠা আর আপডেট হবে না

var windowFocused = true;
var timeOut2 = null;

$(function(){
  $.ajaxSetup ({
    cache: false
  });
  $("#content").ajaxComplete(function(event,request, settings){
       set_refresh_page(); // ajax call has just been made, so page doesn't need updating again for 30 seconds
   });
  // check visibility and focus of window, so as not to keep updating unnecessarily
  (function() {
      var hidden, change, vis = {
              hidden: "visibilitychange",
              mozHidden: "mozvisibilitychange",
              webkitHidden: "webkitvisibilitychange",
              msHidden: "msvisibilitychange",
              oHidden: "ovisibilitychange" /* not currently supported */
          };
      for (hidden in vis) {
          if (vis.hasOwnProperty(hidden) && hidden in document) {
              change = vis[hidden];
              break;
          }
      }
      document.body.className="visible";
      if (change){     // this will check the tab visibility instead of window focus
          document.addEventListener(change, onchange,false);
      }

      if(navigator.appName == "Microsoft Internet Explorer")
         window.onfocus = document.onfocusin = document.onfocusout = onchangeFocus
      else
         window.onfocus = window.onblur = onchangeFocus;

      function onchangeFocus(evt){
        evt = evt || window.event;
        if (evt.type == "focus" || evt.type == "focusin"){
          windowFocused=true; 
        }
        else if (evt.type == "blur" || evt.type == "focusout"){
          windowFocused=false;
        }
        if (evt.type == "focus"){
          update_page();  // only update using window.onfocus, because document.onfocusin can trigger on every click
        }

      }

      function onchange () {
        document.body.className = this[hidden] ? "hidden" : "visible";
        update_page();
      }

      function update_page(){
        if(windowFocused&&(document.body.className=="visible")){
          set_refresh_page(1000);
        }
      }


  })();
  set_refresh_page();
})

function get_date_time_string(){
  var d = new Date();
  var dT = [];
  dT.push(d.getDate());
  dT.push(d.getMonth())
  dT.push(d.getFullYear());
  dT.push(d.getHours());
  dT.push(d.getMinutes());
  dT.push(d.getSeconds());
  dT.push(d.getMilliseconds());
  return dT.join('_');
}

function do_refresh_page(){

// do tasks here

// e.g. some ajax call to update part of the page.

// (date time parameter will probably force the server not to cache)

//      $.ajax({
//        type: "POST",
//        url: "someUrl.php",
//        data: "t=" + get_date_time_string()+"&task=update",
//        success: function(html){
//          $('#content').html(html);
//        }
//      });

}

function set_refresh_page(interval){
  interval = typeof interval !== 'undefined' ? interval : 30000; // default time = 30 seconds
  if(timeOut2 != null) clearTimeout(timeOut2);
  timeOut2 = setTimeout(function(){
    if((document.body.className=="visible")&&windowFocused){
      do_refresh_page();
    }
    set_refresh_page();
  }, interval);
}
— আচ্ছা
সূত্র
ফোকাস / অস্পষ্ট পদ্ধতির উপর নির্ভর করে কাজ করে না (এটি আপনাকে প্রচুর মিথ্যা ইতিবাচক দেয়), দেখুন
— স্ট্যাকওভারফ্লো.com/a/9502074/698168
2

JQuery ছাড়াই সমাধানের জন্য ভিজিবিলিটি.জেগুলি পরীক্ষা করে দেখুন যা তিন পৃষ্ঠার রাজ্যের সম্পর্কে তথ্য সরবরাহ করে

visible    ... page is visible
hidden     ... page is not visible
prerender  ... page is being prerendered by the browser

এবং সেট-ইন্টেরওয়ালের সুবিধার্থে মোড়কও

/* Perform action every second if visible */
Visibility.every(1000, function () {
    action();
});

/* Perform action every second if visible, every 60 sec if not visible */
Visibility.every(1000, 60*1000, function () {
    action();
});

পুরানো ব্রাউজারগুলির জন্য একটি ফলব্যাক (IE <10; আইওএস <7) উপলব্ধ

— নাইকো
সূত্র
ব্রাউজার সমর্থন সম্পর্কে কি? ক্রোম, সাফারি এবং ফায়ারফক্সে ভাল জন্য এখনই।
— সেল্ভা গণপতি
1

কিছুটা আরও জটিল উপায় setInterval()হ'ল মাউসের অবস্থান পরীক্ষা করতে এবং শেষ চেকটির সাথে তুলনা করতে। যদি মাউস একটি নির্দিষ্ট সময়ের মধ্যে সরানো না হয় তবে ব্যবহারকারী সম্ভবত অলস।

এই পরিবর্তে, কহন, তাহলে ব্যবহারকারী নিষ্ক্রিয় যোগ সুবিধা আছে শুধু যদি জানালা সক্রিয় নয় পরীক্ষণ।

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

— অস্টিন হাইড
সূত্র
30
যদি না ব্যবহারকারীর মাউস না থাকে।
— ব্যবহারকারী1686
@ অন্নান: এটি কোডিংহরর.কম / ব্লগ / ২০০7/০৩/২০ এখন।
— chiborg
যদি ব্যবহারকারী কোনও ভিডিও দেখছেন তবে এটি পাশা খেলবে না
— জামিউউ
আপনি টাইমারটি পুনরায় সেট করতে এবং নন-মাউস ইস্যু সমাধান করতে অনকিপ্রেস বা অন্যান্য অনুরূপ ইভেন্টগুলি ব্যবহার করতে পারেন। অবশ্যই এটি এখনও ব্যবহারকারীদের পক্ষে কোনও ভিডিও দেখতে, কোনও চিত্র অধ্যয়ন করা ইত্যাদির জন্য সক্রিয়ভাবে পৃষ্ঠায় তাকানো কাজ করবে না
— জোশুয়াহেদলুন্ড
1

কৌণিক.জেএস এর জন্য, এখানে একটি নির্দেশিকা রয়েছে (স্বীকৃত উত্তরের ভিত্তিতে) যা আপনার নিয়ামককে দৃশ্যমানতার পরিবর্তনে প্রতিক্রিয়া জানাতে দেবে:

myApp.directive('reactOnWindowFocus', function($parse) {
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            var hidden = "hidden";
            var currentlyVisible = true;
            var functionOrExpression = $parse(attrs.reactOnWindowFocus);

          // Standards:
          if (hidden in document)
            document.addEventListener("visibilitychange", onchange);
          else if ((hidden = "mozHidden") in document)
            document.addEventListener("mozvisibilitychange", onchange);
          else if ((hidden = "webkitHidden") in document)
            document.addEventListener("webkitvisibilitychange", onchange);
          else if ((hidden = "msHidden") in document)
            document.addEventListener("msvisibilitychange", onchange);
          else if ("onfocusin" in document) {
                // IE 9 and lower:
            document.onfocusin = onshow;
                document.onfocusout = onhide;
          } else {
                // All others:
            window.onpageshow = window.onfocus = onshow;
                window.onpagehide = window.onblur = onhide;
            }

          function onchange (evt) {
                //occurs both on leaving and on returning
                currentlyVisible = !currentlyVisible;
                doSomethingIfAppropriate();
          }

            function onshow(evt) {
                //for older browsers
                currentlyVisible = true;
                doSomethingIfAppropriate();
            }

            function onhide(evt) {
                //for older browsers
                currentlyVisible = false;
                doSomethingIfAppropriate();
            }

            function doSomethingIfAppropriate() {
                if (currentlyVisible) {
                    //trigger angular digest cycle in this scope
                    scope.$apply(function() {
                        functionOrExpression(scope);
                    });
                }
            }
        }
    };

});

আপনি এটি উদাহরণস্বরূপ এটি ব্যবহার করতে পারেন :, <div react-on-window-focus="refresh()">যেখানে refresh()নিয়ন্ত্রণকারীর যে পরিমাণ সুযোগ রয়েছে তার সুযোগে স্কোপ ফাংশন।

— স্টিভ ক্যাম্পবেল
সূত্র
0

এখানে একটি দৃ ,়, আধুনিক সমাধান। (সংক্ষিপ্ত একটি মিষ্টি 👌🏽)

document.addEventListener("visibilitychange", () => {
  console.log( document.hasFocus() )
})

এটি কোনও শ্রোতার কোনও ঘটনা যখন ফোকাস বা ঝাপসা হতে পারে তখন চালিত হওয়ার সময় ট্রিগারটির জন্য এটি সেটআপ করবে।

— Cory রবিনসন
সূত্র
0

আপনি কাজ করতে চান উপর পুরো ব্রাউজার দাগ : আমি মন্তব্য, যদি প্রস্তাবিত ঘটনা আগুনের ব্রাউজার হারান ফোকাস কেউ। আমার ধারণাটি কোনও লুপে গণনা করা এবং কোনও ইভেন্টে আগুন লাগলে কাউন্টারের পুনরায় সেট করা। যদি কাউন্টারটি একটি সীমাতে পৌঁছে যায় তবে আমি অন্য পৃষ্ঠায় একটি অবস্থান..আরফ করব। আপনি যদি ডি-সরঞ্জামগুলিতে কাজ করেন তবে এটিও আগুন দেয়। 

var iput=document.getElementById("hiddenInput");
   ,count=1
   ;
function check(){
         count++;
         if(count%2===0){
           iput.focus();
         }
         else{
           iput.blur();
         }
         iput.value=count;  
         if(count>3){
           location.href="http://Nirwana.com";
         }              
         setTimeout(function(){check()},1000);
}   
iput.onblur=function(){count=1}
iput.onfocus=function(){count=1}
check();

এটি এফএফ-তে সফলভাবে পরীক্ষিত একটি খসড়া।

— বি ফল
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.