티스토리 뷰

(기초)그래서 뭘 배운거야?/JavaScript

JS-126-BOM(history) : 방문했던 페이지 이동하기

Soheny.P 2021. 10. 10. 16:46
728x90
<!DOCTYPE html>
<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>
    <!--
        * history : 브라우저 내 기록에 접근 했던 웹페이지 기록 담고 있으며 해당 페이지로 이동 가능

         * Push State : 페이지가 이동된 것처럼 보이게 만들어주는 화면 전환 가능
                            뒤로, 앞으로 가기 눌러도 DIV의 state는 바뀌지 않음! 
            pushState(data, title, url)

        * Replace State : pushState있는 상태에서 replaceState로 바꿔버리면 그 pushState가 사라짐 (뒤로가기 버튼을 통해 확인 가능)
    -->
    <section>
        <h2>Push State</h2>
        <button id="push-state1">Push State1</button>
        <button id="push-state2">Push State2</button>
        <button id="push-state3">Push State3</button>
    </section>

    <section>
        <h2>Replace State</h2>
        <button id="replace-state">Replace</button>
    </section>

    <section>
        <h2>History State</h2>
        <div id="state"></div>
    </section>

    <script>
        document.getElementById("replace-state").addEventListener("click",function(){
            history.replaceState({data : 'ReplaceData'}, '', '/replace-state1');
            document.getElementById("state").innerText = history.state.data;
        });

        document.getElementById("push-state1").addEventListener("click",function(){
            history.pushState({data : 'data1'}, '', '/push-state1');
            document.getElementById("state").innerText = history.state.data;
        });
        document.getElementById("push-state2").addEventListener("click",function(){
            history.pushState({data : 'data2'}, '', '/push-state2');
            document.getElementById("state").innerText = history.state.data; 
        });
        document.getElementById("push-state3").addEventListener("click",function(){
            history.pushState({data : 'data3'}, '', '/push-state3');
            document.getElementById("state").innerText =  history.state.data;
        });
    </script>
</body>

</html>

728x90
저작자표시 비영리 변경금지 (새창열림)

'(기초)그래서 뭘 배운거야? > JavaScript' 카테고리의 다른 글

JS-127-checkbox의 value 복수 개 받아오기  (0) 2022.03.08
JS-125-BOM(location) : URL 설정하기  (0) 2021.10.09
JS-125-BOM(window.open) : 새창, 새페이지 열기  (0) 2021.10.09
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/07   »
일 월 화 수 목 금 토
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31
글 보관함