❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

جافاسكربتسجل الصفحات

  • مفهوم سجل الصفحات
  • الكائن history
  • الإنتقال إلى الصفحة السابقة في السجل
  • الإنتقال إلى الصفحة التالية في السجل
  • الإنتقال إلى صفحة محددة في السجل
  • الحصول على عدد الصفحات الموجودة في السجل

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

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

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

الكائن history

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

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


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

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

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

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

مثال

<button onclick="history.back()">Go to previous page</button>
<button onclick="history.back()">Go to previous page</button>
جرب الكود

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

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

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

مثال

>
<button onclick="history.forward()">Go to next page</button>
<button onclick="history.forward()">Go to next page</button>
جرب الكود

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

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

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

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

مثال

<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>
<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>
جرب الكود

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

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

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

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

مثال

document.write('Total pages in browser history: ' + history.length);
document.write('Total pages in browser history: ' + history.length);
جرب الكود
الدرس التالي❯ ❮الدرس السابق