익스플로러나 크롬등의 웹브라우저에서 새로고침 단축키는 F5입니다. 이 기능을 웹개발을 하면서 필요할 때가 있는데요. 자바스크립트 새로고침 소스를 통해서 한번 구현해 보겠습니다.
기본적인 구조는 웹페이지에서 버튼을 클릭하면 새로고침 기능이 발현되는 구조로 만들어 보겠습니다.
새로고침 메소드
자바스크립트에서 사용하는 새로고침 메소드는 reload인데요.
이를 활용해서 한번 웹페이지를 만들어 보겠습니다.
예제 소스
<script type="text/javascript"> function reload() { document.location.reload(); } </script> <body> <form name="testform"> <input type="checkbox" id="apple">사과<br> <input type="checkbox" id="blue">블루베리<br> <input type="checkbox" id="orange">오렌지<br> <input type="text" value=""> <input type="button" value="새로고침" onclick="reload()"> </form> </body>
위의 예제는 페이지가 새로 리로드 되는지 확인하기 위해 체크박스와 텍스트 박스를 나타냈습니다.
체크 박스와 텍스트박스에 아무 글자나 넣고 새로고침을 누를 경우 페이지가 리로드 되면서 체크박스가 해제되고 텍스트 박스의 내용이 사라지는데 이를 통해서 기능이 제대로 되는지 확인할 수 있습니다.
소스 결과
페이지 초기화면 입니다.
위의 새로고침 버튼을 클릭하면 현재 화면이 모두 초기화가 됩니다.
다음과 같이 페이지가 정상적으로 리로드 되면서 모든것이 초기화 되었습니다.
우의 자바스크립트 새로고침 예제에서 사용했던 location은 새로고침 외에도 뒤로가기 등의 다양한 메소드를 제공하니 활용해 보시기 바랍니다.
답글 남기기