Warum die vorherige Seite nicht laden und wie Sie URL ändern?

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

  •  25-08-2022
  •  | 
  •  

Frage

Nehmen wir an: Ich klicke auf 1.php dann 2.php dann 3.php dann drücken Sie zurück, aber es geht nicht zu 2.Php. Ich möchte die URL ändern und auch für den Rücken unterstützt, sodass es SEO -freundlich sein kann. Hier ist mein Code:

<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>
War es hilfreich?

Lösung

Auch wenn Ihre Anker eindeutige Tag -Namen haben, wenn Sie durch den Browser -Verlauf navigieren und zu diesem bestimmten Anker zurückkehren, wird das JavaScript nicht ausführen, das mit der Einklick dieses Ankers verbunden ist.

Sie müssen das Fenster festlegen. Sie brauchen nach der Änderung nicht einmal Onclick. Ich habe die Folge getestet:

    <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>
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top