ستصف هذه المقالة طرق تعديل عنوان URL دون إعادة تحميل صفحة الويب باستخدام JavaScript.
كيفية تعديل / تغيير عنوان URL في JavaScript دون إعادة تحميل الصفحة؟
لتعديل عنوان URL دون إعادة تحميل صفحة الويب ، استخدم طريقة JavaScript المحددة مسبقًا التالية:
الطريقة الأولى: تعديل عنوان URL في JavaScript دون إعادة تحميل الصفحة باستخدام طريقة “pushState ()”
لتعديل عنوان URL دون إعادة تحميل صفحة الويب ، استخدم ' pushState () ' طريقة. إنها ميزة أو طريقة محددة مسبقًا لـ ' كائن التاريخ 'الذي يسمح بتغيير سجل المتصفح بدون التنقل في الصفحة أو تحديثها. يقوم فقط بإضافة أو تعديل مكدس المحفوظات ولا يقوم بتحميل صفحة جديدة. باستخدام هذا الأسلوب ، يمكنك التبديل بين الصفحات من خلال إضافة إدخال جديد إلى مجموعة المحفوظات الخاصة بالمستعرض.
بناء الجملة
اتبع بناء الجملة المحدد لطريقة “pushState ()”:
نافذة او شباك. تاريخ . PushState ( ولاية و عنوان و عنوان url ) ؛
هنا:
- ' ولاية 'يمثل إدخال التاريخ الجديد.
- ' عنوان 'هو النص المحدد الذي يمكن عرضه في شريط عنوان المتصفح.
- ' عنوان url 'يشير إلى عنوان URL الذي تم استبداله كإدخال جديد.
مثال
في ملف HTML ، أنشئ أربعة أزرار تستدعي ' تعديل Url () ”وظيفة عند النقر فوق الزر:
< زر عند النقر = 'editUrl ('CSS Tutorial'، 'CSSTutorial.html')؛' > 2 زر >
< زر عند النقر = 'editUrl ('JavaScript Tutorial'، 'JavaScriptTutorial.html')؛' > 3 زر >
< زر عند النقر = 'editUrl ('Java Tutorial'، 'JavaTutorial.html')؛' > 4 زر >
تحديد وظيفة ' تعديل Url () 'في ملف JavaScript الذي سيتم تشغيله عند النقر فوق الزر. يتطلب معلمتين ، عنوان ' و ال ' عنوان url '. عندما يتم استدعاء الطريقة على الزر ، سيتم تمرير 'العنوان' و 'url' كوسائط. تحقق من نوع ' PushState 'من كائن التاريخ ، إذا لم يكن' غير معرف '. ثم اتصل بـ ' history.pushState () 'لتغيير عنوان URL:
وظيفة تعديل ( عنوان و عنوان url ) {
لو ( نوع من ( تاريخ. PushState ) ! = 'غير معرف' ) {
كان الهدف = {
عنوان : عنوان و
عنوان Url : عنوان url
} ؛
تاريخ. PushState ( الهدف و الهدف. عنوان و الهدف. عنوان Url ) ؛
}
}
يمكن ملاحظة أنه عند كل نقرة زر ، سيتم تغيير عنوان URL بنجاح دون إعادة تحميل الصفحة:
في الإخراج أعلاه ، يمكنك أن ترى أن زر السهم الخلفي في أعلى اليسار ( <- ) أثناء النقر على الزر ، فهذا يشير إلى أنه يمكنك التنقل ذهابًا وإيابًا لأن ' pushState () 'يضيف أسلوب URL الجديد إلى مكدس المحفوظات.
الطريقة الثانية: تعديل عنوان URL في JavaScript دون إعادة تحميل الصفحة باستخدام طريقة 'replaceState ()'
استخدم ال ' replaceState () 'لتعديل عنوان URL دون إعادة تحميل صفحة الويب. إنها أيضًا سمة من سمات ' كائن التاريخ 'ولكنه لن يضيف مدخلاً جديدًا إلى مكدس المحفوظات. يغير الحالة الحالية لسجل المتصفح ويستبدلها بحالة جديدة. باستخدام هذا الأسلوب ، لا يمكنك التبديل بين الصفحات.
بناء الجملة
يتم استخدام الصيغة المحددة للطريقة 'replaceState ()':
مثال
في الوظيفة المحددة ، قم باستدعاء ' replaceState () 'لاستبدال عنوان URL عند النقر فوق الزر دون إعادة تحميل الصفحة أو التنقل خلالها:
لو ( نوع من ( تاريخ. استبدل الدولة ) ! = 'غير معرف' ) {
كان الهدف = {
عنوان : عنوان و
عنوان Url : عنوان url
} ؛
تاريخ. استبدل الدولة ( الهدف و الهدف. عنوان و الهدف. عنوان Url ) ؛
}
}
يشير الناتج إلى أنه عند كل نقرة زر ، تم تغيير عنوان URL ولا يوجد خيار للتنقل للعودة حيث تم تعطيل زر السهم الخلفي:
لقد قدمنا جميع المعلومات الأساسية ذات الصلة بتعديل عنوان URL دون إعادة تحميل الصفحة في JavaScript.
خاتمة
لتعديل / تغيير عنوان URL دون تحديث صفحة الويب ، استخدم ' pushState () 'أو' replaceState () ' طريقة. يضيف أسلوب 'pushState ()' عنوان URL الجديد كمدخل جديد في مكدس المحفوظات ويسمح للمستخدمين بالتنقل ذهابًا وإيابًا. بينما تحل طريقة 'replaceState ()' محل عنوان URL ولا تسمح بالانتقال إلى الصفحة الخلفية. وصفت هذه المقالة طرق تعديل عنوان URL دون إعادة تحميل صفحة الويب باستخدام JavaScript.