انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 79
دورة جافا سكريبت

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

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

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
3
الأمثلة
3
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,182
محتوى الدرس
في هذا الدرس 3تصفّح المواضيع

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

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


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

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


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

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

JavaScript pushState Syntax

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

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

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

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

JavaScript History pushState

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

HTML 
<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>
جرّب بنفسك

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 
<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>
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…