مدیریت دکمه ی Back مرورگر توسط جاوا اسکریپت

یک بحث مهم در اپلیکیشن هایی که با جاوااسکریپت نوشته میشوند این است که دکمه ی Back یا "برگشت" داشته باشند، اگر در وب اپلیکیشن خود بجای باز کردن صفحه ی جدید وب، اطلاعات را در همان صفحه ی قبلی بارگزاری کنید، هیچ نتیجه ای در history مرورگر ذخیره نمیشود، بنابراین زمانی که کاربر روی دکمه ی back کلیک کند، بجای اینکه به مرحله ی قبلی برگردد، اشتباها به صفحه ی قبلی برمیگردد.

در این مقاله چندین راه برای حل این مشکل بیان میکنیم.
مشکلی که داریم به راحتی قابل نمایش است، نیاز به یک تابع داریم که با فعالیت کاربر واکنش نشان بدهد :

کد:

---

var times = 0;
function doclick() {
    times++;
    document.getElementById('message').innerHTML =
        'Recorded <b>' + times + '</b> clicks';
}

---

و همچنین کمی کد HTML مینویسیم :

کد:

---

<div onclick="doclick();">Click Me</div>
<div id="message">Recorded <b>0</b> clicks</div>

---

در پروژه های واقعی بحث کمی پیچیده تر است، برای مثال باید اطلاعات جدید را با Ajax دریافت کنید و سپس نمایش دهید اما در این مثال سعی کردیم به صورت ساده مشکلی که وجود دارد را نشان بدهیم، بیایید در یک سناریو شبیه سازی شده ببینم برای کاربر چه اتفاقی می افتد و کاربر چه احساسی پیدا میکند :

1. کاربر تصمیم میگیرد که از اپلیکیشن شما استفاده کند.
2. کاربر از طریق تایپ کردن آدرس شما در url یا کلیک کردن یک لینک درون ایمیل خود وارد صفحه ی شما میشود.
3. کاربر مدت کوتاهی از اپلیکیشن شما استفاده میکند و احساس خوبی پیدا میکند و از نشان دادن اطلاعات چندین مرحله سپری میشود.
4. کاربر تصمیم میگیرد یک مرحله به عقب برگردد، روی دکمه ی "برگشت" کلیک میکند و این لحظه فاجعه رخ میدهد، کاربر بجای اینکه یک مرحله به عقب برگردد کلا به صفحه ی قبلی برمیگردد.

و اکثر اوقات کاربر با چندتا ناسزا صفحه ی وب را به کلی میبندد و میرود.

تابع doclick با هر دفعه ای که اطلاعات آپدیت میشود، locaton.hash را ست میکند.

کد:

---

function doclick() {
    times++;
    location.hash = times;
    document.getElementById('message').innerHTML =
        'Recorded <b>' + times + '</b> clicks';
}

---

یک سناریوی دیگر را بررسی میکنیم، سناریو ای که میخواهیم به آن برسیم :

1. کاربر به Click Me میرسد.
2. قسمت url با هر کلیک کاربر آپدیت میشود، با هر کلیک "#" به انتهای url اضافه میشود.
3. با کلیک روی دکمه ی back کاربر برای مثال به #2 برمیگردد و از این طریق کاربر به مرحله ی قبلی برمیگردد بدون اینکه کاملا به صفحه ی قبلی برگردد.

آپدیت کردن وضعیت صفحه

آپدیت کردن history تنها بخشی از کار است، بخش باید وضعیت صفحه را هم همانند history آپدیت کنید تا باهم هماهنگ باشند. شما کسی هستید که history را مدیریت کردید بنابراین باید بتوانید وضعیت صفحه را هم مدیریت کنید، به همین منظور میتوانیم از رویداد hashchange استفاده کنیم.

کد:

---

function doclick() {
    times++;
    location.hash = times;
}
window.onhashchange = function() {     
    if (location.hash.length > 0) {       
        times = parseInt(location.hash.replace('#',''),10);   
    } else {
        times = 0;
    }
    document.getElementById('message').innerHTML =     
        'Recorded <b>' + times + '</b> clicks';
}

---

تابع doclick اکنون هم وظیفه ی آپدیت کردن times را دارد و هم وظیفه ی تغییر hash را دارد، رویداد hashchange در شی های صفحه ی وب وجود دارد، در اپلیکیشن های واقعی نیاز دارید که مقدار آن را با یک مقدار صحیح و درست پر کنید، بنابراین یک متغیر به نام times را به hash مان اضافه میکنیم، بنابراین میتوانیم صفحه ای که داریم را باتوجه به url آپدیت کنیم
در قطعه کد جدید :

1. URL با کلیک کاربر آپدیت میشود.
2. زمانی که کاربر روی دکمه ی "برگشت" کلیک کند، تابع onchashchange صدا زده میشود و وضعیت صفحه با URL هماهنگ میشود.

استفاده از LOCATION.HASH

خاصیت location.hash و رویداد hashchange برای زمانی که میخواهید بخش های مختلفی به برنامه ی خود اضافه کنید و کاربر باید بین آنها بگردد مفید هستند، گوگل میل از این خاصیت استفاده میکند تا شما بتوانید بین بخش های مختلف مانند inbox و contacts و قسمت های دیگر بگردید، اگر یک اکانت گوگل داشته باشید میتوانید این عملیات را مشاهده کنید، همچنین به URL و تغییراتی که در آن ایجاد میشود هنگامی که بین بخش های مختلف gmail میگردید نگاه کنید.
Hash میتواند یک رشته ذخیره کند، بنابراین میتوانید آن را پیچیده تر کنید اما دقت داشته باشید که URL هم به همان میزان دچار پیچیدگی خواهد شد و برای کاربرانتان غیرقابل فهم خواهد شد، اگر نیازدارید که اطلاعات پیچیده تری را ذخیره کنید میتوانید از API ای که در HTML5 وجود دارد استفاده کنید، در این API با استفاده متد history.pushState میتوانیم این کارها را انجام دهیم، با استفاده از این متد میتوانید شی های پیچیده تری را ذخیره و بازیابی کنیم.نتیجه گیری

در این مقاله یاد گرفتید که با استفاده از history مرورگر میتوانید رفتار دکمه ی "برگشت" را تغییر دهید، تعریف متغیر times را نیز فراموش نکنید.