نحوه تغییر URL در جاوااسکریپت: Redirecting

در این مقاله کوتاه قصد داریم در مورد چگونگی تغییر URLها در جاوااسکریپت با redirecting بحث کنیم. در ادامه چند روش مختلف را بررسی خواهیم کرد که می‌توانید از آنها برای انجام تغییر مسیرهای جاوااسکریپت استفاده کنید.

جاوااسکریپت یکی از فناوری‌های اصلی در توسعه وب است. اکثر وب سایت‌ها از آن بهره می‌گیرند و همه مرورگرهای وب مدرن نیز بدون نیاز به هیچگونه افزونه خاصی از آن پشتیبانی می‌کنند. پس بیایید نکات و ترفندهای مختلف آن را بررسی کنیم که می‌تواند به شما در توسعه جاوااسکریپت کمک کند.

وقتی با جاوااسکریپت کار می‌کنید، اغلب پیش می‌آید که کاربران را به صفحه دیگری هدایت کنید. جاوااسکریپت روش‌های متفاوتی را برای انجام این کار ارائه می‌دهد.

اکنون می‌خواهیم نحوه انجام تغییر مسیرهای URL در جاوااسکریپت vanilla و کتابخانه jQuery را مورد بحث قرار دهیم.

نحوه تغییر مسیر URL در جاوااسکریپت Vanilla

در این بخش روش‌های داخلی ارائه شده توسط جاوااسکریپت را برای پیاده سازی تغییر مسیر URL مرور می‌کنیم. در واقع جاوااسکریپت یک شی location دارد (بخشی از شی window) که به شما امکان می‌دهد عملیات مربوط به URLهای مختلف را انجام دهید.

متد location.href

این متد یکی از رایج‌ترین روش‌ها برای انجام تغییر مسیر در جاوااسکریپت است. اگر سعی کنید مقدار location.href را به دست آورید، این مقدار URL فعلی را برمی‌گرداند. به طور مشابه همچنین می‌توانید از آن برای تنظیم یک آدرس جدید استفاده نمایید و سپس کاربران به آن URL هدایت می‌شوند.

بیایید مثال زیر را بررسی کنیم:

console.log(location.href);
// prints the current URL

location.href = 'https://www.roocket.ir';
// redirects the user to https://www.roocket.ir

همانطور که می‌بینید، تغییر مسیر کاربران با متد location.href بسیار آسان است. از آنجا که شی location بخشی از شی window است، قطعه کد فوق را می‌توان به صورت زیر هم نوشت:

window.location.href = 'https://www.roocket.ir';

بنابراین در این روش می‌توانید متد location.href را برای تغییر URL و هدایت کاربران به یک صفحه وب دیگر به کار بگیرید.

متد location.assign

این متد بسیار شبیه به متد قبل عمل می‌کند و به شما این امکان را می‌دهد که کاربران را به صفحه وب دیگری هدایت کنید.

بیایید با مثال زیر ببینیم که چگونه کار می‌کند:

location.assign('https://www.roocket.ir');

همانطور که ملاحظه می‌کنید، بسیار ساده است. شما فقط باید URL را در اولین آرگومان متد منتقل کنید و سپس کاربران را به آن URL هدایت می‌کند. توجه به این نکته ضروری است که این متد state شی History را حفظ می‌کند. در بخش بعدی به طور مفصل در این مورد بحث خواهیم کرد.

متد location.replace

همچنین می‌توانید از متد location.replace برای انجام تغییر مسیرهای جاوااسکریپت استفاده کنید. این متد به شما امکان می‌دهد URL فعلی را با URL دیگری جایگزین کنید تا تغییر مسیر انجام شود.

بیایید ببینیم که مثال زیر چگونه کار می‌کند:

location.replace('https://www.roocket.ir');

اگرچه متد location.replace شباهت زیادی به متدهای location.href و location.assign دارد که کاربران را به آدرس دیگری هدایت می‌کند، اما تفاوت مهمی بین آنها است. وقتی از متد location.replace استفاده می‌کنید، صفحه فعلی در session ذخیره نمی‌شود و در واقع از شی History جاوااسکریپت حذف می‌گردد. بنابراین کاربران نمی‌توانند از دکمه بازگشت برای هدایت به آن استفاده کنند.

بیایید سعی کنیم آن را با مثال زیر درک کنیم:

// let’s assume that a user is browsing https://www.roocket.ir

// a user is redirected to a different page with the location.href method
location.href = 'https://www.roocket.ir/discuss';


// a user is redirected to a different page with the location.replace method
location.replace('https://www.roocket.ir/articles');

در مثال بالا، فرض کردیم که یک کاربر در حال مرور وب سایت https://www.roocket.ir است. در مرحله بعد از متد location.href برای هدایت کاربر به صفحه وب https://www.roocket.ir/discuss استفاده کرده‌ایم. در نهایت از متد location.replace برای هدایت کاربر به صفحه وب https://www.roocket.ir/articles استفاده شده است. اکنون اگر کاربر روی دکمه برگشت کلیک کند، به جای رفتن به آدرس https://www.roocket.ir/discuss به https://www.roocket.ir برمی‌گردد، زیرا متد location.replace را استفاده کرده‌ایم و در واقع آدرس فعلی را با https://www.roocket.ir/articles در شی History جایگزین کرده است.

بنابراین باید تفاوت بین location.replace و سایر متدها را قبل از استفاده درک کنید. شما نمی‌توانید آنها را به جای یکدیگر به کار ببرید، زیرا متد location.replace استیت شی History جاوااسکریپت را تغییر می‌دهد. بنابراین اگر می‌خواهید استیت شی History را حفظ کنید، باید از متدهای دیگر جهت هدایت کاربران استفاده نمایید.

نحوه تغییر مسیر URL با jQuery

اگرچه جاوااسکریپت vanilla امکانات کافی را در مورد تغییر مسیر URL ارائه می‌دهد، اما اگر هنوز در فکر نحوه انجام این کار با کتابخانه jQuery هستید، در این قسمت می‌خواهیم آن را بررسی کنیم.

در جی کوئری می‌توانید از متد attr برای انجام تغییر مسیر استفاده کنید، همانطور که در قطعه کد زیر نشان داده شده است:

$(location).attr('href', 'https://design.tutsplus.com');

مشاهده می‌کنید که تغییر مسیر کاربران با کتابخانه جی کوئری بسیار آسان است.

سخن پایانی

در این مقاله در مورد چگونگی پیاده سازی تغییر مسیرهای جاوااسکریپت بحث کردیم. دیدید که روش‌های مختلفی را که می‌توان برای انجام این کار استفاده کرد، همراه با چند مثال مورد بررسی قرار دادیم. اگر شما هم روش‌های دیگری سراغ دارید یا قبلا از آنها استفاده کرده‌اید، در بخش نظرات زیر به اشتراک بگذارید و حتما سوالات خود را با ما مطرح کنید.

منبع