موقع ويب بصفحه واحده

علي الكاسر · 7 أغسطس 2022

عندما اقوم بعمل موقع ويب بصفحه واخده باستخدام اكواد جافا سكربت الخالصه، كيف يمكن استخدام زر الرجوع من غير مغادرة الصفحة لانها صفحه واحده ويتما تحميلعا لمره واحده ثم يتم التنقل في الموقع وجلب باقي الصفحات من خلال جافا سكربت

عمر قره محمد · 7 أغسطس 2022

هل يمكنك ايضاح سؤالك بشكل افضل،

اعتقد انه يمكنك تنفيذ الامر باستخدام react فهو يقدم هذه الخدمة وأكثر.

علي الكاسر · 7 أغسطس 2022

بتاريخ 3 ساعات قال عمر قره محمد:

هل يمكنك ايضاح سؤالك بشكل افضل،

اعتقد انه يمكنك تنفيذ الامر باستخدام react فهو يقدم هذه الخدمة وأكثر.

حسنا انا اريد ان افعل هذا بدون رياكت

عمر قره محمد · 7 أغسطس 2022

بتاريخ 6 دقائق مضت قال علي الكاسر:

حسنا انا اريد ان افعل هذا بدون رياكت

ذلك يتغير بحسب الطريقة التي تقوم بعرض الصفحة بها، أي ان الامر يعتمد على الكود الخاص بك،

فعلى سبيل المثال يمكنك عمل وظيفة تقوم بعرض الصفحة الاولى و وظيفة تقوم بعرض الصفحة الثانية ..إلخ.

و وظيفة تقوم بحذف الصفحة المعروضة.

وعندما تريد الانتقال من صفحة لصفحة تقوم بإستدعاء وظيفة الحذف ثم الوظيفة الخاصة بعرض الصفحة المطلوبة.

لاحظ المثال المختصر التالي :

<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 href="#page1" onclick="getPage(1)">الصفحة الاولى</a></li>
      <li><a href="#page1" onclick="getPage(2)">الصفحة الثانية</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) {
        clearPages();
        if (pageNumber === 1) {
          page1();
        } else {
          page2();
        }
      }
    </script>
  </body>
</html>

علي الكاسر · 7 أغسطس 2022

بتاريخ 3 ساعات قال عمر قره محمد:

ذلك يتغير بحسب الطريقة التي تقوم بعرض الصفحة بها، أي ان الامر يعتمد على الكود الخاص بك،

فعلى سبيل المثال يمكنك عمل وظيفة تقوم بعرض الصفحة الاولى و وظيفة تقوم بعرض الصفحة الثانية ..إلخ.

و وظيفة تقوم بحذف الصفحة المعروضة.

وعندما تريد الانتقال من صفحة لصفحة تقوم بإستدعاء وظيفة الحذف ثم الوظيفة الخاصة بعرض الصفحة المطلوبة.

اخي انا استطيع فعل هذا، المشكلة وسؤالي هي كيف استخدم زر الرجوع في العوده مثلا

كنت فاتح محتوى الصفحه واحد ثم انتقلت للصفحه اثنين واردت الرجوع للصفحه واحد هنا اضغط زر الرجوع العادي الموجود في اي هاتف او كمبيوتر، بس لما اضغط زر الرجوع لا يرجع للصفحه واحد.

انا استطيع عمل ازرار رجوع تظهر في الشاشه ولكن غالبا ما يستخدم المستخدم زر الرجوع العادي في جهازه.

عمر قره محمد · 7 أغسطس 2022

بتاريخ 2 ساعات قال علي الكاسر:

اخي انا استطيع فعل هذا، المشكلة وسؤالي هي كيف استخدم زر الرجوع في العوده مثلا

كنت فاتح محتوى الصفحه واحد ثم انتقلت للصفحه اثنين واردت الرجوع للصفحه واحد هنا اضغط زر الرجوع العادي الموجود في اي هاتف او كمبيوتر، بس لما اضغط زر الرجوع لا يرجع للصفحه واحد.

انا استطيع عمل ازرار رجوع تظهر في الشاشه ولكن غالبا ما يستخدم المستخدم زر الرجوع العادي في جهازه.

الآن فهمت ما تريده بالضبط،

لاحظ المثال السابق نفسه مع التعدي وقم بتجريبه على المتصفح :

<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.

وفي حال كان هنالك المزيد من الاسئلة سأقوم بمساعدتك بالتأكيد.

علي الكاسر · 8 أغسطس 2022

بتاريخ 10 ساعات قال عمر قره محمد:

الآن فهمت ما تريده بالضبط،

لاحظ المثال السابق نفسه مع التعدي وقم بتجريبه على المتصفح :

شكرا لك اخي هذا الجواب الذي اريده بالضبط، وقد اشتغل بالشكل المطلوب، ساحاول فهمه وتعديله واستخدامه في الموقع الذي اعمل عليه

شكرا جزيلا ووفقك الله في عملك

موقع ويب بصفحه واحده

السؤال

علي الكاسر

6 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

علي الكاسر

عمر قره محمد

علي الكاسر

عمر قره محمد

علي الكاسر

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية