JavaScript Window History Object
كائن Window History في لغة جافا سكريبت
سوف تتعلم في هذا الدرس ،على كائن Window History في لغة جافا سكريبت، والذي يسمح بمعالجة الصفحات التي تمت زيارتها. ,وسوف تتعلم كيفية استخدام خصائص الكائن وطرقه للتنقل عبر سجل المحفوظات ، بالإضافة إلى كيفية اكتشاف التغييرات في السجل.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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، يمكنك إنشاء تجارب ويب أكثر تفاعلية وجاذبية للمستخدمين. على سبيل المثال ، يمكنك استخدامه لإنشاء زر "رجوع" الذي يسمح للمستخدمين بالتنقل بسهولة إلى الصفحة السابقة ، أو لإنشاء سجل للصفحات التي تمت زيارتها والتي يمكن للمستخدمين الوصول إليها من القائمة المنسدلة بدلاً من المتصفح.
</>
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 في لغة جافا سكريبت
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>
هام
</>
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>
هام
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
