-
وفي سبتمبر من العام الماضي، قام تويتر بتجديد نسخته. التغيير المهم هو إضافة الرمز "#!" إلى عنوان URL. على سبيل المثال، عنوان URL للصفحة الرئيسية للمستخدم قبل المراجعة هو
وبعد المراجعة أصبح
http://twitter.com/#!/اسم المستخدم
هذه هي المرة الأولى التي يتم فيها استخدام "#" في عناوين URL المهمة على نطاق واسع بواسطة موقع ويب رئيسي. وهذا يدل على إعادة التعرف على دور علامة التجزئة. تعتمد هذه المقالة على مقالة HttpWatch لفرز جميع نقاط المعرفة المهمة المتعلقة بعلامة الجنيه.
1. معنى #
# يمثل موضعًا في صفحة الويب. الحرف الموجود على اليمين هو معرف الموضع. على سبيل المثال،
http://www.example.com/index.html#PRint
وهو يمثل موضع الطباعة لصفحة الويب Index.html. بعد أن يقرأ المتصفح عنوان URL هذا، سيقوم تلقائيًا بتمرير موضع الطباعة إلى المنطقة المرئية. هناك طريقتان لتحديد معرف لموقع صفحة الويب. أحدهما هو استخدام نقاط الربط، مثل <a name="print"></a>، والآخر هو استخدام سمات المعرف، مثل <div id="print">.
2. طلبات HTTP لا تتضمن #
# يُستخدم لتوجيه إجراءات المتصفح وهو عديم الفائدة تمامًا من جانب الخادم. ولذلك، لم يتم تضمين # في طلب HTTP.
على سبيل المثال، قم بزيارة عنوان URL التالي،
http://www.example.com/index.html#print
الطلب الفعلي الذي قدمه المتصفح هو هذا:
احصل على /index.html HTTP/1.1
المضيف: www.example.com
كما ترون، يتم طلب ملف Index.html فقط، ولا يوجد جزء "#print" على الإطلاق.
3. الحروف بعد #
سيتم تفسير أي أحرف تظهر بعد الرقم الأول بواسطة المتصفح على أنها معرف موضعي. وهذا يعني أنه لن يتم إرسال أي من هذه الأحرف إلى الخادم.
على سبيل المثال، يهدف عنوان URL التالي إلى تحديد قيمة اللون:
http://www.example.com/?color=#fff
ومع ذلك، فإن الطلب الفعلي الذي قدمه المتصفح هو:
احصل على /?color= HTTP/1.1
المضيف: www.example.com
كما ترون، تم حذف "#fff". فقط إذا تم تحويل # إلى %23، فسيعامله المتصفح كحرف حرفي. أي أنه يجب كتابة عنوان URL أعلاه على النحو التالي:
http://example.com/?color=%23fff
4. قم بتغيير #لا تؤدي إلى إعادة تحميل صفحة الويب
ما عليك سوى تغيير الجزء بعد #، وسيقوم المتصفح بالتمرير فقط إلى الموضع المقابل ولن يقوم بإعادة تحميل صفحة الويب.
على سبيل المثال، من
http://www.example.com/index.html#location1
التغيير الى
http://www.example.com/index.html#location2
لن يقوم المتصفح بإعادة طلب ملف Index.html من الخادم.
5. سيؤدي تغيير # إلى تغيير سجل الوصول للمتصفح
في كل مرة تقوم فيها بتغيير الجزء بعد #، سيتم إضافة سجل إلى سجل الوصول للمتصفح. استخدم الزر "رجوع" للعودة إلى الموضع السابق. وهذا مفيد بشكل خاص لتطبيقات Ajax، حيث يمكن استخدام قيم # مختلفة لتمثيل حالات وصول مختلفة، ومن ثم يمكن إعطاء المستخدم رابطًا للوصول إلى حالة معينة. تجدر الإشارة إلى أن القواعد المذكورة أعلاه لا تنطبق على IE 6 وIE 7، ولن تزيد السجل بسبب تغيير #.
6. window.location.hash يقرأ # القيمة
الخاصية window.location.hash قابلة للقراءة والكتابة. عند القراءة، يمكن استخدامه لتحديد ما إذا كانت حالة صفحة الويب قد تغيرت عند الكتابة، وسيتم إنشاء سجل سجل الوصول دون إعادة تحميل صفحة الويب.
7. حدث onhashchange
هذا حدث جديد في HTML 5. سيتم تشغيل هذا الحدث عندما تتغير قيمة #. IE8+، Firefox 3.6+، Chrome 5+، Safari 4.0+ يدعمون هذا الحدث.
هناك ثلاث طرق لاستخدامه:
window.onhashchange = func;
<body onhashchange = "func ()؛">
window.addEventListener("hashchange", func, false);
بالنسبة للمتصفحات التي لا تدعم onhashchange، يمكنك استخدام setInterval لمراقبة التغييرات في location.hash.
8. آلية زحف جوجل#
افتراضيًا، تتجاهل عناكب الويب الخاصة بـ Google الجزء # من عنوان URL.
ومع ذلك، تنص Google أيضًا على أنه إذا كنت تريد قراءة المحتوى الذي تم إنشاؤه بواسطة Ajax بواسطة محرك التصفح، فيمكنك استخدام "#!" في عنوان URL، وستقوم Google تلقائيًا بتحويل المحتوى الذي يتبعه إلى قيمة سلسلة الاستعلام _escaped_fragment_. .
على سبيل المثال، وجدت جوجل أن عنوان URL لإصدار تويتر الجديد هو كما يلي:
http://twitter.com/#!/اسم المستخدم
سيتم الزحف إلى عنوان URL آخر تلقائيًا:
http://twitter.com/?_escaped_fragment_=/username
من خلال هذه الآلية، يمكن لـ Google فهرسة محتوى Ajax الديناميكي.
مصدر المقال: مذكرات روان ييفينغ على الإنترنت