یکی از مشکلات اصلی برنامه های مبتنی بر جاوا اسکریپت شکستن دکمه Back است. اگر محتوا را به روز کنید روی را page با جاوا اسکریپت به جای بارگذاری جدید page از سرور، هیچ ورودی در تاریخچه مرورگر وجود ندارد. بنابراین وقتی کاربر روی Back کلیک می کند و انتظار دارد به حالت قبلی برگردد، در عوض در سایت قبلی قرار می گیرد.

کشیدن و رها کردن یک راه عالی برای کاربران برای تعامل با برنامه های کاربردی وب شما است. اما اگر کاربران پس از گذراندن زمان در حال جابجایی در برنامه شما، روی دکمه برگشت کلیک کنند و انتظار بازگشت به عقب را داشته باشند، مزایای استفاده از بین خواهد رفت. page و در عوض به صفحه شروع خود برگردید. در این مقاله “Hello! HTML5 & CSS3” نویسنده Rob Crowther به شما نشان می دهد که چگونه از API تاریخچه HTML5 برای جلوگیری از این سرنوشت استفاده کنید.

مشکل را می توان به سادگی نشان داد. تنها چیزی که نیاز دارید یک تابع است که به روز رسانی می کند page در پاسخ به فعالیت کاربر:

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

و یک نشانه گذاری کوچک:

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

در زندگی واقعی، وب شما page انجام کار پیچیده‌تری مانند واکشی محتوای جدید از سرور از طریق AJAX است، اما یک به‌روزرسانی ساده برای نشان دادن این مفهوم کافی است. بیایید ببینیم وقتی کاربر از آن بازدید می کند چه اتفاقی می افتد page.

1. کاربر شروع می کند روی خانه آنها page و تصمیم می گیرد از برنامه شگفت انگیز Click Me که در مورد آن شنیده اند بازدید کند.
2. آنها URL را تایپ می کنند یا پیوندی را از یک ایمیل دنبال می کنند تا به کلیک من برسند page.
3. پس از چند ثانیه تعامل لذت بخش، page وضعیت چندین بار تغییر کرده است
4. اما وقتی کاربر روی دکمه برگشت در مرورگر کلیک می کند، به جای بازگشت به قبلی، متوجه می شود page دولت، آنها به خانه خود می پرند page.

تابع doclick() می تواند به روز شود تا از API تاریخچه استفاده کند. هر بار که page به روز می شود و مکان.hash را نیز تنظیم می کند:

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

1. کاربر به کلیک من می رسد page مثل قبل
2. توجه داشته باشید که اکنون URL پس از هر کلیک به روز می شود – “#” در انتهای آن ظاهر می شود.
3. اکنون با کلیک بر روی دکمه برگشت، مکان به شماره 2 برمی گردد و این نشان می دهد page ایالت ها با موفقیت به تاریخ اضافه شده اند. اما توجه داشته باشید که کلیک کردن بر روی دکمه بازگشت به طور خودکار آن را بر نمی گرداند page به حالت قبلی خود

به روز رسانی page دولت

به روز رسانی تاریخچه تنها بخشی از مشکل است. شما همچنین باید بتوانید وضعیت را به روز کنید page برای مطابقت با وضعیت در تاریخ.

از آنجایی که شما هستید که تاریخ را مدیریت می کنید، مدیریت آن به شما بستگی دارد page دولت به منظور به روز رسانی خود page در پاسخ به تغییر location.hash، می توانید به رویداد 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 و تغییر هش است. رویداد hashchange است روی شی پنجره؛ وقتی اتفاق می افتد، بررسی می کنید که هش وجود دارد. در یک برنامه واقعی، شما همچنین می خواهید بررسی کنید که مقدار معتبری داشته باشد. در مرحله بعد، مقدار بارها را به عنوان عدد در هش تنظیم می کنید. در نهایت، سند را به روز می کنید تا درست منعکس شود page دولت بیایید به این کد جدید نگاه کنیم:

1. مانند قبل، هش در URL با کلیک کاربر به روز می شود.
2. اما اکنون، با کلیک بر روی دکمه Back، تابع onhashchange فعال می شود و page وضعیت برای مطابقت با URL بازنشانی می شود.

با استفاده از location.hash

ویژگی location.hash و رویداد hashchange مربوطه مفید هستند اگر بخواهید نماهای خاصی از برنامه خود را برچسب گذاری کنید و به کاربر اجازه دهید بین آنها حرکت کند. Google Mail از این روش استفاده می‌کند و به شما امکان می‌دهد بین صندوق ورودی خود (#inbox)، مخاطبین (#contacts) و سایر نماها پیمایش کنید—اگر حساب Gmail دارید، در حین پیمایش به صفحات مختلف و پیمایش به آدرس URL نگاه کنید. سپس روی برگشت کلیک کنید.

اما تا آنجا که اطلاعات وضعیت پیش می رود، هش فقط به شما امکان می دهد یک رشته را ذخیره کنید. شما می توانید یک شی پیچیده تر را رمزگذاری کنید، اما URL به سرعت طولانی و غیرقابل استفاده می شود و برای کاربران شما به یاد ماندنی نخواهد بود. اگر به اطلاعات پیچیده تری نیاز دارید که به عنوان بخشی از تاریخچه ذخیره می شود، یک رویکرد بهتر استفاده از هش به عنوان کلیدی برای بیرون کشیدن اطلاعات بیشتر وضعیت از برخی فروشگاه ها است. اگرچه می‌توانید رویکرد خود را برای این کار بکار ببرید، HTML5 یک API برای انجام آن از طریق متد history.pushState() و رویداد popstate ارائه کرده است. این روش ها به شما امکان می دهند یک شی پیچیده را ذخیره و بارگذاری مجدد کنید.

خلاصه

شما آموخته اید که مدیریت تاریخچه مرورگر به شما امکان می دهد دکمه بازگشت را به شیوه ای معقول تری در زمینه برنامه خود رفتار کنید، در حالی که API میکروداده به شما امکان دسترسی به اطلاعات معنایی ساخت یافته را می دهد. page مطالب

چه کاربردهایی برای این تکنیک در نظر می گیرید؟ آیا روش دیگری را توسعه داده اید؟ در نظرات به ما اطلاع دهید.

تصویر/تصویر کوچک ویژه، عکس به عقب برگرد از طریق Shutterstock.