تعديل شريط عنوان URL في اياكس التطبيق لتتناسب مع الوضع الحالي

Question

أنا أكتب AJAX التطبيق ، ولكن كما ينتقل المستخدم من خلال التطبيق ، أود URL في شريط العناوين إلى تحديث على الرغم من عدم وجود إعادة تحميل الصفحة.في الأساس أنا أريد لها أن تكون قادرة على المرجعية في أي نقطة وبالتالي العودة إلى الحالة الراهنة.

كيفية التعامل مع الحفاظ على براحة في اياكس تطبيقات ؟

Answer 1

طريقة للقيام بذلك هو التلاعب location.hash عندما اياكس التحديثات النتيجة في حالة التغيير الذي ترغب أن يكون ظاهر URL.على سبيل المثال, إذا كان لديك عنوان url لصفحة هي:

http://example.com/

إذا كان العميل وظيفة تنفيذ هذا الكود:

// AJAX code to display the "foo" state goes here.

location.hash = 'foo';

ثم URL المعروضة في المتصفح سيكون تحديث:

http://example.com/#foo

هذا يسمح للمستخدمين أن المرجعية "فو" الدولة الصفحة ، واستخدام متصفح التاريخ للتنقل بين الدول.

مع هذه الآلية في مكان, سوف تحتاج بعد ذلك إلى تحليل على تجزئة جزء من عنوان URL على جانب العميل باستخدام جافا سكريبت لإنشاء وعرض المناسبة الأولي للدولة ، باعتبارها جزء معرفات (الجزء بعد #) يتم إرسالها إلى الملقم.

بن Alman هو hashchange المساعد يجعل هذا الأخير نسيم إذا كنت تستخدم مسج.

Answer 2

انظر مواقع مثل book.cakephp.org.هذا الموقع التغييرات URL بدون استخدام تجزئة استخدام اياكس.لست متأكدا كيف يفعل ذلك بالضبط ولكن كنت أحاول معرفة ذلك.إذا كان أي شخص يعرف, اسمحوا لي أن أعرف.

أيضا github.com عندما تبحث في التنقل داخل مشروع معين.

Answer 3

فمن غير المرجح أن الكاتب يريد أن تحديث أو إعادة توجيه ضيفه عند استخدام اياكس.ولكن لماذا لا تستخدم HTML5 pushState/replaceState?

عليك أن تكون قادرا على تعديل addressbar بقدر ما تريد. الحصول على المظهر الطبيعي عناوين url مع اياكس.

تحقق من رمز على أحدث مشروع بلدي:http://iesus.se/

Answer 4

هذا يشبه ما قال كيفن.هل يمكن أن يكون العميل الخاص بك الدولة وبعض كائن جافا سكريبت, و عندما تريد حفظ الدولة تسلسل كائن (JSON باستخدام base64 في ترميز).ثم يمكنك تعيين جزء من href أن هذه السلسلة.

var encodedState = base64(json(state));
var newLocation = oldLocationWithoutFragment + "#" + encodedState;

document.location = newLocation; // adds new entry in browser history
document.location.replace(newLocation); // replaces current entry in browser history

أول طريقة تعامل الدولة الجديدة حسب موقع جديد (حتى زر العودة إلى الموقع السابق).وهذا الأخير لا.

Answer 5

SWFAddress يعمل في فلاش وجافا سكريبت المشاريع يتيح لك إنشاء bookmarkable عناوين المواقع (باستخدام تجزئة الطريقة المذكورة أعلاه) وكذلك مما يتيح لك العودة زر الدعم.

http://www.asual.com/swfaddress/

Answer 6

النافذة.موقع.تجزئة الطريقة هي الطريقة المفضلة لعمل الأشياء.للحصول على شرح كيفية القيام بذلك ، اياكس أنماط عناوين فريدة من نوعها.

YUI له تنفيذ هذا النمط وحدة نمطية ، والتي تشمل أي محددة احترف العمل على الزر مرة أخرى تعمل جنبا إلى جنب مع إعادة كتابة العنوان باستخدام التجزئة. YUI تاريخ المتصفح مدير.

أطر أخرى مماثلة تطبيقات كذلك.نقطة مهمة هو اذا كنت تريد التاريخ إلى العمل جنبا إلى جنب مع إعادة كتابة العنوان ، المتصفحات المختلفة تحتاج إلى طرق مختلفة للتعامل مع ذلك.(هذا هو مفصل في الحلقة الأولى من المادة.)

أي يحتاج iframe القائمة الإختراق, حيث فايرفوكس سوف تنتج مزدوجة التاريخ باستخدام نفس الطريقة.

Answer 7

إذا كان المرجع أو غيرهم لا تزال تبحث عن وسيلة للقيام تعديل متصفح التاريخ لتمكين الدولة ، وذلك باستخدام pushState و replaceState ، كما اقترح IESUS ، هو " حق " طريقة للقيام بذلك الآن.انها الميزة الرئيسية على الموقع.تجزئة يبدو أنه يخلق عناوين المواقع الفعلية ، وليس فقط التجزئة.إذا كان تاريخ المتصفح باستخدام التجزئة المحفوظة ، ثم النظر مع جافا سكريبت المعوقين ، فإن التطبيق لن يعمل منذ التجزئات لا يتم إرسالها إلى الملقم.ومع ذلك ، إذا pushState قد تم استخدام الطريق بأكمله سيتم إرسالها إلى الخادم, الذي يمكنك ثم بناء على الاستجابة بشكل مناسب الطرق.رأيت على سبيل المثال حيث نفس الشارب قوالب استخدمت على كل من الخادم و العميل.إذا كان العميل تمكين جافا سكريبت, كان لاذع الردود عن طريق تجنب ذهاب وإياب إلى الخادم ، ولكن التطبيق سوف تعمل على ما يرام تماما بدون جافا سكريبت.وبالتالي فإن التطبيق يمكن أن تتحلل برشاقة في غياب جافا سكريبت.

أيضا, أعتقد أن هناك بعض الإطار هناك مع اسم مثل history.js.المتصفحات التي تدعم HTML5 ، فإنه يستخدم pushState ، ولكن إذا كان المتصفح لا يدعم ذلك تلقائيا يعود إلى استخدام التجزئة.

Answer 8

تحقق مما إذا كان المستخدم 'في' الصفحة عند النقر على شريط العنوان, جافا سكريبت يقول كنت خارج الصفحة.إذا قمت بتغيير شريط العنوان ثم اضغط "ENTER" مع الرمز '#' في غضون ذلك ثم تذهب إلى الصفحة مرة أخرى ، دون انقر على الصفحة يدويا مع الماوس ، ثم keyboad الحدث الأوامر (الوثيقة.onkeypress) من جافا سكريبت سوف تكون قادرة على التحقق إذا كان إدخال النشطة جافا سكريبت إعادة التوجيه.يمكنك التحقق من إذا كان المستخدم في الصفحة مع نافذة.onfocus وتحقق إذا خرج مع نافذة.onblur.

نعم هذا ممكن.

;)