menu

دکمه ی back مرورگر در Ajax

دکمه ی back مرورگر در Ajax

پنجشنبه 18 شهریور 1395

توی یکی از سایت هایی که مینوشتم، نیاز بود که سایت را به صورت Ajax بنویسم و تمام لینک های داخلی را Ajax کنم.

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

برای رفع این مشکل، تصمیم گرفتم از راه زیر برم.

اولین قدم تغییر آدرس ها بود. دکمه ی Back مرورگر، وابسته به History مرورگر هست و کاربر را به صفحه ی قبلی که توی History خودش ذخیره کرده هدایت میکنه. در حالی که از طرف دیگه، با وجود Ajax، با کلیک روی لینک ها محتوا عوض میشد، ولی Address bar مرورگر و History مرورگر تغییری نمیکرد

پس اولین قدم من این بود که با کلیک شدن روی یه لینک، در خلال اینکه محتوا به صورت Ajax تغییر میکرد، Address bar هم عوض بشه.

اینجا بود که داخل تابع Ajax خودم، دست به دامن یکی از متدهای HTML5 شدم. برای اینکار دو تا متد پیش روی خودم داشتم که وظیفه ی هر دوی اونها تغییر addressbar بدون ریلود شدن صفحه بود

اولیش replaceState بود و دومیش pushState که میتونید اینجا به طور مفصل درباره شون بخونید.

ولی کدوم متد را انتخاب کنم؟ هر دوشون address bar را تغییر میدن، ولی با یه تفاوت. اونم اینکه replaceState با وجود تغییر address bar، هیچ چیز توی History مرورگر ذخیره نمیکنه ولی pushState هم Address bar را تغییر میده و هم تغییر آدرس را توی History مرورگر ذخیره میکنه.

به هدفم یه قدم نزدیک تر شدم. pushState را انتخاب کردم و داخل متد Ajax خودم، یه Anonymous function کوچولو نوشتم که در هنگام Ajax، آدرس صفحه را به طوری که من میخوام تغییر بده که البته موضوع این دست نوشته، در رابطه با pushState و کارایی که من توی تابع Ajax خودم کردم نیست و اون خودش یه دست نوشته ی دیگه می طلبه

با اینکه این کارها را کردم ولی باز هم یه مشکل کوچولو وجود داشت. با زدن دکمه ی Back مرورگر، Address bar مرورگر عوض میشد، ولی از اونجایی که محتوای صفحه از طریق Ajax لود میشد، با وجود تغییر آدرس صفحه، محتوای صفحه عوض نمیشد

الان به یه متد دیگه نیاز بود که با زدن دکمه ی Back مرورگر، وقتی که Address bar مرورگر عوض شد، محتوا هم عوض بشه و محتوایی که مربوط به آدرس صفحه ای که توی address bar نمایش داده شده را لود کنه

اینجا بود که یکی دیگه از EventHandler های مخصوص HTML5 به کمک من اومد.

من برای اینکار از onpopstate استفاده کردم. همونطور که اینجا میتونید بخونید این تابع وقتی فراخوانده میشه که کاربر بین دوتا History فعال توی یه Tab از مرورگر، جا به جا بشه

و البته مزیت بزرگترش هم اینه که History های نوشته شده توسط تابع pushState باعث فراخوانی onpopstate نمیشه و یه جابه جایی بین دوتا History به حساب نمیاد

این دوخطی که من نوشتم یعنی چه؟!

یعنی اینکه این تابع، با زدن دکمه ای مثل Back یا Forward مرورگر یا فراخونده شدن تابع history.back() یا امثال اینها (که باعث میشه کاربر بین دوتا History مختلف جابه جا بشه) فراخوانی میشه و از طرف دیگه، هیچ تداخلی با تابع pushState که توی Ajax خودم ازش استفاده کردم نداره

پس الان تنها کافی بود با استفاده از این EventHandler و یه تابع کوچولو، کاری کنم که مشکل دکمه ی Back و Forward مرورگر من توی این سایت Ajax برطرف بشه

با یه کد مثل کد زیر

window.onpopstate = function(event) {
	window.location.replace(document.location);
};

امیدوارم از این تجربه ی من استفاده کرده باشید!

موفق و موید باشید

مهدی

منتشر شده در:

  • آواتار شهریار

    شهریار

    یکشنبه 28 شهریور 1395

    ارسال پاسخ

    جالب بود.... اگه این سایتهای ajax رو یطوری درست کنن که مثل سایتهای معمولی کار بده خیلی خوبه ولی مثل همین که گفتی کلید back یا مثلا رفتن به tab جدید کار نمیده(این دومی توی وبلاگ خودت هم کار نمیده ضمنا). خیلی هم قشنگ شده راستی طرح جدید بلاگت. یکم فقط توی گوشی هم بهتر کنی دیگه حله :)
  • آواتار شهریار

    مهدی علیخاصی

    یکشنبه 28 شهریور 1395

    Ajax فقط یه تکنیکه، و استفاده ازش نیازمند تسلط کافی روی JS هست (انگار من تسلط کافی نداشته ام! اصلا حواسم به new tab و اینا نبود) البته یه سری سیستم های آماده هم هست که میشه ازشون استفاده کرد. مزیتش اینه که این جور مشکلات دیگه پیش نمی آد و عیبش هم اینه که شخصی سازی نیست و اونجوری که بخوای شاید عمل نکنه. توی گوشی هم مشکل خاصی ندیدم! اگه مشکلی بود بگید تا برطرف کنم. سعی کردم که طراحیش همون المان های minimalist وساده بودن را داشته باشه...
  • آواتار حمید

    حمید

    چهارشنبه 28 مهر 1395

    ارسال پاسخ

    ممنون از مطلب جالبت فقط آخرشو متوجه نشدم . وقتی طرف دکمه Back رومیزنه ما باید بر حسب url یه آجاکس رو فراخونی کنیم . درست میگم ؟ ولی توی listener شما آجاکسی رو صدا نزدین و فقط این کد رو زدین window.location.replace(document.location); پس محتوای مربوط چه جوری لود میشه ؟
  • آواتار حمید

    مهدی علیخاصی

    چهارشنبه 28 مهر 1395

    حق با شماست. اساسا باید با زدن دکمه ی back؛ یه تابع Ajax فراخوانی بشه و محتوا توی اون Ajax لود بشه. ولی از اونجایی که متود ها و کدهای Ajax خیلی مختلفه؛ من ترجیح دادم که توی این پست به جای اینکه بیاد Ajax لود کنه؛ میاد و با تابع windows.location.replace به طور عادی صفحه را لود میکنه(نه به صورت Ajax) شما خیلی ساده میتونید به جای تابع windows.location.replace از تابع load یا ajax موجود در jquery یا هر تابع دیگه ای استفاده کنید.
ارسال نظر
خوانا نیست؟تعویض کد