728x90
개발자들이 웹코딩을 하다 보면 여러가지 자바스크립트(Javascript), 제이쿼리(jQuery), PHP, Html 등으로 페이지 이동을 해야 할 경우가 있습니다. 한가지 언어만 사용해도 되고, 상황에 따라 2가지 이상의 언어를 섞어서 사용해야할 경우도 있습니다. 이번에는 각 상황별 페이지 이동을 시키는 여러가지 방법을 소개 하겠습니다.
<Javascript>
1 2 3 4 5 | location.href='경로/파일명'; location.replace('경로/파일명'); history.back() history.pushState(state, title, url); | cs |
location.href : 페이지 깜빡임이 있으며, 페이지 자체를 이동시킴
location.replace : 페이지 깜빡임이 있으며, 페이지 주소를 바꿔 새로고침
history.back() 또는 history.back(-1) : 페이지 깜빡임이 있으며 흔히 말하는 웹 브라우져의 뒤로가기 와 같은 기능
history.pushState
페이지를 리로드하지 않고 페이지 주소만 변경할 때 사용합니다.
브라우저가 HTML5를 지원해야 사용 가능합니다. (IE는 10이상)
https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
<PHP>
1 2 3 4 | <?php Header("Location:경로/파일명"); echo "<script>location.href='경로/파일명';</script>"; ?> | cs |
웹브라우져 통신간 Header 부분을 변경하여 이동하는방법
그리고 PHP상태에서 echo 명령어로 웹브라우져 통신의 body 부분에 자바스크립트를 직접 출력하여 이동하는 방법
<Html>
1 | <meta http-equiv='refresh' content='시간지정' url='경로/파일명'> | cs |
마지막으로 meta태그를 이용하여 지정한 시간뒤에 이동하는 방법, 바로 이동을 하고자 한다면 시간을 0으로 설정 하면 됩니다.
'개발이야기 > Javascript' 카테고리의 다른 글
| 사용자가 PC인지 Mobile인지 확인방법 (0) | 2018.02.19 |
|---|---|
| ajax통신간 jsonp를 이용한 크로스도메인 이슈 해결 (2) | 2018.02.14 |
| jQuery .data 사용 방법 (0) | 2018.02.12 |
| 로컬스토리지, 세션스토리지, 쿠키의 차이점 (3) | 2018.02.09 |
| Collapse와 Accordion를 jQuery로 직접 구현하기 (Javascript) (0) | 2018.01.31 |
