티스토리 뷰

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

JS-125-BOM(location) : URL 설정하기

Soheny.P 2021. 10. 9. 18:44
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>
    <button id="btn">Click</button>
    <script>
        console.log(location.href);
        document.getElementById("btn").addEventListener("click",function(){
            // href : 뒤로가기 가능
            location.href = "https://soheny-provides.tistory.com";
            // replace : 뒤로가기 불가능
            location.replace("https://soheny-provides.tistory.com");
        });
    </script>
</body>
</html>

 

 

<!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>
    <h1>BackForward1</h1>
    <a href="03-BOM(location-backforward)2.html">Move from 1st to 2nd</a>
 </body>

</html>
<!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>
    <h1>BackForward2</h1>
    <a href="03-BOM(location-backforward)3.html">Move from 2nd to 3rd</a>
    <button id="forward">Forward</button>

    <script>
        document.getElementById("forward").addEventListener("click",function(){
            // forward()통해 이동되는 페이지에도 back()이 있어야만 기능 동작
            history.forward();
        });

    </script>
</body>

</html>
<!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>
    <h1>BackForward3</h1>
    <!-- <a href="03-BOM(location-backforward)2.html">Move from 3rd to 2nd</a> -->
    <button id="back">Back</button>

    <script>
        document.getElementById("back").addEventListener("click", function () {
            // 이전 페이지를 기억하고 있어서 뒤로가기 가능
            history.back();
            // 뒤로 갔을 때 돌아가면 안되는 창이 있을 경우, 페이지를 지정해서 뒤로갈 수 있다
            // history.go(-2);
        });
    </script>
</body>

</html>

728x90
저작자표시 비영리 변경금지

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

JS-126-BOM(history) : 방문했던 페이지 이동하기  (0) 2021.10.10
JS-125-BOM(window.open) : 새창, 새페이지 열기  (0) 2021.10.09
JS-124-BOM Storage : 브라우저 데이터 저장 영역  (0) 2021.10.07
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
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
글 보관함