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

تغيير عنوان URL ديناميكيًا باستخدام JavaScript

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

في هذا الدليل، سنستكشف طرقًا لتغيير جزء عنوان URL بعد النطاق، بما في ذلك التقنيات التي تسمح لك بالوصول إلى الجزء الموجود قبل رمز التجزئة (#). وهذا يضمن الامتثال للسياسات عبر النطاقات مع تحقيق تعديل عنوان URL المطلوب.

شرح تفصيلي لتعديل URL في JavaScript

يستخدم البرنامج النصي الأول history.pushState() الطريقة، والتي تعد جزءًا من History API. يسمح هذا الأمر للمطورين بإضافة إدخال جديد إلى مكدس محفوظات جلسة المتصفح، مما يؤدي بشكل فعال إلى تغيير عنوان URL المعروض في شريط العناوين دون إعادة تحميل الصفحة. في البرنامج النصي، const newURL = "/page2.php"; يحدد المسار الجديد، و history.pushState(null, "", newURL); يغير عنوان URL إلى هذا المسار الجديد. عن طريق التفاف history.pushState الأمر في وظيفة مثل function changeURL(newPath)يمكننا تحديث عنوان URL ديناميكيًا حسب الحاجة. تعتبر هذه التقنية مفيدة بشكل خاص لتطبيقات الصفحة الواحدة (SPA) حيث يتغير المحتوى ديناميكيًا دون إعادة تحميل الصفحة بأكملها.

يتناول البرنامج النصي الثاني تغيير تجزئة عنوان URL باستخدام window.location.hash. تحصل هذه الخاصية على أو تقوم بتعيين جزء الربط من عنوان URL الذي يتبع رمز التجزئة (#). عن طريق الإعداد const hashValue = "newSection"; و window.location.hash = hashValue;، تتغير تجزئة عنوان URL إلى #newSection دون إعادة تحميل الصفحة. يعد هذا الأسلوب مفيدًا للتنقل داخل نفس الصفحة أو الارتباط بأقسام محددة داخل المستند. بالإضافة إلى ذلك، الوظيفة function updateHash(newHash) يلخص هذه الوظيفة، مما يجعل من السهل تغيير جزء التجزئة من عنوان URL ديناميكيًا. يوفر كلا النصين طرقًا سلسة لتعديل عنوان URL وتحسين تجربة المستخدم عن طريق تجنب عمليات إعادة تحميل الصفحة غير الضرورية.

const newURL = "/page2.php";
history.pushState(null, "", newURL);
// This changes the URL to /page2.php without reloading the page

function changeURL(newPath) {
    window.history.pushState({}, "", newPath);
}
// Example usage
changeURL("/page2.php");

const hashValue = "newSection";
window.location.hash = hashValue;
// This changes the URL hash to #newSection

function updateHash(newHash) {
    window.location.hash = newHash;
}
// Example usage
updateHash("newSection");

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

هناك جانب آخر لتعديل عنوان URL دون إعادة تحميل الصفحة يتضمن استخدام replaceState() الطريقة من History API. بينما pushState() يضيف إدخال تاريخ جديد، replaceState() يعدل إدخال التاريخ الحالي. يمكن أن يكون هذا مفيدًا بشكل خاص عندما تريد تغيير عنوان URL دون تشويش سجل المستخدم بحالات متعددة. على سبيل المثال، إذا كان لديك تطبيق مكون من صفحة واحدة حيث يتغير المحتوى بشكل متكرر، فقد ترغب في تحديث عنوان URL ليعكس الحالة الحالية دون إضافة كل تغيير إلى السجل. وهذا يحافظ على وظيفة زر الرجوع نظيفة وسهلة الاستخدام.

ليستخدم replaceState()يمكنك كتابة دالة مشابهة لـ changeURL() ولكن بدلا من ذلك اتصل history.replaceState() داخله. على سبيل المثال، function replaceURL(newPath) يمكن الاستفادة منها history.replaceState(null, "", newPath); لتحديث عنوان URL. تعتبر هذه التقنية مفيدة لتحسين تجربة المستخدم من خلال الحفاظ على مزامنة عنوان URL مع حالة التطبيق دون إنشاء إدخالات سجل غير ضرورية. علاوة على ذلك، فهو يوفر طريقة أكثر فعالية لإدارة سجل المتصفح، خاصة في تطبيقات الويب الديناميكية.