상세 컨텐츠

본문 제목

[자바스크립트] window.history 뒤로 가, 앞으로 가

javascript_자바스크립트

by 쫑메이 2020. 6. 21. 00:08

본문

 

 

 

 

 

 


 

 

 

 

 

 

자바스크립트에서 window.history 다루면

페이지를 앞으로, 뒤로 이동할 수 있어요~

자바스크립트로 페이지 제어하러 가볼까요?

 

 

 


 

 

 

 

 

window.history

 


 

window.history. 변수=> history.length 방문 기록 개수

window.history. 함수() => history.back( ) 뒤로 이동

                                                       => history.forward( ) 앞으로 이동

                                                      => history.go(-1))한 칸 뒤로 이동

                                                       => history.go(1)한 칸 앞으로 이동

 

 

 

 

 

 

history.length 방문 기록 개수

 


 

 

① history.length 방문 기록 개수

 

[형식]

<script type="text/javascript">

 

function fun1() {

alert(history.length);

}

</script>

</head>

<body>

<input type="button" value="방문 기록 개수" onclick="fun1()">

</body>

 

 

 

 

 

 

 

 

 

 

[예제]

 

 

 

 

 

 

 

 

 

 

 

history.back() 뒤로 이동


 

 

② history.back() 뒤로 이동

 

 

[형식]

<script type="text/javascript">

 

function fun1() {

alert('뒤로 이동');

history.back()

}

</script>

</head>

<body>

<input type="button" value="뒤로 이동" onclick="fun1()">

</body>

 

 

 

 

 

 

[예제]

 

 

 

 

 

 

history.forward() 앞으로 이동

 


 

 

 

 

③ history.forward() 앞으로 이동

 

 

[형식]

<script type="text/javascript">

 

function fun3() {

history.forward();

}

</script>

</head>

<body>

<input type="button" value="앞으로 이동" onclick="fun3()">

 

 

 

 

 

 

 

 

 

 

[예제]

 

 

 

 

 

history.go(-1)) 한 칸 뒤로 이동

 

 

 

④ history.go(-1)) 한 칸 뒤로 이동

 

 

 

[형식]

<script type="text/javascript">

 

function fun1() {

history.go(-1);

}

</script>

</head>

<body>

<input type="button" value="한 칸 뒤로 이동" onclick="fun()">

</body>

 

 

 

 

 

 

 

[예제]

 

 

 

 

 

 

 

 

 

 

history.go(1) 한 칸 앞으로 이동

 


 

 

 

⑤ history.go(1) 한 칸 앞으로 이동

 

 

 

[형식]

<script type="text/javascript">

 

function fun1() {

history.go(1);

}

</script>

</head>

<body>

<input type="button" value="한 칸 앞으로 이동" onclick="fun()">

</body>

 

 

 

 

 

 

 


 

 

ㅣ읽느라 수고 많으셨어요~ㅣ


 

 

 

 

 

 

 


 

 

 

부족한 글을 읽어주셔서 감사드립니다

아직 부족한 게 많으니

틀린 곳이 있다면

조언의 말씀 꼭 부탁드립니다!!!!

 

 

 

 

 

 


 

 

반응형

관련글 더보기