■ 자바스크립트를 이용하여 다른 URL 로 화면 이동하기
자바스크립트로 다른 URL 호출하는 방법은 여러가지가 있습니다.
자바스크립트에서는 window.location 또는 간단하게 location 오브젝트를 이용하여 현재 웹페이지의 정보를 가져오거나 수정하는데 사용합니다. 수정한다는 이야기는 현재 페이지에 보여지는 URL 을 변경 하는 것도 포함됩니다.
그래서 우리는 다른 페이지로 이동 시킬때
window.location 또는 location object 를 이용합니다.
아래는 다른 URL 로 이동시키는 방법입니다.
window.location = "https://www.james_redirectUrl.com";
window.location.href = "https://www.james_redirectUrl.com";
window.location.assign("https://www.james_redirectUrl.com");
window.location.replace("https://www.james_redirectUrl.com");
self.location = "https://www.james_redirectUrl.com";
top.location = "https://www.james_redirectUrl.com";
window.location 은 단순히 location 만 사용해도 되므로 위 코드들 중 첫 네개는 아래와 같이 사용 가능합니다.
location = "https://www.james_redirectUrl.com";
location.href = "https://www.james_redirectUrl.com";
location.assign("https://www.james_redirectUrl.com");
location.replace("https://www.james_redirectUrl.com");
위와 같은 방식으로 원하는 URL 로 화면 이동을 할 수 있지만 각각 조금씩 다른 부분이 있습니다.
예를 들어 location.replace() 를 할 경우 history stack 에서 현재 페이지를 호출할 페이지로 바꿔 치기 하는 것으로 이 경우 back button 을 이용하거나 history.back() 함수 등을 이용하여 이전 화면으로 이동 할 수 없습니다.
쉽게 설명 하자면
화면 이동을 1 > 2 > 3 번 페이지로 이동 하여 현재 화면이 3번 인 상태 입니다.
여기서 location.replace() 를 이용하여 4번 페이지로 이동 시켰습니다.
그러면 history stack 에는 1 > 2 > 3 대신에 1 > 2 > 4 가 저장됩니다.
여기서 history back 을 할 경우 3번 화면으로 이동 하는 것이 아니라 2번 화면으로 이동하게 됩니다.
만약 location.href 를 사용하여 이동 하였다면
1 > 2 > 3 에서 4번 화면이 추가 되어 history stack 에는 1 > 2 > 3 > 4 가 저장되게 됩니다.
물론 이상태에서 history back 을 할 경우 3번 화면이 나오게 됩니다.
다른 화면이 아니라 현재 화면을 리로드 할 경우는 아래와 같이 사용하면 됩니다.
window.location.reload();
이제 위 방법들을 이용하여 여러 상황에 따른 화면 이동 처리를 어떻게 하는지 보시겠습니다.
■ 화면이 호출 되는 시점에 다른 화면 호출 하기
화면이 호출 되는 시점에 화면 전환해야 하는 경우가 종종 있습니다 .
이때는 웹페이지의 <head> 태그 안에 아래와 같은 스크립트를 추가 하면 됩니다.
<script>
window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
</script>
스크립트부가 로드 되는 시점에 바로 location.href 가 호출 됩니다.
이 경우 사용자는 현재 호출되는 페이지를 볼수 없습니다. 화면을 랜더링 하기 전에 바로 다른 페이지로 이동 하기 때문입니다.
■ 화면 진입 후 약간 대기 후 다른 화면 호출하기
<script>
setTimeout(function(){
window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
}, 5000);
</script>
다른 화면이 호출 되는 시점을 스크립트부가 로드되고 5초가 지난서야 다른 화면을 호출 하는 예제 입니다.
■ 화면 진입 후 조건이 맞을 경우에 화면 호출하기
<script>
var condition = true; // 사용자가 특정 조건에 맞게 설정 또는 데이터 로드값으로 처리
if(condition){
window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
}
</script>
스크립트부가 로드 될때 condition 이라는 값이 true 일 경우 다른 화면을 호출 합니다.
여기서 condition 은 개발자가 선언하여 사용하면 됩니다.
■ 화면 진입 후 사용자에 의해 이벤트가 발생 한 경우 화면 호출하기
<script>
document.getElementsById("buttonEvent").onclick = function() {
window.location.href = "https://www.james_redirectPage_on_pageLoad.com";
};
</script>
id 값이 buttonEvent 인 컴포넌트가 클릭 된 경우 화면 이동처리하는 예제입니다.
화면 이동 처리를 할 수 있는 방법들은 많이 있습니다.
개발 시 원하는 케이스에 맞춰서 개발 할 수 있도록 하면 좋을 것 같습니다.
'javascript' 카테고리의 다른 글
| [자바스크립트 코딩] 오류 및 예외 처리 (4) | 2017.09.06 |
|---|---|
| [자바스크립트 코딩] 자바스크립트 배열 초기화 (491) | 2017.08.31 |
| 자바스크립트 URL 인코딩 (4) | 2017.07.24 |
| 자바스크립트 뒤로가기, javascript:history.back() (7) | 2017.07.20 |
| javascript class 명 추가/삭제 (193) | 2017.07.18 |
쉬운코딩이최고
Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.