لماذا لا تعود إلى الصفحة السابقة وكيفية تغيير عنوان URL؟

StackOverflow https://stackoverflow.com/questions/20353109

  •  25-08-2022
  •  | 
  •  

سؤال

لنفترض: أنا انقر فوق 1.php ثم 2.PhP ثم 3.PhP ثم اضغط على الخلف ولكنه لا ينتقل إلى 2. PHP أيضًا لا يتم تنفيذ عنوان URL. أرغب في تغيير عنوان URL والدعم للعودة أيضًا ، بحيث يمكن أن يكون صديقًا لكبار المسئولين الاقتصاديين هو رمزتي:

<pre>
<html>
<head>
    <script type="text/javascript">
        function show(addr) {
            a = new XMLHttpRequest();
            a.onreadystatechange = function() {
                if (a.readyState==4 && a.status==200) {
                    document.getElementById("content").innerHTML=a.responseText;
                }
            }
            a.open("GET",addr+".php",true); 
            a.send(); //
        }
    </script>
</head>
<body>
    <a href="#" onClick="show('1')">Load 1.php into content</a>
    <a href="#" onClick="show('2')">Load 2.php into content</a>
    <a href="#" onClick="show('3')">Load 3.php into content</a>
    <a href="#" onClick="show('4')">Load 4.php into content</a>

    <!-- Load content here-->
    <div id="content"></div>        
</body>
</html>
</pre>
هل كانت مفيدة؟

المحلول

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

تحتاج إلى تعيين Window.onhashchange للاتصال بوظيفة العرض الخاصة بك. أنت لا تحتاج حتى على onclick بعد التغيير. لقد اختبرت المتابعة:

    <pre>
    <html>
    <head>
        <script type="text/javascript">
            window.onhashchange=window.onload=function(){
                window.setTimeout(doHashCheck, 10);
            }

            var doHashCheck = (function(global) {
                return function() {
                    var addr = window.location.hash.replace(/^#/,'');
                    show(addr);
                }
            })(this);
            function show(addr)
            {
                a=new XMLHttpRequest();
                a.onreadystatechange=function()
                {
                    if (a.readyState==4 && a.status==200)
                    {
                        document.getElementById("content").innerHTML=a.responseText;
                    }
                }
                a.open("GET",addr+".php",true);
                a.send(); //
            }




        </script>

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache" />
    <META HTTP-EQUIV="Expires" CONTENT="-1" />
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, no-store, must-revalidate" />

    </head>
    <a href="#1">Load 1.php into content</a>
    <a href="#2">Load 2.php into content</a>
    <a href="#3">Load 3.php into content</a>
    <a href="#4">Load 4.php into content</a>

    <!-- Load content here-->
    <div id="content"></div>
    </body>
    </html>
    </pre>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top