طراحي حرفه اي وب سايت : طراحي وب سايت خود را به گروه فناوري اطلاعات ايران بسپاريد

طراحي وب سايت طراحي حرفه اي وب سايت بهينه سازي وب سايت

آموزش کار با تاریخچه مرورگر با استفاده از جاوا اسکرپت

مرورگر ها به صورت پیش فرض آدرس و حتی خود صفحاتی را که کاربر مشاهده می کند ذخیره می کنند. این آدرسها به ترتیبی که کاربر آنها را مشاهده کرده است در تاریخچه (history) مرورگر ثبت می شوند و دکمه های Back و Forward پنجره مرورگر بر اساس این تاریخچه کار می کنند. با استفاده از جاوا اسکرپت می توانیم به این تاریخچه دسترسی داشته باشیم و با کمک آن مسیر کاربران را هدایت کنیم.

ما برای کار با تاریخچه مرورگر در اینجا از دکمه های HTML استفاده می کنیم که با کمک رویداد onclick در هنگام کلیک کردن روی این دکمه ها دستورات مورد نظر ما اجرا خواهند شد. در اینجا می توانید کد HTML مربوط به ساخت این دکمه ها را مشاهده کنید (البته مقدار مربوط به شناسه onclick مربوط به دستورات جاوا اسکرپت است که بعداً وارد خواهد شد) :

<input type="button" value="متن روی دکمه" onclick="">

برای آشنایی بیشتر با رویداد های HTML می توانید از صفحه رویدادهای مربوط به صفحه کلید و ماوس در HTML استفاده کنید. (لینک در صفحه جدید باز خواهد شد)

دستورات مختلفی برای کار با تاریخچه مرورگر وجود دارد که همه آنها از شیء history استفاده می کنند. در ادامه می توانید تعدادی از این دستورات را که با بیشتر مرورگرها کار می کنند مشاهده کنید


history.back()

از این فرمان می توانید جهت هدایت کاربران به صفحه ای که قبل از صفحه کنونی در پنجره مرورگر مشاهد کرده اند استفاده کنید. این دستور دقیقاً مانند دکمه Back در پنجره مرورگر عمل می کند و در صورتی که صفحه کنونی اولین صفحه ای باشد که از زمان باز شدن پنجره نمایش داده شده باشد این دستور کاربردی ندارد. برای مشاهده یک نمونه از کاربرد این دستور می توانید لینک را کلیک کنید :

برای مشاهده کاربرد دستور ()history.back اینجا را کلیک کنید

در اینجا می توانید کئ مورد استفاده در مثال بالا را مشاهده کنید :

<input type="button" value="برای بازگشت به صفحه قبل اینجا را کلیک کنید" onclick="history.back()">

history.forward()

در صورتی که بازدید کننده قبلاً از دکمه Back در مرورگر خود استفاده کرده باشد یا با استفاده از دستور
()history.back به صفحه قبلی باز گشته باشد می توانیم از دستور ()history.forward برای هدایت بازدید کننده به صفحه ای که پس از صفحه کنونی باز کرده است استفاده کنیم. این دستور کاربردی مشابه دکمه Forward در پنجره مرورگر دارد و کاربرد آن عکس کاربرد ()history.back است.

دکمه زیر با استفاده از دستور ()history.forward شما را به صفحه ای که برای مثال مربوط به بازگشت به صفحه قبلی مشاهده کرده اید هدایت می کند :

می توانید کد استفاده شده در ساخت دکمه بالا را در اینجا مشاهده کنید :

<input type="button" value="نمایش صفحه بعدی" onclick="history.forward()">

history.go()

با استفاده از دستورهای ()history.back و ()history.forward فقط امکان این وجود دارد که کاربران را یک صفحه به عقب یا جلو هدایت کنیم. اگر بخواهیم بازدید کننده را به چندین صفحه عقب یا جلو هدایت کنیم باید از دستور ()history.go استفاده کنیم.


1- استفاده از مقداری مثبت برای ()history.go

اگر برای دستور ()history.go از مقداری مثبت استفاده شود کاربر به همان تعداد صفحه در تاریخچه مرورگر به جلو هدایت می شود. به کد زیر توجه کنید :

<input type="button" value="متن روی دکمه" onclick="history.go(3)">

کد بالا دکمه ای را می سازد که کلیک کردن بر روی آن همان کاری را انجام می دهد که سه بار فشار دادن دکمه Forward در پنجره مرورگر انجام می دهد.

در صورتی که دستور به صورت (1)history.go نوشته شود مانند دستور ()history.forward عمل می کند.


2- استفاده از مقدار صفر برای ()history.go

در صورتی که این دستور به صورت (0)history.go نوشته شود باعث باز بارگذاری مجدد همان صفحه خواهد شد. برای مثال به کد زیر و دکمه ساخته شده با آن توجه کنید :

<input type="button" value="بارگذاری مجدد صفحه" onclick="history.go(0)">

این هم دکمه ساخته شده :


3- استفاده از مقادیر منفی برای ()history.go

اگر بخواهیم کاربر را چند صفحه در تاریخچه مرورگر به عقب هدایت کنیم می توانیم برای دستور ()history.go از مقادیر منفی استفاده کنیم. برای مثال به کد زیر توجه کنید :

<input type="button" value="متن روی دکمه" onclick="history.go(-3)">

این کد دکمه ای را می سازد که وقتی کاربر آنرا کلیک کند به سومین صفحه ای که قبل از صفحه کنونی در پنجره مرورگر بازدید کرده است هداین می شود. کاربرد این دکمه در اینجا مشابه سه بار فشار دادن دکمه Back در پنجره مرورگر است.


history.length

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

نمایش تعداد صفحات موجود در تاریخچه مرورگر

در اینجا می توانید کد مورد استفاده در ساخت لینک بالا را مشاهده کنید :

<a href="javascript:alert(history.length)">
نمایش تعداد صفحات موجود در تاریخچه مرورگر
</a>

نظرات بازدید کنندگان
Wed, 24 Dec 2008 18:50:19 +0330 نویسنده : نم نمک
سلام
ممنون
خیلی خوب بود
موفق باشید
 
Tue, 25 Nov 2008 22:13:32 +0330 نویسنده : هوشمند
به به به
بسیار ..بسیار عالیست! واقعا مرسی
 
Tue, 25 Nov 2008 22:09:58 +0330 نویسنده : هوشمند
                    سلا م   خسته نباشید . فقط ی  کم وبتون بد قیافس!
 
Mon, 13 Oct 2008 23:58:02 +0330 نویسنده : امیر
عالی هست  بهتر هست در تایپ ایمیل اجازه تایپ فارسی داده نشه  .ممنونم مطالب روان و کاربردی هست امیدوارم  ادامه بدید و موفق باشید
 
Mon, 14 Jul 2008 17:27:03 +0430 نویسنده : رامين
ممنونم.واقعا خسته نباشيد.هميشه موفق باشين.
 
Sat, 21 Jun 2008 15:27:53 +0430 نویسنده : zahra
خيلي عالي بود واقعا مرسي و خسته نباشي
 
Wed, 02 Apr 2008 20:18:30 +0330 نویسنده : mohammad
به به به به
خيييييليي ممنونم
 
Sat, 29 Mar 2008 00:44:16 +0330 نویسنده : علی
فقط خسته نباشی