[HTML5&JavaScript] DOM/BOM(2) - Location

고동이의 IT·2021년 11월 18일
0

HTML5&JavaScript

목록 보기
13/15
post-thumbnail

Location객체 : URL 정보 얻기

  • location.href를 가장 많이쓴다.

예제

  • replaced(): 현재화면을 새로운 화면으로 대체하고 이전화면으로 돌아갈 수 없다.
  • reload(): 현재 문서를 재호출한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/mystyle.css" type="text/css">
<script type="text/javascript">
function proc1(){
	
	str = "protocol: " +location.protocol+"<br>";
	str += "hostname: "+location.hostname+"<br>";
	str += "port: "+location.port+"<br>";
	str += "host(hostname + port): "+location.host+"<br>";
	str += "pathname: "+location.pathname+"<br>";
	str += "href: "+location.href+"<br>";
	
	document.querySelector("#result1").innerHTML = str
	
}

function proc2(){
	
	 location.href = "test.jsp"; 

}

function proc3(){
	document.myform.action = "testPost.jsp";
	document.myform.method = "post";
	document.myform.submit();
}

function proc4(page){
	location.replace(page);
}

function proc5(){
	arr = ["hello", "ChristMas", "happy","sad","good","bad"];
	num = parseInt(Math.random()*arr.length);
	str = "<h1>"+ arr[num] + "</h1>";
	
	/* document.getElementById('result5').innerHTML = str;
	document.getElementById('result5').style.color = "red"; */
	
	result = document.getElementById('result5');
	result.innerHTML = str;
	result.style.color = "red";
	
	setTimeout(function(){
		
		location.reload();
		
	}, 1000);
}

</script>
</head>
<body>

<div class="box">
	location객체: URL 정보 얻기
	<br>
	<button type="button" onclick="proc1()">확인</button>
	<div id="result1">
	</div>
</div>

<div class="box">
	자동으로 특정페이지를 이동할 때 사용 <button type="button" onclick="proc2()">location.href</button>
	<br>
	a태그 이용- script의 함수호출후 location.href이용
	<a href="javascript:proc2()">공지사항 목록</a>
	<br><br>
	
	get-----------------------------<br>
	<input type="button" onclick="location.href='test.jsp'"> get이동<br>
	post----------------------------<br>
	<form name = "myform">
	 <input type="hidden" name = "korea" value="코리아">
	 <input type="button" onclick="proc3()">
	 
	</form>
</div>

<div class="box">
	location.replace(url): 현재화면을 새로운 화면으로 대체하고 이전화면으로 돌아갈 수 없다.<br>
	새로운 문서로 대체한다.<br>
	
	<button type="button" onclick="proc4('test.jsp')">replace</button>

</div>

<div class="box">
	location.reload(): 현재 문서를 재호출한다.<br>
	result5에 랜덤으로 발생하는 문자를 출력하고 1초후에 원래페이지를 재호출한다.
	<button type="button" onclick="proc5()">reload</button>
	<div id ="result5">
	</div>

</div>

</body>
</html>
profile
삐약..뺙뺙

0개의 댓글