it-swarm.asia

جافا سكريبت أو متصفح jQuery زر العودة انقر كاشف

هل يمكن لشخص ما تبادل الخبرات/الكود كيف يمكننا اكتشاف زر الرجوع للخلف في المتصفح (لأي نوع من المتصفحات)؟

نحن بحاجة إلى تلبية جميع المتصفح الذي لا يدعم HTML5

40
Nil Pun

لا يعمل الحدث "popstate" إلا عند دفع شيء من قبل. لذلك عليك أن تفعل شيئا مثل هذا:

jQuery(document).ready(function($) {

  if (window.history && window.history.pushState) {

    window.history.pushState('forward', null, './#forward');

    $(window).on('popstate', function() {
      alert('Back button was pressed.');
    });

  }
});

للتوافق مع الإصدارات السابقة للمتصفح أوصي: history.js

51
Benny Neugebauer

هناك العديد من الطرق التي يمكنك من خلالها اكتشاف ما إذا كان المستخدم قد نقر على الزر "السابق". ولكن كل شيء يعتمد على ما احتياجاتك. حاول استكشاف الروابط أدناه ، ينبغي أن يساعدك.

اكتشاف ما إذا كان المستخدم قد ضغط على زر "رجوع" في الصفحة الحالية:

اكتشف ما إذا كانت الصفحة الحالية قد تمت زيارتها بعد الضغط على زر "رجوع" في الصفحة السابقة ("إعادة التوجيه"):

10
Vlad Mysla

العثور على هذا للعمل بشكل جيد عبر متصفح والهاتف المحمول back_button_override.js .

(أضيفت مؤقت لسفاري 5.0)

// managage back button click (and backspace)
var count = 0; // needed for safari
window.onload = function () { 
    if (typeof history.pushState === "function") { 
        history.pushState("back", null, null);          
        window.onpopstate = function () { 
            history.pushState('back', null, null);              
            if(count == 1){window.location = 'your url';}
         }; 
     }
 }  
setTimeout(function(){count = 1;},200);
6
user2992220

في javascript ، يشير نوع التنقل 2 إلى النقر على زر "للخلف" أو "للخلف" في المتصفح ، بينما يأخذ المستعرض بالفعل محتوى من ذاكرة التخزين المؤقت.

if(performance.navigation.type == 2) {
    //Do your code here
}
3
Hasan Badshah

يمكنك استخدام هذا البرنامج المساعد رهيبة

https://github.com/ianrogren/jquery-backDetect

كل ما عليك فعله هو كتابة هذا الرمز

  $(window).load(function(){
    $('body').backDetect(function(){
      // Callback function
      alert("Look forward to the future, not the past!");
    });
  });

الأفضل

1
Hussam Kurd

تعطيل زر رابط باتباع الوظيفة

window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle the back (or forward) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    }
    else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older FF and IE9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
};
0
Sakthi Karthik

في حالة HTML5 هذا سيفعل الخدعة

window.onpopstate = function() {
   alert("clicked back button");
}; history.pushState({}, '');
0
Ashik Jyothi

إنها متوفرة في HTML5 History API. يسمى الحدث 'popstate'

0
Eric

في حالتي ، أستخدم jQuery .load() لتحديث DIVs في SPA (تطبيق صفحة واحدة [ويب]) .

نظرًا لكونه جديدًا في العمل مع مستمع الأحداث $(window).on('hashchange', ..) ، أثبت هذا التحدي أنه صعب واستغرق بعض الشيء للاختراق. بفضل قراءة الكثير من الإجابات وتجربة أشكال مختلفة ، اكتشف أخيرًا كيف نجعلها تعمل بالطريقة التالية. بقدر ما أستطيع أن أقول ، أنها تبدو مستقرة حتى الآن.

باختصار - هناك المتغير globalCurrentHash الذي يجب تعيينه في كل مرة تقوم فيها بتحميل العرض.

ثم عند تشغيل مستمع الحدث $(window).on('hashchange', ..) ، فإنه يتحقق مما يلي:

  • إذا كان location.hash له نفس القيمة ، فهذا يعني المضي قدما
  • إذا كان location.hash له قيمة مختلفة ، فهذا يعني العودة

أدرك أن استخدام vars العالمية ليس هو الحل الأكثر أناقة ، لكن القيام بالأشياء OO في JS تبدو صعبة بالنسبة لي حتى الآن. الاقتراحات بالتحسين/التنقيح موضع تقدير بالتأكيد


إعداد:

  1. تحديد فار العالمية:
    var globalCurrentHash = null;
  1. عند الاتصال بـ .load() لتحديث DIV ، قم بتحديث var العالمي أيضًا:

    function loadMenuSelection(hrefVal) {
      $('#layout_main').load(nextView);
      globalCurrentHash = hrefVal;
    }
    
  2. على الصفحة جاهزة ، قم بإعداد المستمع للتحقق من var العالمي لمعرفة ما إذا كان يتم الضغط على زر الرجوع:

    $(document).ready(function(){
      $(window).on('hashchange', function(){
          console.log( 'location.hash: ' + location.hash );
          console.log( 'globalCurrentHash: ' + globalCurrentHash );
    
          if (location.hash == globalCurrentHash) {
              console.log( 'Going fwd' );
          }
          else {
    
              console.log( 'Going Back' );
              loadMenuSelection(location.hash);
          }
        });
    
    });
    
0
Gene Bo