페이지 이동 Loction.href

웹해킹공부를 하면서 가장 자주 보는 것 중 하나가 location.href인 거 같다.

쉬운 내용이지만 글쓴이처럼 헷갈려하는 분들을 위해 알게된 내용을 정리해보았다. ㅎㅎ

1. Location.href란??

현재 페이지의 url을 설정하거나 반환해주는 javascript의 속성으로 

대부분 페이지 이동 시에 자주 사용하는 거 같다.

2. 페이지 이동시 사용되는 location.href

Location.href="~~" 형태로 사용되며 

"~~"은 String type의 value가 들어오게 되며 ~~에는 파일의 경로가 들어간다.

파일의 경로로 인터넷의 url이 들어올 수 있고 서버안에 있는 파일의 경로가 들어올 수 있다.

1) 인터넷의 url 

location.href="https://www.google.co.kr" 라고 설정하면 현재 페이지의 주소창이 https://www.google.co.kr로 바뀌면서  구글로 페이지 이동을 하게 된다.

2) 서버안에 있는 파일의 경로 

상대 경로의 개념으로 현제 페이지의 코드파일이 있는 곳을 기준으로 경로를 지정한다.

설명을 쉽게 하기 위해 예시로 다음과 같은 서버내 파일들이 있다고 가정해보자.

  ① 같은 디렉토리 내의 파일로 이동하는 경우 

  index.html가 현재 페이지의 코드가 들어있는 파일이라는 가정하에 FileTwo로 이동하는 경우로 

  location.href="FileTwo" 라고 설정해주면 된다.

  같은 디렉토리 내의 파일이므로 파일이름만 써주면 된다. 

  그리고 주소창의 변화를 보면 다음과 같다.

    - 현재 페이지 : https://xxx.xxx.xxx.xxx/xxxx/i/index.html

    - 이동 후 페이지 : http://xxx.xxx.xxx.xxx/xxxx/i/FileTwo

  ② 하위 디렉토리 내의 파일로 이동하는 경우 

  index.html가 현재 페이지의 코드가 들어있는 파일이라는 가정하에 FileOne으로 이동하는 경우로 

  location.href="./haha/FileOne" 라고 설정해주면 된다.  

  하위 디렉토리 내의 파일이므로 해당 디렉토리이름을 써주고나서 파일이름을 써줘야한다. 

    - 현재 페이지 : https://xxx.xxx.xxx.xxx/xxxx/i/index.html

    - 이동 후 페이지 : http://xxx.xxx.xxx.xxx/xxxx/i/haha/FilOne

  ③ 상위 디렉토리 내의 파일로 이동하는 경우 

    FileOne이 현재 페이지의 코드가 들어있는 파일이라는 가정하에 FileTwo으로 이동하는 경우로 

    location.href="../FileTwo" 라고 설정해주면 된다.  

    ../ 은 현재 위치의 상위폴더를 의미한다. 만약 두단계 상위 폴더로 가고 싶다면 ../../ 

      - 현재 페이지 : http://xxx.xxx.xxx.xxx/xxxx/i/haha/FilOne

      - 이동 후 페이지 : http://xxx.xxx.xxx.xxx/xxxx/i/FileTwo

loction.href을 사용해서 어떻게 어디로 이동하는지에 대해 내용을 정리해 보았다.

이를 통해 우리는 역으로 location.href="~~"라는 코드를 보고 어디로 이동하지도 알 수 있을 것이다.

예를 들면 location.href="FileTwo" 라는 코드를 보고 기준 파일의 경로를 기준으로 같은 디렉토리내의 파일인 FileTwo로 이동하는 것을 알 수 있으며 기준 페이지의 url이  https://xxx.xxx.xxx.xxx/xxxx/i/index.html 였다면  http://xxx.xxx.xxx.xxx/xxxx/i/FileTwo로 이동하는 것 또한 알 수 있다.

Create by Gae Ko