الآن فهمت ما تريده بالضبط،
لاحظ المثال السابق نفسه مع التعدي وقم بتجريبه على المتصفح :
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<header>
<!-- أضفنا براميتر جديد لوظيفة تغيير الصفحة -->
<li><a onclick="getPage(1 , true)">الصفحة الاولى</a></li>
<li><a onclick="getPage(2 , true)">الصفحة الثانية</a></li>
</header>
<div id="jsContent"></div>
<script>
const htmlContainer = document.getElementById("jsContent");
function page1() {
const section = document.createElement("section");
section.innerHTML = `
<h1> الصفحة الاولى </h1>
<p> محتوى الصفحةالاولى </p>
`;
htmlContainer.append(section);
}
function page2() {
const section = document.createElement("section");
section.innerHTML = `
<h1> الصفحة الثانية </h1>
<p> محتوى الصفحةالثانية </p>
`;
htmlContainer.append(section);
}
function clearPages() {
htmlContainer.innerHTML = "";
}
function getPage(pageNumber, setHistory) {
clearPages();
if (pageNumber === 1) {
page1();
// وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط
//إختيارية "?page=1" القيمة
if (setHistory) history.pushState({ page: 1 }, `page 1`, "?page=1");
} else {
page2();
// وضعنا الشرط التالي كي لا يحدث التغير في السجل إلا عندما نستخدم الرابط
//إختيارية "?page=2" القيمة
if (setHistory) history.pushState({ page: 2 }, `page 2`, "?page=2");
}
}
// هذه حدث مبني في جافاسكريبت ينطلق عند تغيير السجل
window.onpopstate = function (event) {
console.log(event.state); // { page: 2 } or { page: 2 }
const page = event.state.page;
// وضعنا الشرط التالي لكي يستطيع المستخدم الرجوع للصفحات التي دخلها قبل دخول الموقع الخاص بنا
// حيث انه من دون هذا الشرط سيحدث خطأ عندما يحاول التراجع ليخرج من الموقع الخاص بنا
if (page) getPage(page, false);
};
</script>
</body>
</html>
يمكنك الاطلاع اكثر عن الوظائف المستخدمة History API و pushState و onpopstate event.
وفي حال كان هنالك المزيد من الاسئلة سأقوم بمساعدتك بالتأكيد.