window.history 객체의 적용을 요약합니다.

이 기사에서는 주로 window.history 객체와 관련된 문제를 소개하는 javascript에 대한 관련 지식을 제공합니다. History 객체에는 사용자가 (브라우저 창에서) 방문한 URL이 포함되어 있습니다. 그것이 모두에게 도움이 되기를 바랍니다.

【관련 권장사항: javascript 비디오 튜토리얼, web front-end】

History 객체에는 사용자가 (브라우저 창에서) 방문한 URL이 포함되어 있습니다.

History 개체는 window 개체의 일부이며 window.history 속성을 통해 액세스할 수 있습니다.

참고: History 개체에 대한 공개 표준은 없지만 모든 브라우저에서 지원됩니다.

설명: 페이지 스택 개체

설명: 스택 영역의 특성은 (후입 선출)이며, 힙 영역의 특성은 (선입 선출)

내용:

• (1)window.history.back() 스택의 이전 페이지로 이동
• (2)window.history.forward() 스택의 다음 페이지로 이동
• (3)window.history .go(num) 스택으로 이동
• (4)window.history.length에 지정된 페이지 스택의 페이지 수

참고:

• a에 제공된 방법을 통해 페이지를 이동합니다. window.history 개체는 스택으로 이동하지 않습니다. 에 새 페이지를 추가합니다.
• window.location.href 또는 태그를 통해 점프하면 스택에 새 페이지가 추가됩니다.
• b. 스택 영역 기능(후입 선출)은 마지막에 들어온 내용이 스택에서 먼저 제거된다는 의미일 뿐만 아니라 스택의 내용이 지정된 위치에 추가되기를 원한다는 의미이기도 합니다. , 이전 콘텐츠를 먼저 디스택해야 합니다.

     <h2>第一页</h2>
    <button>去到第二页</button>
    <hr>
    <h3>window.history对象提供的方法</h3>
    <button>window.history.back()</button>
    <button>window.history.forward()</button>
    <button>window.history.go(2)</button>
    <button>window.history.length</button>



<script>
        var nextBut = document.querySelector(&#39;.next&#39;);
        var backBut = document.querySelector(&#39;.back&#39;);
        var forwardBut = document.querySelector(&#39;.forward&#39;);
        var goBut = document.querySelector(&#39;.go&#39;);
        var lengthBut = document.querySelector(&#39;.length&#39;);

        nextBut.onclick = function() {
            document.location.href = &#39;11第2个页面.html&#39;;
        }
        backBut.onclick = function() {
            window.history.back()
        }
        forwardBut.onclick = function() {
            window.history.forward()
        }
        goBut.onclick = function() {
            window.history.go(2)
        }
        lengthBut.onclick = function() {
            console.log(window.history.length)
        }
</script>

"두 번째 페이지로 이동" 버튼을 클릭한 경우:

두 번째 페이지로 이동:

<h2>第二个页面</h2>
<button>去到第三页</button>
<hr>
<h3>window.history对象提供的方法</h3>
<button>window.history.back()</button>
<button>window.history.forward()</button>
<button>window.history.go(2)</button>
<button>window.history.length</button>

 <script>
        var nextBut = document.querySelector(&#39;.next&#39;);
        var backBut = document.querySelector(&#39;.back&#39;);
        var forwardBut = document.querySelector(&#39;.forward&#39;);
        var goBut = document.querySelector(&#39;.go&#39;);
        var lengthBut = document.querySelector(&#39;.length&#39;);

        nextBut.onclick = function() {
            document.location.href = &#39;11第3个页面.html&#39;;
        }
        backBut.onclick = function() {
            window.history.back()
        }
        forwardBut.onclick = function() {
            window.history.forward()
        }
        goBut.onclick = function() {
            window.history.go(2)
        }
        lengthBut.onclick = function() {
            console.log(window.history.length)
        }
</script>

"세 번째 페이지로 이동" 버튼을 클릭한 경우:

물론, 관심이 있으신 분들은 아래 버튼을 클릭하셔서 직접 체험해 보실 수도 있습니다!

세 번째 페이지:

<h2>第三个页面</h2>
<button>去到第四页</button>
<hr>
<h3>window.history对象提供的方法</h3>
<button>window.history.back()</button>
<button>window.history.forward()</button>
<button>window.history.go(2)</button>
<button>window.history.length</button>

 <script>
        var nextBut = document.querySelector(&#39;.next&#39;);
        var backBut = document.querySelector(&#39;.back&#39;);
        var forwardBut = document.querySelector(&#39;.forward&#39;);
        var goBut = document.querySelector(&#39;.go&#39;);
        var lengthBut = document.querySelector(&#39;.length&#39;);

        nextBut.onclick = function() {
            document.location.href = &#39;11第4个页面.html&#39;;
        }
        backBut.onclick = function() {
            window.history.back()
        }
        forwardBut.onclick = function() {
            window.history.forward()
        }
        goBut.onclick = function() {
            window.history.go(2)
        }
        lengthBut.onclick = function() {
            console.log(window.history.length)
        }
</script>

렌더링은 다음과 같습니다: "네 번째 페이지로 이동" 버튼을 클릭할 때:

네 번째 페이지:

     <h2>第四个页面</h2>
    <button>回到首页</button>
    <hr>
    <h3>window.history对象提供的方法</h3>
    <button>window.history.back()</button>
    <button>window.history.forward()</button>
    <button>window.history.go(2)</button>
    <button>window.history.length</button>

<script>
        var nextBut = document.querySelector(&#39;.next&#39;);
        var backBut = document.querySelector(&#39;.back&#39;);
        var forwardBut = document.querySelector(&#39;.forward&#39;);
        var goBut = document.querySelector(&#39;.go&#39;);
        var lengthBut = document.querySelector(&#39;.length&#39;);

        nextBut.onclick = function() {
            document.location.href = &#39;11window.history对象.html&#39;;
        }
        backBut.onclick = function() {
            window.history.back()
        }
        forwardBut.onclick = function() {
            window.history.forward()
        }
        goBut.onclick = function() {
            window.history.go(2)
        }
        lengthBut.onclick = function() {
            console.log(window.history.length)
        }
</script>

렌더링은 다음과 같습니다: "이동" 버튼을 클릭할 때 페이지로 돌아가기" 버튼 홈 페이지 "버튼:

[관련 권장사항: javascript 비디오 튜토리얼, 웹 프론트엔드]

위 내용은 window.history 객체의 적용을 요약합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!