[JavaScript] location(reload / href / assign / replace)

JS 관련/JavaScript

[JavaScript] location(reload / href / assign / replace)

씨네 2022. 1. 24. 11:33

728x90

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

	<script type="text/javascript">
	
	function locationTest01(){	
		location.reload();								// 새로고침
	}
	function locationTest02(){
		location.href="http://www.naver.com";			// naver이동
	}
	function locationTest03(){
		location.assign("http://www.naver.com");		// assign은 href와 같음
	}
	function locationTest04(){
		location.replace("http://www.naver.com");		// 전 단계 이력 삭제( 덮어 쓰기 )
	}
	</script>

</head>
<body>

	<a href="https://www.iei.or.kr/main/main.kh?src=overture&kw=003DFA&gcl_keyword=kh%EC%A0%95%EB%B3%B4%EA%B5%90%EC%9C%A1%EC%9B%90&gclid=CjwKCAiA9bmABhBbEiwASb35VzMy1XZqvOlFHhj6ex67DTf5IsrG1VOU0_Soa3jmzbIJkZFDrbzq1BoC1cYQAvD_BwE">이동0</a>

	<button onclick="locationTest01();">이동1</button>
	<button onclick="locationTest02();">이동2</button>
	<button onclick="locationTest03();">이동3</button>
	<button onclick="locationTest04();">이동4</button>

</body>
</html>

HTML에서는 페이지 이동을 위해 <a>태그를 사용하였습니다.

이동0은 <a>태그로 감싸져 있으며 누르게 되면 설정한 경로로 이동합니다.

function locationTest01(){	
	location.reload();
}

이동1 버튼을 클릭하면 해당 함수가 실행됩니다.

해당 함수는 새로고침과 같은 기능을 합니다.

현재 페이지 내에서는 아무런 변화가 없습니다.

function locationTest02(){
	location.href="http://www.naver.com";
}

이동2 버튼을 클릭하면 location.href 명령이 수행됩니다.

<a>태그와 비슷한 역할이며 해당 경로로 이동합니다.

function locationTest03(){
	location.assign("http://www.naver.com");
}

assign은 href와 같은 역할입니다.

function locationTest04(){
	location.replace("http://www.naver.com");
}

replace는 이전 단계의 이력을 없애고 덮어쓰기합니다.

728x90