이전 페이지를로드하지 않는 이유와 URL을 변경하는 방법은 무엇입니까?

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

  •  25-08-2022
  •  | 
  •  

문제

가정 : 1.php 다음 2.php 다음 3.php를 클릭 한 다음 3.php를 클릭 한 다음 뒤로 누르지 만 2.ph로 이동하지 않습니다. 또한 URL도 영향을받지 않습니다. URL을 변경하고 지원을 지원하고 싶습니다. 여기서 SEO 친화적 일 수 있습니다. 여기 내 코드입니다.

<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>
도움이 되었습니까?

해결책

앵커에 고유 한 태그 이름이 있더라도 브라우저 기록을 탐색하고 특정 앵커로 돌아갈 때 해당 앵커의 on 클릭과 관련된 JavaScript를 실행하지 않습니다.

쇼 기능을 호출하려면 Window.onHashChange를 설정해야합니다. 변경 후 클릭을 클릭 할 필요조차 없습니다. 다음을 테스트했습니다.

    <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