JavaScript

JavaScript Window History Object
كائن Window History في لغة جافا سكريبت

سوف تتعلم في هذا الدرس ،على كائن Window History في لغة جافا سكريبت، والذي يسمح بمعالجة الصفحات التي تمت زيارتها. ,وسوف تتعلم كيفية استخدام خصائص الكائن وطرقه للتنقل عبر سجل المحفوظات ، بالإضافة إلى كيفية اكتشاف التغييرات في السجل.

التاريخ

27 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1421

المواضيع

24
الشروحات chevron_left JavaScript Window History Object chevron_left JavaScript

JavaScript Window History Object
كائن Window History في لغة جافا سكريبت

</> What is the Window History object؟
ما هو كائن Window History في لغة جافا سكريبت؟

يسمح كائن Window History في لغة جافا سكريبت للمطورين بمعالجة محفوظات أو سجل الصفحات التي تمت زيارتها من موقع الويب من قبل المستخدمين. باستخدام هذا الكائن ، يمكنك التنقل عبر المحفوظات واكتشاف التغييرات في السجل والتنقل بين الصفحات للأمام أو للخلف.


لماذا يتم استخدام كائن Window History في لغة جافا سكريبت؟

باستخدام كائن Window History، يمكنك إنشاء تجارب ويب أكثر تفاعلية وجاذبية للمستخدمين. على سبيل المثال ، يمكنك استخدامه لإنشاء زر "رجوع" الذي يسمح للمستخدمين بالتنقل بسهولة إلى الصفحة السابقة ، أو لإنشاء سجل للصفحات التي تمت زيارتها والتي يمكن للمستخدمين الوصول إليها من القائمة المنسدلة بدلاً من المتصفح.

يمكن استخدام كائن window.history بدون كائن window في لغة جافا سكريبت.

</> Properties of the Window History object in JavaScript
خصائص كائن Window History في لغة جافا سكريبت

يحتوي كائن Window History في لغة جافا سكريبت على خاصيتين رئيسيتين تسمحان لك بالوصول إلى معلومات حول سجل الصفحات لموقع ويب وهم:

  • length تمثل هذه الخاصية عدد العناصر عناوين URL في سجل قائمة المحفوظات للنافذة الحالية. إنها خاصية للقراءة فقط ، مما يعني أنه يمكن استخدامها لاسترداد قيمة بعدد العناصر فقط، لكن لا يمكن تعيين قيمة جديدة لها.
  • state تحتوي هذه الخاصية على كائن الحالة المرتبط بإدخال السجل الحالي. يمكن استخدام هذا الكائن لتخزين البيانات الخاصة بالتطبيق ، مثل موضع التمرير الحالي أو بيانات النموذج ، والتي يمكن استخدامها لاستعادة حالة التطبيق عندما ينتقل المستخدم مرة أخرى إلى الصفحة أو لحفظ معلومات أخري مثل متغيرات أو كائنات أو مصفوفات واستعراضها في وقت لاحق.
window history length in javascript

تمثل هذه الخاصية عدد العناصر عناوين URL في سجل قائمة المحفوظات للنافذة الحالية في لغة جافا سكريبت.

<!DOCTYPE html>
<html>
<body>
<h1>window history length in javascript</h1>
<p id="info">URL will display here<p>
<script>
let info = document.getElementById('info');
info.innerHTML = "History length is <br/>" + history.length;
</script>
</body>
</html>
Window History state in JavaScript

تحتوي هذه الخاصية على كائن الحالة المرتبط بإدخال السجل الحالي في لغة جافا سكريبت.

<!DOCTYPE html>
<html>
<body>
<h1>Window History state in JavaScript</h1>
<p id="info">URL will display here<p>
<script>
let info = document.getElementById('info');
info.innerHTML = "History state is <br/>" + history.state;
</script>
</body>
</html>

</> Methods of the Window History object in JavaScript
دوال كائن Window History في لغة جافا سكريبت

  • خاصية أو دالة ()back تستخدم في إرجاع المستخدم خطوة واحدة في محفوظات أو سجل المستعرض. تعادل هذه الطريقة قيام المستخدم بالنقر فوق زر الرجوع في شريط عنوان المتصفح.


  • خاصية أو دالة ()forward تستخدم في التتنقل بالمستخدم إلى الأمام خطوة واحدة في محفوظات المتصفح. تعادل هذه الطريقة قيام المستخدم بالنقر فوق الزر إلى الأمام في شريط عنوان المتصفح.


  • خاصية أو دالة ()go تستخدم في توجيه المستخدم إلى خطوة محددة في محفوظات المتصفح. تأخذ الطريقة عددًا صحيحًا، والتي تمثل عدد الخطوات للرجوع إلى الخلف أو الأمام في السجل. الرقم الموجب يأخذ المستخدم إلى الأمام والرقم السالب يعيد المستخدم.

</> Window History Forward in JavaScript
خاصية Forward مع كائن window history في لغة جافا سكريبت

خاصية أو دالة ()forward تستخدم في التتنقل بالمستخدم إلى الأمام خطوة واحدة في محفوظات المتصفح. تعادل هذه الطريقة قيام المستخدم بالنقر فوق الزر إلى الأمام في شريط عنوان المتصفح.
Window History Forward in JavaScript

تقدم المستخدم خطوة واحدة للأمام في محفوظات في لغة جافا سكريبت.

<html>
<head>
</head>
<body>
<h1>Window History Forward in JavaScript</h1>
<input type="button" value="Forward" id="forward">

<script>
let forward = document.getElementById('forward');
forward.addeventlistener('click',()=>{
  window.history.forward()
})
</script>
</body>
</html>
هام
النقر على زر "Forward" لن ينتج عنه أي إجراء أو فعل، والسبب هو عدم وجود صفحة تالية في قائمة المحفوظات لاحظ زر المتصفح الحالي انه مُعطل.

</> Window History Back in JavaScript
خاصية Back مع كائن window history في لغة جافا سكريبت

خاصية أو دالة ()back تستخدم في إرجاع المستخدم خطوة واحدة في محفوظات أو سجل المستعرض. تعادل هذه الطريقة قيام المستخدم بالنقر فوق زر الرجوع في شريط عنوان المتصفح.

Window History Back in JavaScript

رجوع المستخدم خطوة واحدة في محفوظات في لغة جافا سكريبت.

<html>
<head>
</head>
<body>
<h1>Window History Back in JavaScript</h1>
<input type="button" value="Back" id="back">

<script>
let back = document.getElementById('back');
forward.addeventlistener('click',()=>{
  window.history.back()
})
</script>
</body>
</html>
هام
النقر على زر "Back" لن ينتج عنه أي إجراء أو فعل، والسبب هو عدم وجود صفحة سابقة في قائمة المحفوظات لاحظ زر المتصفح للرجوع للخلف انه مُعطل.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.