طراحی دکمه back توسط جاوااسکریپت

توسط مجید احدی

یکی از مشکلات بسیار بزرگ در نرم افزارها و وب سایت هایی که با جاوااسکریپت طراحی شده اند, دکمه بازگشت به عقب یا Back Button میباشد. اگر شما اطلاعات داخل صفحه وب را توسط جاوااسکریپت بروزرسانی نمایید به جای اینکه برای آن یک صفحه جدید لود نمایید, هیچ ردپایی در حافظه مرورگر یا history ایجاد نخواهد شد. بنابراین زمانی که کاربر بر روی دکمه back کلیک نمود, انتظار دارد تا به صفحه قبلی که در حال مشاهده آن بود برود, درحالیکه با پایان وبسایت رسیده است.
سیستم drag & drop یکی از بهترین روش ها میباشد تا بتوانیم با کاربر وب سایت ارتباط برقرار نماییم. ولی قابلیت usability با این کار زیر سوال خواهد رفت. اما کاربر با این کار زمان خود را از دست خواهد داد و زمانی که کاربر بر روی دکمه back کلیک مینماید انتظار دارد که به صفحه قبل مراجعت نماید, ولی در نهایت چنین اتفاقی برای آن نخواهد افتاد.
در این مقاله قصد داریم تا توسط قابلیت جدید API واقع در زبان HTML5 این مشکل را برای شما حل نموده و در نهایت آموزش را به شما بدهیم.
توضیح دادن مشکل و بررسی آن بسیار آسان میباشد. تنها شما باید بدانید که کاربر زمانی که در خواست چنین اطلاعاتی را میکند, چه اتفاقی می افتد:

var times = 0;
function doclick() {
times++;
document.getElementById(‘message’).innerHTML =
‘Recorded ‘ + times + ‘ clicks’;
}

و کمی کد html

به یاد داشته باشید که در این سناریو صفحه وب سایت کاملا دگرگون خواهد شد و به مشکل برخورد خواهد نمود. مانند اینکه شما بخواهید اطلاعات را توسط AJAX از سرور تقاضا نمایید و در نهایت اطلاعات برای شما بروزرسانی خواهد شد. اجازه بدهید در ادامه همین مقاله به شما بگوییم که زمانی که کاربر درخواست یک صفحه وب سایت را نمود چه اتفاقی می افتد.
۱ – کاربر از صفحه اصلی وب سایت کار را آغاز خواهد نمود و بر روی لینکی تحت نام Click Me این روند را آغاز خواهد نمود.
۲ – سپس با تایپ نمودن آدرس وب سایت و یا کلیک بر روی لینکی که به ایمیلش رسیده است کار خود را آغاز مینماید
۳ – بعد از چند ثانیه که اگر کاربر خوش شانس باشد, صفحه برای چندین بار بروز رسانی خواهد شد
۴ – اما زمانی که کاربر بر روی دکمه back در مرورگر خود کلیک نمود به صفحه قبلی که همان صفحه خانه یا home page باشد می رود.
فانکشن doclick() میتواند به history API دسترسی پیدا نماید.

function doclick() {
times++;
location.hash = times;
document.getElementById(‘message’).innerHTML =
‘Recorded ‘ + times + ‘ clicks’;
}

مجید احدی

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

مطالب پیشنهادی

تأثیر RSS در بهینه سازی (سئو) سایت و رتبه آن در گوگل

23 آبان 1396

کدام بهتر است بهینه سازی (سئو) یا تبلیغات کلیکی

9 آبان 1396

روش هایی جهت حفظ رتبه در موتورهای جستجو

25 مهر 1396