JavaScript

JavaScript History pushState Method
دالة pushState مع كائن History في لغة جافا سكريبت

سوف تتعلم في هذا الدرس دالة pushState مع كائن history في لغة جافا سكريبت، وكيفة إضافة معلومات حول الصفحة الحالية داخل سجل المتصفح وإرجاعها وقت الحاجه.

التاريخ

22 نوفمبر 2023

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

819

المواضيع

24
الشروحات chevron_left JavaScript History pushState Method chevron_left JavaScript

JavaScript History pushState Method
دالة pushState مع كائن History في لغة جافا سكريبت

</> JavaScript History pushState Method
خاصية pushState مع كائن History في لغة جافا سكريبت

تستخدم دالة أو طريقة ()pushState لإضافة معلومات بداخل كائن state إلى محفوظات session جلسة المتصفح وتغيير عنوان URL الحالي وتغيير البيانات في الصفحة الحالية دون إعادة تحميل الصفحة.


لماذا تستخدم دالة ()pushState؟

  • تستخدم دالة ()pushState لتحديث عنوان URL وتغيير محتوى الصفحة دون إعادة تحميل صفحة كاملة.
  • تعمل على تحسين أداء تطبيقات الويب عن طريق تقليل عدد عمليات إعادة تحميل الصفحة الكاملة.
  • تخلق تجربة تنقل أكثر سلاسة للمستخدمين.
  • يمكن استخدامها لتنفيذ التوجيه من جانب العميل في تطبيق وتغيير أجزاء من الصفحة الحالية دون إعادة التحميل وهذة التقنية تسمي (SPA).
  • تستخدم دالة ()pushState لتحافظ على وظيفة زر الرجوع إلى الأمام والخلف في المتصفح.


معطيات دالة ()pushState:

  • state إجباري: هو عبارة عن كائن يمثل معلومات حول صفحة التطبيق الحالية، والتي يمكن أن يتم حفظ بداخلها أي نوع من كائنات جافا سكريبت.
  • title إجباري: عنوان state الجديدة ، والذي لا تستخدمه معظم المتصفحات يترك فارغاً.
  • url إختياري: سلسلة تمثل عنوان URL الجديد لصفحة التطبيق الحالية.
JavaScript pushState Syntax

طريقة كتابة pushState في لغة جافا سكريبت.

pushState(state, unused)
pushState(state, unused, url)

</> JavaScript History pushState
دالة pushState مع كائن History في لغة جافا سكريبت

تعد دالة pushState () جزءًا من واجهة برمجة تطبيقات سجل HTML5 في JavaScript والتي تتيح لك إضافة معلومات داخل كائن state  إلى سجل session جلسة المتصفح وتحديث عنوان URL الحالي دون إعادة تحميل الصفحة وتعديل محتوى الصفحة دون إعادة تحميل صفحة كاملة . يتيح ذلك تجربة مستخدم أكثر ديناميكية واستجابة ويمكن أن يحسن أداء تطبيقات الويب.

JavaScript History pushState

تستخدم history.state في لغة جافا سكريبت لحفظ معلومات حول الصفحة الحالية للتطبيق وإرجاعها وقت الحاجة.

<html>
<head>
</head>
<body>
<h1>JavaScript Window History State Value</h1>
<p id="data">State Value :</p>
<input type="button" value="Get Value" id="myVal">

<script>
let myVal = document.getElementById("myVal");
let data = document.getElementById('data');
const state = { 'pageID': 1, 'userID': 5 ,'pageTitle':'CloseTag'}
history.pushState(state,'')
myVal.addEventListener('click',()=>{
  data.innerText += history.state.pageTitle
})
</script>
</body>
</html>
هام
القيمة الافتراضية لخاصية history.state هي فارغة null. هذا يعني السجل الحالي لا يحتوي اي معلومات داخل كائن state ، فإن خاصية history.state سترجع خالية.

</> JavaScript History pushState URL
دالة pushState مع URL في لغة جافا سكريبت

تسمح دالة ()pushState  بتحديث عنوان URL الحالي لصفحة الويب دون إجراء إعادة تحميل صفحة كاملة. ويتم تمرير عنوان URL الجديد كمعامل ثالث لدالة ()pushState.


سيكون عنوان URL الجديد هذا مرئيًا في شريط عنوان المتصفح ويمكن استخدامه للتنقل للخلف وللأمام عبر محفوظات المتصفح.


يمكن استخدامه أيضًا لإنشاء توجيه من جانب العميل في تطبيق أحادي الصفحة (SPA) وهي تحميل أجزاء من الصفحة في عنوان URL جديد والإشارة إلى أن عنوان URL الجديد ليس عنوان URL حقيقيًا ، بل هو عنوان URL من جانب العميل لا يمكن الوصول إليه مباشرة.


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

JavaScript History pushState URL

سوف يتم إستبدال tutorial/javascript/javascript-history-pushstate-method/javascript-history-pushstate-url إلي tutorials في المتصفح.

<html>
<head>
</head>
<body>
<h1>JavaScript Window History State Value</h1>
<input type="button" value="Change URL" id="myInp">

<script>
let myInp = document.getElementById("myInp");
myInp.addEventListener('click',()=>{
  window.history.pushState({urlPath:'/tutorial/javascript/javascript-history-pushstate-method/javascript-history-pushstate-url'},"",'/tutorials')
})
</script>
</body>
</html>
هام
لاحظ عنوان URL داخل المثال سوف يتم تغييره إلي عنوان URL جديد دون تحميل الصفحة الحالية أو توجيهها إلي صفحة أخري.
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

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

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