[JavaScript] 페이지 이동 ( location.replace(), location.href, <form action="">과 차이점 )

2021. 6. 7. 22:51·프로그래밍 언어/JavaScript
목차
  1. location.replace('link')
  2. location.href
  3. window.open('link')
  4. <form action=""> vs JavaScript 페이지 이동
반응형
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>index2로 이동하기</h1>
<button onclick="hrefLink()">href</button>
<button onclick="replaceLink()">replace()</button>

<script type="text/javascript">
link = 'index2.html';

function hrefLink() {
	location.href = link;
}
function replaceLink() {
	location.replace(link);
}

</script>
</body>
</html>

html에서는 <a href> tag 혹은 <from action=""> submit button을 이용해서 페이지를 이동시킬 수 있다.

JasvaScript에서 페이지 이동은 location.replace(), location.href 가 있다.

index2로 이동하기

location.replace('link')

현재 페이지를 덮어 씌우기 때문에 replace를 사용해서 페이지를 넘어가게 되면 이전 페이지로 돌아갈 수 없다.

location.href

<a href> tag와 동일하게 페이지 이동을 하는 메서드 이다. replace()와 다르게 이전 페이지로 돌아갈 수 있다.

window.open('link')

새창으로 열기

<a href="" target="_blink">동일하다. 


<form action=""> vs JavaScript 페이지 이동

form의 경우 input type의 값을 채우지 않고 빈칸인 상태에서 submit을 누르게 되면 빈칸인 상태로 이동이 된다.

JS의 경우 조건문을 통해서 빈칸인 경우 이동을 못하게 제어할 수 있다.

반응형
저작자표시 (새창열림)

'프로그래밍 언어 > JavaScript' 카테고리의 다른 글

[JavaScript] DOM이란? JavaScript로 html 태그 추가(JavaScript를 사용해 DOM에 새로운 노드 추가, childNodes)  (0) 2021.06.08
[JavaScript]이벤트 리스너(event listener)  (0) 2021.06.07
[JavaScript] html태그 name과 id로 접근하기 ( document.getElementById('id') )  (0) 2021.06.07
[JavaScript] id, class, name 식별자 예제를 통해서 확인하기  (0) 2021.06.07
[JavaScript] html 문서에 JavaScript를 포함할때 어떻게 포함하는게 효율적일까? (head,body,defer, async)  (0) 2021.06.07
  1. location.replace('link')
  2. location.href
  3. window.open('link')
  4. <form action=""> vs JavaScript 페이지 이동
'프로그래밍 언어/JavaScript' 카테고리의 다른 글
  • [JavaScript] DOM이란? JavaScript로 html 태그 추가(JavaScript를 사용해 DOM에 새로운 노드 추가, childNodes)
  • [JavaScript]이벤트 리스너(event listener)
  • [JavaScript] html태그 name과 id로 접근하기 ( document.getElementById('id') )
  • [JavaScript] id, class, name 식별자 예제를 통해서 확인하기
:j
:j
ddongjunn@gmail.com
dev.jddongjunn@gmail.com
  • :j
    dev.j
    :j
  • 전체
    오늘
    어제
    • :j
      • 프로그래밍 언어
        • Java
        • html
        • JavaScript
        • XML
        • JSON
        • CSS
        • jQuery
        • Web
        • k8s
        • JPA
      • 프레임워크
        • Spring
      • 코딩 테스트
        • Java
      • 네트워크
        • CCNA
      • 데이터베이스
        • Mssql
        • Oracle
      • 회고
      • :j story
      • CS
  • 블로그 메뉴

    • 홈
    • 태그
    • github
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    HAVING
    항해플러스
    id
    오버로딩
    오버라이딩
    Queue
    다형성
    group by
    항해플러스백엔드
    appendChild
    항해백앤드
    <br>
    class
    멤버변수
    지역변수
    항해솔직후기
    MSSQL
    항해플러스백앤드
    항해99
    Name
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
:j
[JavaScript] 페이지 이동 ( location.replace(), location.href, <form action="">과 차이점 )
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.