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