كيف يمكنني اكتشاف تغيير في شريط العناوين باستخدام JavaScript؟

Question

لدي تطبيق Ajax ثقيل قد يحتوي على عنوان URL مثل

http://example.com/myApp/#page=1

عندما يتلاعب المستخدم بالموقع، يمكن أن يتغير شريط العناوين إلى شيء مثل

http://example.com/myApp/#page=5

دون إعادة تحميل الصفحة.

مشكلتي هي التسلسل التالي:

1. يقوم المستخدم بوضع إشارة مرجعية على عنوان URL الأول.
2. يتلاعب المستخدم بالتطبيق بحيث يكون عنوان URL الثاني هو الحالة الحالية.
3. ينقر المستخدم على الإشارة المرجعية التي تم إنشاؤها في الخطوة 1.
4. يتغير عنوان URL الموجود في شريط العناوين من http://example.com/myApp/#page=5 ل http://example.com/myApp/#page=1, لكني لا أعرف طريقة لاكتشاف التغيير الذي حدث.

إذا اكتشفت تغييرًا، فستعمل بعض JavaScript عليه.

Answer 1

يقدم HTML5 أ hashchange الحدث الذي يسمح لك بالتسجيل للحصول على إشعارات بتغييرات تجزئة عنوان URL دون الاستقصاء عنها باستخدام مؤقت.

إنه مدعوم من قبل جميع المتصفحات الرئيسية (Firefox 3.6 وIE8 وChrome والمتصفحات الأخرى المستندة إلى Webkit)، لكنني ما زلت أقترح بشدة استخدام مكتبة تتعامل مع الحدث نيابةً عنك - أي.عن طريق استخدام مؤقت في المتصفحات التي لا تدعم حدث HTML5 واستخدام الحدث بطريقة أخرى.

لمزيد من المعلومات حول الحدث، انظر https://developer.mozilla.org/en/dom/window.onhashchange و http://msdn.microsoft.com/en-us/library/cc288209%28VS.85%29.aspx.

Answer 2

تحقق من العنوان الحالي بشكل دوري باستخدام setTimeout/interval:

 var oldLocation = location.href;
 setInterval(function() {
      if(location.href != oldLocation) {
           // do your action
           oldLocation = location.href
      }
  }, 1000); // check every second

Answer 3

يجب عليك توسيع كائن الموقع لكشف حدث يمكنك الارتباط به.

أي:

window.location.prototype.changed = function(e){};

(function() //create a scope so 'location' is not global
{
    var location = window.location.href;
    setInterval(function()
    {
        if(location != window.location.href)
        {
            location = window.location.href;
            window.location.changed(location);
        }
    }, 1000);
})();

window.location.changed = function(e)
{
    console.log(e);//outputs http://newhref.com
    //this is fired when the window changes location
}

Answer 4

SWFaddress هي مكتبة ممتازة لهذه الأنواع من الأشياء.