چگونه می‌توانیم آدرس (URL) را بدون بارگذاری مجدد صفحه بوسیله جاوااسکریپت تغییر دهم؟

در صورتی که بخواهید URL صفحه فعلی را بدون بارگذاری مجدد تغییر دهید، می‌توانید از تعدادی از متدهای موجود در API تاریخچه مرورگر استفاده کنید. این تکنیک به ویژه در سناریوهای SPA (Single Page Application) مفید است، جایی که نیاز دارید URL را به‌روزرسانی کنید بدون اینکه محتوای صفحه بارگذاری مجدد شود.

HTML5 دو متد اصلی برای کار با تاریخچه مرورگر معرفی کرده است: history.pushState() و history.replaceState(). متد pushState() به شما اجازه می‌دهد تا ورودی‌ های جدیدی را به تاریخچه اضافه کنید. به عنوان مثال:

      window.history.pushState({stateKey: 'value'}, 'عنوان صفحه', '/page2.php');

    

در اینجا، stateKey یک شی است که به شما این امکان را می‌دهد تا داده‌های مربوطه را با وضعیت URL جدید مرتبط کنید. به همین ترتیب، window.history.replaceState() به شما اجازه می‌دهد تا URL را بدون اضافه کردن ورودی جدیدی به تاریخچه مرورگر تغییر دهید:

      if (window.history.replaceState) {
    window.history.replaceState({stateKey: 'value'}, 'عنوان صفحه', '/page2.php');
}

    

توجه داشته باشید که با استفاده از replaceState()، می‌توانید از ذخیره‌سازی تاریخچه جلوگیری کنید، اما این می‌تواند باعث شود که عملکرد دکمه بازگشت مرورگر مختل شود.

برای اعمال تغییرات در محتوای صفحه و عنوان آن، بعد از بروزرسانی URL، می‌توانید کدی مشابه زیر را استفاده کنید:

      function processAjaxData(response, urlPath){
    document.getElementById("content").innerHTML = response.html; // پاسخ HTML را بارگذاری می‌کند
    document.title = response.pageTitle; // عنوان صفحه را تغییر می‌دهد
    window.history.pushState({"html":response.html,"pageTitle":response.pageTitle}, "", urlPath);
}

    

از طرف دیگر، می‌توانید از window.onpopstate یا window.addEventListener برای شناسایی زمانی که کاربر به جلو یا عقب می‌رود استفاده کنید:

      window.addEventListener("popstate", (e) => {
    if (e.state) {
        document.getElementById("content").innerHTML = e.state.html;
        document.title = e.state.pageTitle;
    }
});

    

شایان ذکر است که URL جدید باید از همان مبدأ (origin) باشد که URL کنونی در آن قرار دارد. در غیر این صورت استفاده از pushState() یا replaceState() با خطا مواجه خواهد شد.