JS / سجل الصفحات

الناشر :كودا فوكس -

سجل الصفحات

مفهوم سجل الصفحات

عند فتح أي تبويب ( Tab ) جديد في المتصفح فأنه يقوم ببناء سجل ( History ) خاص له ليحفظ فيه ترتيب الصفحات التي يقوم المستخدم بالدخول إليها. لهذا السبب يمكنه العودة إلى الصفحات السابقة أو التالية بنفس الترتيب الذي شاهدها فيه.

JS - سجل الصفحات


جافاسكربت تتيح لك التعامل مع السجل الخاص بالمتصفح، مما يعني أنه يمكن جعل المستخدم ينتقل إلى الصفحة السابقة أو التالية الموجودة في السجل، معرفة عدد الصفحات المخزنة فيه، أو الذهاب لصفحة محددة من الصفحات الموجودة فيه.

الكائن history

الكائن history أو window.history يحتوي على دوال يمكنك استخدامها للإنتقال إلى أي صفحة موجودة في السجل الذي يتم بناؤه لحظة قيام المستخدم بفتح تبويب في المتصفح.

في حال دخل المستخدم بشكل مباشر إلى الصفحة و لم يكن قد دخل إلى أي صفحة أخرى بعد فإن زر الصفحة السابقة و زر الصفحة التالية في المتصفح لا يعملان و كذلك دوال الكائن history التي يمكن استخدامها للإنتقال من صفحة إلى أخرى.


عند تجربة أي مثال في هذا الدرس سيتم فتح محرر الويب مكان الصفحة الحالية و ليس في تبويب ( Tab ) جديد كما جرت العادة و ذلك حتى تستطيع تجربة التنقل بين الصفحات التي سبق و شاهدتها في التبويب الحالي في المتصفح. ستفهم هذا الأمر أكثر عند تجربة الأمثلة.

الإنتقال إلى الصفحة السابقة في السجل

للعودة إلى الصفحة السابقة الموجودة في سجل المتصفح يمكنك استخدام الدالة history.back() و هي ستقوم بفتح الصفحة السابقة مكان الصفحة الحالية.

في المثال التالي قمنا بإضافة زر يتيح للمستخدم العودة إلى الصفحة السابقة التي كان قد شاهدها.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Go Back To Previous Page</h1>
    <button onclick="history.back()">Go to previous page</button>
</body>
</html>

<!-- في حال كان يوجد صفحة سابقة في سجل المتصفح
 فإنه عند النقر على الزر سيتم الرجوع إليها -->

الإنتقال إلى الصفحة التالية في السجل

للعودة إلى الصفحة التالية الموجودة في سجل المتصفح يمكنك استخدام الدالة history.forward() و هي ستقوم بفتح الصفحة التالية مكان الصفحة الحالية.

في المثال التالي قمنا بإضافة زر يتيح للمستخدم العودة إلى الصفحة التالية التي كان قد شاهدها.

مثال

>
خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Go Back To Next Page</h1>
    <button onclick="history.forward()">Go to next page</button>
	<br>
    <p>To make the button works move to the
        <a href="/" target="_top">HOME PAGE</a>
        temporary and came back.</p>
</body>
</html>

<!-- أنقر على الرابط الموجود تحت الزر حتى تنتقل لصفحة أخرى
 ثم قم بالعودة مجدداً لهذه الصفحة و هكذا سيصبح زر الرجوع
 للصفحة التالية يعيدك إليها عندما تقوم بالنقر عليه -->

الإنتقال إلى صفحة محددة في السجل

للعودة إلى صفحة موجودة في سجل المتصفح يمكنك استخدام الدالة history.go() و تمرير رقم يشير لموقع الصفحة التي تريد العودة لها.

  • في حال كان رقم الصفحة أصغر من 0 مثل 1- فهذا يعني أنك تريد العودة للصفحة السابقة.
  • في حال كان رقم الصفحة أكبر من 0 مثل 1+ فهذا يعني أنك تريد العودة للصفحة التالية.
  • في حال كان رقم الصفحة يساوي من 0 فهذا يعني أنك تريد تحديث الصفحة نفسها.

في المثال التالي قمنا بإضافة أزرار تتيح للمستخدم الإنتقال بشكل مباشر إلى صفحات موجودة في السجل.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Go To A Specific Page</h1>
    <button onclick="history.go(-2)">Go back 2 pages</button>
    <button onclick="history.go(-1)">Go back 1 page</button>
    <button onclick="history.go(0)">Reload the page</button>
    <button onclick="history.go(1)">Go forward 1 page</button>
    <button onclick="history.go(2)">Go forward 2 pages</button>
</body>
</html>

<!-- الزر الثاني و الثالث فقط سيعملون عند النقر عليهم
 الأزرار الأخرى لن تعمل لأنه لا يوجد صفحات أخرى في سجل المتصفح -->

الأمر history.go(0) لا يعمل كما هو متوقع في محرر الويب بسبب أن محرر الويب يحتوي على عدة صفحات داخلية <iframe>.

الحصول على عدد الصفحات الموجودة في السجل

لمعرفة عدد الصفحات التي شاهدها المستخدم بعد قيامه بفتح المتصفح يمكنك استخدام الخاصية history.length.

في المثال التالي قمنا بعرض عدد الصفحات الموجودة في السجل.

مثال

خد الكواد نسخ واضغط هنا جرب الكود 📋
<!DOCTYPE html>
<html>
<body>
    <h1>JavaScript Get History Length</h1>
	
	<script>
		// هنا قمنا بطباعة عدد الصفحات الموجودة في سجل المتصفح
		document.write('Total pages in browser history: ' + history.length);
	</script>
</body>
</html>
التسميات

إرسال تعليق

أحدث أقدم

نموذج الاتصال