■ 자바스크립트를 이용하여 다른 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 인 컴포넌트가 클릭 된 경우 화면 이동처리하는 예제입니다. 



화면 이동 처리를 할 수 있는 방법들은 많이 있습니다. 

개발 시 원하는 케이스에 맞춰서 개발 할 수 있도록 하면 좋을 것 같습니다. 

블로그 이미지

쉬운코딩이최고

Android, Java, jsp, Linux 등의 프로그래밍 언어를 소개 합니다.

,